CSS ile Text-Shadow’a Maske

Daha önce CSS3’ün gelişmiş text-shadow özelliği ile şık tasarımlar yaptık. Bu makalemde ise oluşturduğumuz çizgisel PNG dosyasını kullanarak gölgelerimizi nasıl maskeleyeceğimizi öğreneceğiz. Özellikle başlıklarınızın için kullanabileceğiniz bu gölgeleme tekniğini hazırlamak gayet basit.

Maske.png dosyasına buradan erişebilirsiniz.

Eğer hazırsanız derse başlayalım.

Nasıl hazırlanır?

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(https://www.adobewordpress.com/tasarim/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.

Sırada HTML kodlarımız var.

<h1 data-shadow-text="adobewordpress.com">adobewordpress.com</h1>

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.

Bu yeni text-shadow tekniği için Daniel Riemer’a teşekkür ederiz. Bir sonraki makalemde görüşmek üzere, hoşça kalın.