Css ile renk geçişli yazı yapımı

Sezai AlkanFrontend Developer

Css #renkgecisi #yazirenkgecisi #background #lineargradient

Css İle Background Kısmında kullandığımız Ve Renk Geçişi Sağladığımız linear-gradient() İle Yazı Üzerindede Etkili Oluyor. Öncelikle linear-gradient() ın Kullanımına Değinelim. 3 Şekilde Kullanım Sağlayabiliriz. 

1. Kullanımı

linear-gradient(orange, red);

Bu Kullanımda Yukarıdan Aşağıya Doğru Turuncudan Kırmızıya Bir Renk Geçişi Olacaktır. Renkler Arası Virgül İle Ayırt Edilerek Çoğaltılabilir.

2.Kullanımı

linear-gradient(to bottom right, orange, red);
linear-gradient(to right, orange, red);

Bu Kullanımda İse İlk Satırda to bottom right İle Belirletilen, Renklerin Nereden Başlayıp Nereye Doğru Geçiş Sağlanacağını Belirtiyor. to bottom right ta ise Sol Üst Köşeden Başlayıp Sağ Alt Köşeye Doğru Bir Geçiş Sağlayacaktır. Hemen Alt Satırdaki to right İse Soldan Sağa Bir Geçiş Sağlayacaktır.

3. Kullanımı

linear-gradient(180deg, orenge, red);

Bu Kullanımda Rengin Geçiş Yönünü 0 - 360 Derece Arası Belirleyebiliyoruz. 

Şimdi Yazı Arkasına Renk Geçişi Uygulayalım. 

<h1><span>Renk Geçişi</span><h1>

Renk Geçişi Diye Ekrana Bir Yazı Yazdırdık. Bu Yazıyı h1 in Aldında span Etiketli Arasına Aldık h1 Değişkenlik Gösterebilir. Yazı Fontu Büyük Gözükmesi İçin Yazılmıştır. Sonrasında span Etiketine linear-gradient() Özelliğini Tanımlayacağız.

Css Kodları

span{
        background: -webkit-linear-gradient(45deg, yellow,orange,green);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

linear-gradient() sarı turuncu yeşil arasında bir geçiş sağladık sonrasında background-clip() İle Bu Geçişi Yazının Arka Planında Olmasını Sağladık text-fill-color() İse Yazının Var Olan Rengini transparent İle Görünmez Hale Getirip Bizim Uyguladığımız Renklerin Öne Çıkmasını Sağlıyor.