Css Gradient Kullanımı

Bu yazımızda 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.

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. Buradaki renk ve açı değerleri üzerinde değişiklikler yaparak sonucu incelerseniz daha anlaşılır olacaktır.

LİNEAR GRADİENT TARAYICI DESTEĞİ

Fonksiyon Chrome IE Firefox Safari Opera
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 tabloda tarayıcıların linear fonksiyonunu hangi versiyon ile birlikte sorunsuz desteklemeye başladığını görebilirsiniz.

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.

RADİAL GRADİENT TARAYICI DESTEĞİ

Fonksiyon Chrome IE Firefox Safari Opera
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 tabloda 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.

Umarım sizin için faydalı bir yazı olmuştur.

Yeni bir yazımda görüşmek üzere.

Yorum Yazın

E-BÜLTEN ABONELİĞİ

Adını ve E-Posta adresini yazarak Html, Css, Javascript, Jquery, Bootstrap, Web Tasarım, C#, Asp.Net MVC, MSSQL ve daha birçok alanda ders anlatımlarından ve uygulamalı örneklerden anında haberdar olabilirsin.
ABONE OL
close-link