Issuu on Google+

Ad o b ew o rd p ress. co m / T a sa rı m U n su rl a rı / CSS3 / CSS i l e T ext- Sh a d o w ’a M a ske

CSS ile Text-Shadow’a Maske Vatanay Özbeyli tarafından 02 Haziran 2013 tarihinde yazıldı. ~ Yorum Yok + Değiştir

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. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

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/wpcontent/uploads/test/images/mask.png);


28 } 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. 1 <h1 data-shadowtext="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.

Benzer Konular: CSS Text-Shadow Nedir? Nasıl Yazılara Et Kalınlığı… CSS ile Etkileyici İnteraktif Logo CSS ile 3D, Blur, Ateş, Buz, Neon, Asit, Alfa ve Anaglyph… CSS ile Title ve Alt Etiketlerini Renklendirin CSS ile Oyulmuş Yazı Efekti

Yazı Kategorisi : CSS3 , Tasarım Unsurları Anahtar Kelimeler : arka , çizgili , css , mask , masked , noktalı , plan , shadow , Text



Css ile text shadow'a maske