lostyazilim
tr.link

CSS ile Etkileyici Text-Shadow

6 Mesajlar 1.166 Okunma
acebozum
tr.link

Adobewordpress Adobewordpress WM Aracı Kullanıcı
  • Ü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/
WampiR cparty Omercitak

kişi bu mesajı beğendi.

adobewordpress.com ~ “güncel tasarım okulu”
elektronikssl
webimgo

Harunokumus Harunokumus WM Aracı Kullanıcı
  • Üyelik 25.01.2013
  • Yaş/Cinsiyet 27 / E
  • Meslek Öğrenci
  • Konum Antalya
  • Ad Soyad H** O**
  • Mesajlar 481
  • Beğeniler 145 / 114
  • Ticaret 0, (%0)
Güzel olmuş
 

 

JigSaw 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.
 

 

Adobewordpress Adobewordpress WM Aracı Kullanıcı
  • Ü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”
wmaraci
wmaraci

furkanozden furkanozden Geleceğe hazır mısın? Kullanıcı
  • Ü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?

cudjex cudjex ozergul.net Kullanıcı
  • Üyelik 23.11.2011
  • Yaş/Cinsiyet 31 / E
  • Meslek öğrenci
  • Konum İzmir
  • Ad Soyad Ö** G**
  • Mesajlar 1647
  • Beğeniler 347 / 570
  • Ticaret 8, (%100)
http://easycss3.com/37/masked-text-shadow/

emeğe saygı.
 

 

ozergul.net/com
Site Ayarları
  • Tema Seçeneği
  • Site Sesleri
  • Bildirimler
  • Özel Mesaj Al