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