CSS ile Gradyan Oluşturma
Css'deki background-color özelliği ile html elemanlarına düz bir arkaplan rengi belirleyebilmekteyiz.
İki veya daha fazla renk arasında yumuşak bir geçiş sağlanarak elde edilen görünümlere Gradyan (Gradient) denir.
CSS3 sayesinde arkaplan rengini linear (doğrusal) ve radial (dairesel) gradyan olarak belirlememiz mümkün hale geldi.
Doğrusal gradyan elde etmek için linear-gradient özellği, dairesel gradyan elde etmek içinse radial-gradient özelliği kullanılır.
Ayrıca tarayıcıların eski versiyonları için -webkit-, -moz-, -o- ön ekleri kullanılmaktadır.
background: linear-gradient( gradyanYönü, renk1, renk2, ...);
Yukarıdaki gradyan yönünü belirtmek isteğe bağlıdır. En az iki renk belirterek bu renkler arasında yumuşak bir geçiş elde edebiliriz.
Örnek:
#kutu1 {
background-color: blue; /* Hiç desteklemeyen tarayıcılar için */
background: linear-gradient(blue, green); /* Standard kullanım şekli- Yeni tarayıcıların tümünde yeterli */
background: -webkit-linear-gradient(blue, green); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(blue, green); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(blue, green); /* Firefox 3.6 - 15 */
}
Bu örnekte background-color özelliği de kullanılmasının nedeni, gradient özelliğini desteklemeyen tarayıcılar için bu özelliğin geçerli olmasını sağlamaktır.
Örnekte iki renk belirtilerek gradyan elde edilmiştir. Konu örnekleri kısmında kodların çalışan hallerini görebilirsiniz.
Gradyanın yönünü belirlemek istediğimizde eski tarayıcı tipleri için yazım şekli değişebilmektedir. Yeni tarayıcıların tamamı linear-gradient özelliğini desteklemektedir. Soldan sağa yani yatay gradyan oluşturmak için normal yazım şekli şu şekildedir:
background: linear-gradient(to right, blue, green);
Daha eski versiyonlar için de aynı yönü belirtmek istersek tam olarak şu şekilde kullanabiliriz:
#kutu1 {
background: blue;
background: linear-gradient(to right, blue, green);
background: -webkit-linear-gradient(left, blue, green);
background: -o-linear-gradient(right, blue, green);
background: -moz-linear-gradient(right, blue, green);
}
Köşegen yani çapraz şekilde gradyan oluşturmak da mümkündür. Bunu için hem yatay hem de dikey başlangıç/bitiş konumlarının belirtilmesi gerekir. Yine eski tarayıcılar için yazım şekli değişmektedir.
Alttaki örnekte sol üstten sağ alta doğru diagonal (çapraz) gradyan oluşturulması sağlanmıştır.
#kutu1 {
background: blue;
background: linear-gradient(to bottom right, blue, green);
background: -webkit-linear-gradient(left top, blue, green);
background: -o-linear-gradient(bottom right, blue, green);
background: -moz-linear-gradient(bottom right, blue, green);
}
Ayrıca gradyan yönü açı verilerek de belirtilebilir:
background: linear-gradient(-90deg, red, yellow);
İkiden daha fazla renk kullanarak gradyan elde etmek için yapılması gereken tek şey renkleri ard arda virgül ile ayırarak yazmaktır.
background: linear-gradient( to right, red, orange, yellow, green, blue, indigo);
Dairesel (Radial) Gradyan Oluşturma
Linear-gradient yerine radial-gradient özelliği kullanılarak dairesel gradyan elde edilebilir.
#kutu1 {
background-color: blue;
background: radial-gradient(blue, green, blue);
background: -webkit-radial-gradient(blue, green, blue);
background: -o-radial-gradient(blue, green, blue);
background: -moz-radial-gradient(blue, green, blue);
}
Hangi rengin ne kadar kullanılacağını belirleyerek radial gradyan oluşturma:
#kutu1 {
background: red;
background: -webkit-radial-gradient(red 5%, green15%, blue 60%);
background: -o-radial-gradient(red 5%, green15%, blue 60%);
background: -moz-radial-gradient(red 5%, green15%, blue 60%);
background: radial-gradient(red 5%, green15%, blue 60%);
}
Radial gradyan uygulanan nesnenin genişlik ve yükseklik oranına bağlı olarak gradyanın şekli genelde elips olacaktır. Eğer her şartta daire şeklinde gradyan elde etmek istiyorsak circle özelliğini kullanabiliriz.
background: radial-gradient( circle, red 5%, green15%, blue 60%);
css gradyan oluşturma, css gradient kullanımı, css3 gradient tutorials, css arkaplan rengi iki renk arasında geçiş sağlama
KONU İLE İLGİLİ ÖRNEKLER
|
CSS Dairesel-Radial Gradyan Oluşturma Örneği
|
Kendin Dene
|
|
CSS Çapraz-Diagonal Gradyan Oluşturma Örneği
|
Kendin Dene
|
|
CSS Soldan Sağa Doğru Gradyan Oluşturma Örneği
|
Kendin Dene
|
11929 kez okundu.