-
Üyelik
08.07.2011
-
Yaş/Cinsiyet
36 / E
-
Meslek
Tasarımcı
-
Konum
İstanbul Avrupa
-
Ad Soyad
V** Ö**
-
Mesajlar
677
-
Beğeniler
58 / 418
-
Ticaret
1, (%100)
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/
4 kişi bu mesajı beğendi.
adobewordpress.com ~ “güncel tasarım okulu”
JigSaw
Üyeliği Durdurulmuş
Banlı Kullanıcı
-
Üyelik
08.03.2012
-
Yaş/Cinsiyet
36 / E
-
Meslek
Kriminolog
-
Konum
Ankara
-
Ad Soyad
K** A**
-
Mesajlar
657
-
Beğeniler
9 / 220
-
Ticaret
0, (%0)
Yapılabilirlik adına güzel ama kullanıcı gözüyle malesef beğenmedim. 3-5 kişinin tarzına uygun olabilir ama büyük hedef kitlelerine hitap ederken, böyle bir tasarım kullanmak projeye zarar verir.
-
Üyelik
08.07.2011
-
Yaş/Cinsiyet
36 / E
-
Meslek
Tasarımcı
-
Konum
İstanbul Avrupa
-
Ad Soyad
V** Ö**
-
Mesajlar
677
-
Beğeniler
58 / 418
-
Ticaret
1, (%100)
keremsamet adlı üyeden alıntı
Yapılabilirlik adına güzel ama kullanıcı gözüyle malesef beğenmedim. 3-5 kişinin tarzına uygun olabilir ama büyük hedef kitlelerine hitap ederken, böyle bir tasarım kullanmak projeye zarar verir.
Dediğiniz gibi olmasa adı tasarım olmazdı. Her tasarımı beğenen birileri varken bundan nefret edenler de olacak. Yoksa şuan hepimiz Apple kullanıyor olurduk :)
adobewordpress.com ~ “güncel tasarım okulu”
-
Üyelik
25.06.2011
-
Yaş/Cinsiyet
30 / E
-
Meslek
Blogger
-
Konum
Samsun
-
Ad Soyad
F** Ö**
-
Mesajlar
2462
-
Beğeniler
98 / 442
-
Ticaret
2, (%100)
Retro tarzı olmuş sanki. Güzel çalışma.
Are you alright?
