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,
|
1 2 3 |
background-image: linear-gradient(başlangıç noktası veya açısı, renk1, renk2, ...); |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<style> div { width: 250px; height: 120px; } #g1 { background-image: linear-gradient(#4FB99F, #ED553B); } #g2 { background-image: linear-gradient(to right, #4FB99F, #ED553B); } #g3 { background-image: linear-gradient(to bottom right, #4FB99F, #ED553B); } #g4 { background-image: linear-gradient(-90deg, #4FB99F, #ED553B); } #g5 { background-image: linear-gradient(#4FB99F, #ED553B, #FFC20E, #BABCBE); } #g6 { background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); } #g7 { background-image: repeating-linear-gradient(60deg, #4FB99F 15%, #ED553B 45%); } </style> <h4>background-image:linear-gradient(#4FB99F, #ED553B);</h4> <div id="g1"></div> <h4>background-image: linear-gradient(to right, #4FB99F , #ED553B);</h4> <div id="g2"></div> <h4>background-image: linear-gradient(to bottom right, #4FB99F, #ED553B);</h4> <div id="g3"></div> <h4>background-image: linear-gradient(-90deg, #4FB99F, #ED553B);</h4> <div id="g4"></div> <h4>background-image: linear-gradient(#4FB99F, #ED553B, #FFC20E, #BABCBE);</h4> <div id="g5"></div> <h4>background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));</h4> <div id="g6"></div> <h4>background-image: repeating-linear-gradient(60deg, #4FB99F 15%, #ED553B 45%);</h4> <div id="g7"></div> |
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,
|
1 2 3 |
background-image: radial-gradient(şekil boyut konum, başlangıç rengi, ..., bitiş rengi); |
Ş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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
<style> div { width: 250px; height: 120px; } #g1 { background-image: radial-gradient(#4FB99F, #FFC20E, #ED553B); } #g2 { background-image: radial-gradient(#ED553B 5%, #FFC20E 15%, #4FB99F 60%); } #g3 { background-image: radial-gradient(circle, #4FB99F, #FFC20E, #ED553B); } #g4 { background-image: radial-gradient(closest-side at 60% 55%, #4FB99F, #FFC20E, #ED553B); } #g5 { background-image: radial-gradient(farthest-side at 60% 55%, #4FB99F, #FFC20E, #ED553B); } #g6 { background-image: radial-gradient(closest-corner at 60% 55%, #4FB99F, #FFC20E, #ED553B); } #g7 { background-image: radial-gradient(farthest-corner at 60% 55%, #4FB99F, #FFC20E, #ED553B); } #g8 { background-image: repeating-radial-gradient(#ED553B, #FFC20E 10%, #4FB99F 15%); } </style> <h4>background-image: radial-gradient(#4FB99F, #FFC20E, #ED553B);</h4> <div id="g1"></div> <h4>background-image: radial-gradient(#ED553B 5%, #FFC20E 15%, #4FB99F 60%);</h4> <div id="g2"></div> <h4>background-image: radial-gradient(circle, #4FB99F, #FFC20E, #ED553B);</h4> <div id="g3"></div> <h4>background-image: radial-gradient(closest-side at 60% 55%, #4FB99F, #FFC20E, #ED553B);</h4> <div id="g4"></div> <h4>background-image: radial-gradient(farthest-side at 60% 55%, #4FB99F, #FFC20E, #ED553B);</h4> <div id="g5"></div> <h4>background-image: radial-gradient(closest-corner at 60% 55%, #4FB99F, #FFC20E, #ED553B);</h4> <div id="g6"></div> <h4>background-image: radial-gradient(farthest-corner at 60% 55%, #4FB99F, #FFC20E, #ED553B);</h4> <div id="g7"></div> <h4>background-image: repeating-radial-gradient(#ED553B, #FFC20E 10%, #4FB99F 15%);</h4> <div id="g8"></div> |
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.
