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

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. 

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

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.

Yorumlar

Yorum Yapabilmek İçin Giriş Yapmalısınız.
İlk Yorum Yapan Sen Ol!
Uçur Beni Kahramanım Yukarı Çık
Bu web sitesi çerezleri kullanıyor. Devam ederek çerez kullanımını kabul etmiş oluyorsunuz. Detay

Devam Etmek İçin Giriş Yapın

Kod Hocası İle Paylaşımda bulunabilir, Kendini geliştirebilirsin. Sende Hemen Giriş Yap Aramıza Katıl.

GirişKayıt Ol