CSS Podcast'i - 021: Gradyans
'nı inceleyin.
Oluşturmak istediğiniz bir siteniz olduğunu düşünün ve en üstte başlık, özet ve düğme içeren bir giriş var. Tasarımcı, bu girişin arka planı mor olan bir tasarımı teslim etti. Tek sorun, arka planın renk geçişi olarak iki mor tonu içermesidir. Bunu nasıl yapabilirsiniz?
Başlangıçta bunun için tasarım aracınızdan bir resim dışa aktarmanız gerektiğini düşünebilirsiniz.
fakat örneğin,
linear-gradient
.
Gradyan bir resimdir ve görsellerin olduğu her yerde kullanılabilir. ancak CSS ile ve renkler, sayılar ve açılardan oluşuyor. CSS gradyanları, iki renk arasında akıcı bir renk geçişinden istediğiniz şeyi oluşturmanıza olanak tanır: renk geçişlerini karıştırıp tekrarlayarak etkileyici sanat eserlerine ev sahipliği yapıyor.
Çizgisel renk geçişi
linear-gradient()
işlevi, ardışık olarak iki veya daha fazla renkte bir resim oluşturur.
Birden fazla bağımsız değişken gerekir ancak en basit yapılandırmada
bunun gibi bazı renkler aktarabilirsiniz. Bu işlem, renkleri otomatik olarak eşit bir şekilde böler.
.my-element {
background: linear-gradient(black, white);
}
Açıyı veya açısı temsil eden anahtar kelimeleri de iletebilirsiniz.
Anahtar kelimeleri kullanmayı tercih ederseniz to
anahtar kelimesinden sonra bir yön belirtin.
Bu, siyah beyaz bir gradyan istiyorsanız
soldan (siyah) sağa (beyaz) doğru,
açıyı ilk bağımsız değişken olarak to right
olarak belirtirsiniz.
.my-element {
background: linear-gradient(to right, black, white);
}
Bir rengin durduğu ve komşularıyla karıştığı noktada tanımlanan renk durdurma değeri. Koyu kırmızı tonla başlayan ve 45 derece açıyla ilerleyen bir gradyan için daha açık kırmızıya dönüştüğünü görebilirsiniz: Şu şekilde görünür.
.my-element {
background: linear-gradient(45deg, darkred 30%, crimson);
}
linear-gradient()
bir reklam aracından istediğiniz kadar renk ve renk noktası ekleyebilirsiniz.
ve her bir renk geçişini virgülle ayırarak renk geçişlerini birbirinin üzerine
katabilirsiniz.
Dairesel renk geçişi
Dairesel bir şekilde yayan bir gradyan oluşturmak için
radial-gradient()
adımları uygulayın.
linear-gradient()
ile benzer,
ancak açı belirtmek yerine isteğe bağlı olarak bir konum ve bitiş şekli belirtebilirsiniz.
Yalnızca renkleri belirtirseniz radial-gradient()
, konumu otomatik olarak center
olarak seçer.
ve kutunun boyutuna bağlı olarak bir daire ya da elips seçin.
.my-element {
background: radial-gradient(white, black);
}
Renk geçişinin konumu, anahtar kelimeler ve/veya sayı değerleri kullanılarak background-position
konumuna benzer.
Dairesel renk geçişinin boyutu, renk geçişinin bitiş şeklinin boyutunu belirler
(daire veya elips) gösterilecek ve varsayılan olarak farthest-corner
olacaktır.
Bu, kutunun merkezden en uzak köşesiyle tam olarak buluşacağı anlamına gelir.
Aşağıdaki anahtar kelimeleri de kullanabilirsiniz:
closest-corner
, renk geçişinin merkezine en yakın köşeyle buluşur.closest-side
, renk geçişinin merkezine en yakın olan kutunun kenarıyla buluşur.farthest-side
,closest-side
ile tam tersini yapar.
Tıpkı linear-gradient
olduğu gibi, istediğiniz kadar renk noktası ekleyebilirsiniz.
Aynı şekilde, dilediğiniz kadar radial-gradients
da ekleyebilirsiniz.
Konik gradyanı
Konik renk geçişinin kutunuzda bir merkez noktası vardır ve yukarıdan başlar (varsayılan olarak), ve 360 derecelik bir daire çiziyor.
.my-element {
background: conic-gradient(white, black);
}
conic-gradient()
işlevi, konum ve açı bağımsız değişkenlerini kabul eder.
Varsayılan olarak açı 0 derecedir ve yukarıda, merkezde başlar.
Açıyı 45deg
olarak ayarlarsanız bu açı sağ üst köşe olur.
Açı bağımsız değişkeni, doğrusal ve dairesel gradyanlar gibi her tür açı değerini kabul eder.
Konum, varsayılan olarak ortadadır. Dairesel ve doğrusal renk geçişlerinde olduğu gibi, Konumlandırma anahtar kelimeye dayalı, veya sayısal değerlerle tanımlanabilir.
Diğer gradyan türlerinde olduğu gibi istediğiniz kadar renk noktası ekleyebilirsiniz. Bu özellik için iyi bir kullanım örneği, konik gradyanlarla pasta grafikleri CSS ile oluşturmaktır.
Tekrarlıyor ve karıştırıyor
Her bir gradyan türünün de yinelenen bir türü vardır.
Bunlar:
repeating-linear-gradient()
repeating-radial-gradient()
ve
repeating-conic-gradient()
.
Yinelenmeyen işlevlere benzerler ve aynı bağımsız değişkenleri alırlar.
Aradaki fark şudur: Tanımlanan renk geçişi kutuyu doldurmak için tekrarlanabilirse
uyumlu bir şekilde çalışır.
Gradyan tekrarlanmıyorsa
muhtemelen renk duraklarından biri için uzunluk ayarlamamışsınızdır.
Örneğin,
renk noktası uzunluklarını ayarlayarak repeating-linear-gradient
özelliğine sahip çizgili bir arka plan oluşturabilirsiniz.
.my-element {
background: repeating-linear-gradient(
45deg,
red,
red 30px,
white 30px,
white 60px
);
}
Gradyan fonksiyonlarını background
özelliklerinde de
Ayrıca, istediğiniz sayıda renk geçişini
her zaman olduğu gibi kullanabilirsiniz.
Örneğin, birden fazla doğrusal renk geçişini veya dairesel bir renk geçişine sahip iki doğrusal renk geçişini birlikte kullanabilirsiniz.
Kaynaklar
- Conic.css - konik gradyanların yararlı bir koleksiyonu
- Renk geçişleri için MDN rehberi
- Gradyan oluşturucu
Öğrendiklerinizi sınayın
Gradyanlarla ilgili bilginizi test edin
Gradyan oluşturmak için gereken minimum renk sayısı nedir?
Öğelerin arka planı olarak birden fazla gradyan olabilir mi?