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