Projelerinizde verimliliği artırmak, hataları bulmak ve daha hızlı geliştirmek için kullanabileceğiniz araçlarla dolu bir dünya!
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.
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.
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.
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.
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.
Yorum yapabilmek için giriş yapmanız gerekmektedir.