Css Gradient Kullanımı

Merhaba Arkadaşlar,
Bu makalede Css’te gradient fonksiyonları nedir, nasıl kullanabiliriz onu öğreneceğiz.Bir html etiketine background-color özelliği ile arkaplan rengi verebiliyoruz.Eğer arkaplan rengini tek renk yerine birden fazla renk kullanarak vermek istiyorsak gradient fonksiyonlarını kullanabiliriz.Burda şuna dikkat etmemiz gerekiyor.

       ► Gradient fonksiyonlarını kullanırken, background-image özelliği ile kullanıyoruz.Yani arkaplan resmi gibi kullanmış oluyoruz.

Linear, repeating-linear, radial, repeating-radial olmak üzere 4 farklı gradient fonksiyonu var.Şimdi sırasıyla bunları daha detaylı öğrenelim.

1 – Linear ve Repeating-Linear Gradient

Doğrusal gradientler oluşturmak için kullanılır.Kullanımı şu şekilde,

Başlangıç noktasını, başına “to” eki koyacak şekilde yön belirterek veriyoruz.Örneğin to top, to left, to bottom, to right, to top left vb.. Başlangıç açısını ise 90deg, -45deg vb.. gibi açısal değer olarak verebiliyoruz.Sonrasında ise en az 2 renk vererek gradient’i oluşturuyoruz.İsterseniz 2’den fazla renk de verebilirsiniz.repeating-linear fonksiyonu, verilen değerler ile oluşturulan gradient’in sürekli kendini tekrar etmesini sağlar.

Şimdi <div> etiketleri oluşturup, gradientler yapalım.Burdaki renk ve açı değerleri üzerinde değişiklikler yaparak sonucu incelerseniz daha anlaşılır olacaktır.

Tarayıcı Desteği

FonksiyonChromeIEFirefoxSafariOpera
linear-gradient()

26.0

10.0 -webkit-

10.0

16.0

3.6 -moz-

6.1

5.1 -webkit-

12.1

11.1 -o-

Bu resimde tarayıcıların linear fonksiyonunu hangi versiyon ile birlikte sorunsuz desteklemeye başladığını görebilirsiniz.

2 – Radial ve Repeating-Radial Gradient

Merkezden dışa doğru yayılan gradientler oluşturmak için kullanılır.Kullanımı şu şekilde,

Şekil parametresine 2 değer verebiliriz :

      ► ellipse : Varsayılan değerdir.Renk geçişleri elips şeklinde uygulanır.

      ► circle : Renk geçişleri daire şeklinde uygulanır.

Boyut parametresine 4 değer verebiliriz, bu değerleri aşağıdaki örnekler üzerinde incelerseniz aralarındaki farkları daha iyi görebilirsiniz.

      ► closest-side 

      ► farthest-side 

      ► closest-corner 

      ► farthest-corner 

Konum parametresi ile gradient’in konumunu belirleriz.Varsayılan değeri center’dır.

Bu parametreleri belirttikten sonra ise renklerimizi veriyoruz.repeating-radial fonksiyonu, verilen değerler ile oluşturulan gradient’in sürekli kendini tekrar etmesini sağlar.

Şimdi <div> etiketleri oluşturup, gradientler yapalım.Burdaki renk ve parametreler üzerinde değişiklikler yaparak sonucu incelerseniz daha anlaşılır olacaktır.

Tarayıcı Desteği

FonksiyonChromeIEFirefoxSafariOpera
radial-gradient()

26.0

10.0 -webkit-

10.0

16.0

3.6 -moz-

6.1

5.1 -webkit-

12.1

11.6 -o-

Bu resimde tarayıcıların radial fonksiyonunu hangi versiyon ile birlikte sorunsuz desteklemeye başladığını görebilirsiniz.

Tarayıcı uyumluluğu ile ilgili daha kapsamlı ve güncel bilgi almak isterseniz caniuse sitesini ziyaret edebilirsiniz.

Yeni bir makalede görüşmek üzere.

Önceki : Css Dersleri 27 – Column Kullanımı

Sonraki : Css Dersleri 29 – Border Image Kullanımı

Leave a Reply

TASARIMLARINIZDA KULLANABİLECEĞİNİZ TAM 150 FARKLI RENK PALETİRenkleri Göster
+ +