CSS3 Text-Shadow Özelliği ile Photoshop Kalitesinde Gölge Efektleri

Merhaba arkadaşlar,

Uzun zamandır Css kategorisi altında paylaşım yapamıyordum fakat bugün twitter üzerinde rastladığım bir tweet ile hemen kolları sıvadım ve bu güzel özelliği sizlerle paylaşma kararı aldım.Bildiğiniz üzere css tasarımın vazgeçilmezidir ve gün geçtikçe kullanıcılar için farklı özelliklerle üzerindeki ilgiyi arttırıyor.

Ben bu paylaşımımda sizlere CSS3 ile gelen text-shadow özelliğiyle sanki photoshop’ta yapılmış gibi gölge efektlerini 1 satır kodla nasıl hazırlayabileceğimizi anlatıcağım.Şimdi geçelim örneklerimize.

 

 

1 – Vintage – Retro CSS3

text-shadow: 5px 5px 0px #eee, 7px 7px 0px #707070;


2 – Neon CSS3

text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;

3 – Inset CSS3

text-shadow: 0px 2px 3px #666;

4 – Anaglyphic CSS3

text-shadow: 8px 8px 0 rgba(255,0,180,0.5);

5 – Fire CSS3

text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e;

6 – Board Game CSS3

text-shadow: 10px 10px 0 #ffd217, 20px 20px 0 #5ac7ff, 30px 30px 0 #ffd217, 40px 40px 0 #5ac7ff;

Görseller ve efekti uygulamak için gereken kodlar alt alta verilmiştir,Faydalı bir paylaşım olduğu için zaman kaybetmeden paylaşmak istedim.

Kaynak : Line25.com



  • Vintage çok hoşuma gitti… güzel efektler bunlar teşekkürler sağlun.

    • Bunların güzelliği Photoshop ile değilde Css ile yapılması,İlerleyen zamanlarda bloglarda sıkça karşılaşacağımız uygulamalar olduğunu söyleyebilirim.

  • çalışmalar güzel olmuş. anlatım için teşekkürler.

  • Güzel anlatım kardeşim.

  • tütüneson

    css3 ile web üzerinde artık daha estetik siteler yapmak mümkün.

  • Alperen

    Sadece bloglarda değil, tüm sitelerde 🙂

    • Son zamanlarda kişinin kendi tasarladığı sitelerden ziyade wordpress alt yapısı üzerine kurulan sitelerin çok olması,benide bazen şaşırtabiliyor 🙂

  • Vintage çok hoşuma gitti… güzel efektler bunlar teşekkürler sağlun.

    bu arkadasa katılıyorum süper – bu arada sitenizi takibe aldım :=)