Projelerinizde verimliliği artırmak, hataları bulmak ve daha hızlı geliştirmek için kullanabileceğiniz araçlarla dolu bir dünya!

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. 

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.

Anonim

Yorum yapabilmek için giriş yapmanız gerekmektedir.

Sosyal Medya

Mobil Uygulama

Tarayıcı Eklentileri

Şifre Oluşturucu

Google Chrome Plugin

Yardımcı Siteler

w8icon

w8icon.com

Kod depo

koddepo.com

e-mvc

e-mvc.com