CSS Podcast - 021: Gradyanlar
Oluşturacağınız bir siteniz olduğunu ve en üstte başlık, özet ve düğme bulunan bir giriş olduğunu düşünün. Tasarımcı, bu giriş için arka planı mor olan bir tasarımı teslim etti. Tek sorun, arka planın gradyan olarak iki mor tonuna sahip olmasıdır. Bunu nasıl yapabilirsiniz?
Başlangıçta bunun için tasarım aracınızdan bir resmi dışa aktarmanız gerektiğini düşünebilirsiniz, ancak bunun yerine bir linear-gradient kullanabilirsiniz.
Gradyan bir resimdir ve resimlerin kullanılabileceği her yerde kullanılabilir. Ancak CSS ile oluşturulur ve renkler, sayılar ve açılardan oluşur. CSS renk geçişleri, birden fazla renk geçişini karıştırıp tekrarlayarak iki renk arasındaki yumuşak geçişten etkileyici çizimlere kadar her şeyi oluşturmanıza olanak tanır.
Çizgisel renk geçişi
linear-gradient() işlevi, aşamalı olarak iki veya daha fazla renkten oluşan bir görüntü oluşturur.
Birden fazla bağımsız değişken alır ancak en basit yapılandırmasında, bunun gibi birkaç renk iletebilirsiniz. Bu renkler, karıştırılırken otomatik olarak eşit bir şekilde bölünecektir.
.my-element {
background: linear-gradient(black, white);
}
Ayrıca, bir açıyı temsil eden bir açı veya anahtar kelimeler de geçirebilirsiniz.
Anahtar kelimeleri kullanmayı tercih ederseniz to anahtar kelimesinden sonra bir yön belirtin.
Yani, soldan (siyah) sağa (beyaz) doğru ilerleyen, siyah beyaz bir renk geçişi istiyorsanız ilk bağımsız değişken olarak açıyı to right olarak belirtirsiniz.
.my-element {
background: linear-gradient(to right, black, white);
}
Bir rengin durduğu ve komşularıyla karıştığı durumlarda tanımlanan renk durdurma değeri. Koyu kırmızı tonundan 45 derecelik bir açıyla başlayan bir renk geçişi için renk geçişi boyutunun% 30'u daha açık kırmızıya dönüşür: Renk geçişi şu şekildedir:
.my-element {
background: linear-gradient(45deg, darkred 30%, crimson);
}
linear-gradient() ile istediğiniz kadar renk ve renk noktası ekleyebilir ve her bir renk geçişini virgülle ayırarak birbirinin üzerine katman olarak yerleştirebilirsiniz.
Dairesel renk geçişi
Dairesel olarak yayılan bir renk geçişi oluşturmak için radial-gradient() işlevi bu konuda size yardımcı olur.
linear-gradient() ile benzerdir, 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 şeklinde seçer ve kutunun boyutuna bağlı olarak bir daire veya elips seçer.
.my-element {
background: radial-gradient(white, black);
}
Renk geçişinin konumu, anahtar kelimeler ve/veya sayı değerleri kullanılan background-position ile benzerdir.
Dairesel renk geçişinin boyutu, renk geçişinin bitiş şeklinin (daire veya elips) boyutunu belirler ve varsayılan olarak farthest-corner olur. Bu değer, kutunun merkeze olan en uzak köşesiyle tam olarak eşleştiği 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, kutunun ortasına en yakın kenarla buluşur.farthest-side,closest-sideözelliğinin tersini yapar.
linear-gradient öğesinde olduğu gibi, istediğiniz kadar renk noktası ekleyebilirsiniz.
Benzer şekilde, istediğiniz kadar radial-gradients ekleyebilirsiniz.
Konik gradyan
Konik renk geçişinin kutusunda merkez noktası vardır, yukarıdan başlar (varsayılan olarak) ve 360 derecelik bir daire içinde döner.
.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 (üstte merkezden başlar).
Açıyı 45deg olarak ayarlarsanız sağ üst köşe olur.
Açı bağımsız değişkeni, doğrusal ve dairesel renk geçişleri 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 kelime tabanlı olabilir veya sayısal değerlerle tanımlanabilir.
Diğer renk geçişi türlerinde olduğu gibi istediğiniz kadar renk noktası ekleyebilirsiniz. Konik gradyanlar sayesinde bu özellik, CSS ile pasta grafikler oluşturmak için iyi bir kullanım alanıdır.
Tekrar etme ve karıştırma
Her renk geçişi türünün tekrarlanan bir türü de vardır.
repeating-linear-gradient(), repeating-radial-gradient() ve repeating-conic-gradient().
Tekrarlanmayan işlevlere benzerler ve aynı bağımsız değişkenleri alırlar.
Aradaki fark, tanımlanan renk geçişinin, her iki boyutuna da bağlı olarak kutuyu doldurmak için tekrarlanabilmesidir.
Renk geçişiniz tekrarlanmıyorsa,
muhtemelen renk duraklarından biri için uzunluk ayarlamamışsınızdır.
Örneğin, renk durdurma uzunluklarını ayarlayarak repeating-linear-gradient içeren çizgili bir arka plan oluşturabilirsiniz.
.my-element {
background: repeating-linear-gradient(
45deg,
red,
red 30px,
white 30px,
white 60px
);
}
Ayrıca, arka plan resminde olduğu gibi renk geçişi işlevlerini background özelliklerinde karıştırabilir ve istediğiniz sayıda renk geçişi tanımlayabilirsiniz.
Örneğin, birden çok doğrusal renk geçişini veya dairesel renk geçişiyle 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 kılavuzu
- Gradyan oluşturucu
Öğrendiklerinizi sınayın
Gradyan bilginizi test edin
Renk geçişi oluşturmak için gereken minimum renk sayısı nedir?
Öğelerin arka planında birden fazla renk geçişi olabilir mi?
background-image özelliği, çok sayıda renk geçişine izin verir. Renk geçişlerini virgülle ayırmanız yeterlidir.