Css kullanarak gradient text yapmak

Front-end developerların başının belası olan Gradient textler Css3 ile artık mümkün ve bir okadarda kolay. Şuanda bazı tarayıcılar desteklemese de zamanla hepsi bunu destekleyecektir diye düşünüyorum.

Öncelikle küçük bir örnek ile başlayalım. Aşağıdaki resimi CSS3 çıkmadan CSS ile yapmak mümkün değildi.

Css text gradient

 

 

Yukarıda bulunan yazı Photoshop ile yapıldı. Peki bunun Css ile yapılabildiğini söylesem ? Aşağıdaki örneğe bakalım;

Css3 Text Gradient

Yukarıdaki yazı CSS3 ile yapıldı. Buradan sayfaya ulaşabilirsiniz.

Peki bunu nasıl yapıyoruz. Çok basit;

background: -webkit-linear-gradient(#00601b, #54ff00);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent; }

İşte bu kadar basit. Bir sonraki makalemizde görüşmek üzere 🙂


Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

This site uses Akismet to reduce spam. Learn how your comment data is processed.