Her zaman olduğu gibi kod satırlarını HTML ve CSS olmak üzere iki ayrı kolda inceleyeceğiz. İlk olarak CSS ile başlayalım.

body { background: #9cb8b3;}

h1,h1:after {
font-weight: 900;
color: #efedce;
white-space: nowrap;
position: relative;
letter-spacing: .1em;
padding: .2em 0 .25em 0;
}

h1 {
text-transform: uppercase;
font: 900 4em 'Raleway', sans-serif;
z-index: 100;
text-shadow: .04em .04em 0 #9cb8b3;
}

h1:after {
content: attr(data-shadow-text);
color: rgba(0,0,0,.35);
text-shadow: none;
position: absolute;
left: .0875em;
top: .0875em;
z-index: -1;
-webkit-mask-image: url(http://www.adobewordpress.com/wp-content/uploads/test/images/mask.png);
}

Burada önemli olan -webkit-mask-image isimli kod satırındaki mask.png dosyasını kendi sunucunuzdaki adresi ile değiştirmek.

Maske.png dosyasına buradan erişebilirsiniz.

Sırada HTML kodlarımız var.

adobewordpress.com

Buradaki data-shadow-text alanı gölgede yazacak metni belirtmekte. Düzeltirken iki adobewordpress.com yazısını da düzeltmeniz gerekiyor.

Sonuç

Text-shadow hazır. Gayet şık görünüyor.

Bir sonraki makalemde görüşmek üzere, hoşça kalın.

Kaynak : http://www.adobewordpress.com/css-ile-text-shadowa-maske/