Renk geçişi

The CSS Podcast - 021: Gradyanlar

Oluşturacağınız bir site olduğunu ve sitenin üst kısmında başlık, özet ve bir düğme içeren bir giriş olduğunu varsayalım. Tasarımcı, bu giriş için mor arka planlı bir tasarım sundu. Tek sorun, arka planda gradyan olarak iki mor tonu kullanılması. Bunu nasıl yapabilirsiniz?

İlk başta bunun için tasarım aracınızdan bir resim dışa aktarmanız gerektiğini düşünebilirsiniz ancak bunun yerine linear-gradient kullanabilirsiniz.

Renk geçişi bir resimdir ve resimlerin kullanılabildiği her yerde kullanılabilir. Ancak CSS ile oluşturulur ve renk, sayı ve açılardan oluşur. CSS renk geçişleri, birden fazla renk geçişini karıştırıp tekrarlayarak iki renk arasında yumuşak bir renk geçişinden etkileyici posterlere kadar her şeyi oluşturmanıza olanak tanır.

Çizgisel renk geçişi

linear-gradient() işlevi, iki veya daha fazla renkten oluşan bir resim oluşturur. Birden fazla bağımsız değişken alır ancak en basit yapılandırmasında bazı renkleri bu şekilde iletebilirsiniz. Bu durumda, renkleri otomatik olarak eşit şekilde bölerek harmanlanır.

.my-element {
    background: linear-gradient(black, white);
}

Bir açıyı veya açıyı temsil eden anahtar kelimeleri de iletebilirsiniz. Anahtar kelime kullanmayı tercih ederseniz to anahtar kelimesinden sonra bir yön belirtin. Yani soldan (siyah) sağa (beyaz) doğru giden siyah beyaz bir degrade 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 bittiği ve komşularıyla karıştığı yerde tanımlanan renk durak noktası değeri. 45 derecelik bir açıyla koyu kırmızı bir tonla başlayan ve degradenin% 30'unda daha açık kırmızıya dönüşen bir degrade şöyle görünür:

.my-element {
    background: linear-gradient(45deg, darkred 30%, crimson);
}

Bir linear-gradient() içine istediğiniz kadar renk ve renk durağı ekleyebilir, ayrıca her bir renk geçişini virgülle ayırarak renk geçişlerini üst üste yerleştirebilirsiniz.

Dairesel renk geçişi

Dairesel bir şekilde yayılan bir degrade oluşturmak için radial-gradient() işlevi devreye girer. linear-gradient() ile benzerdir ancak açı belirtmek yerine isteğe bağlı olarak bir konum ve bitiş şekli belirtirsiniz. Yalnızca renkleri belirtirseniz radial-gradient(), konumu center olarak otomatik olarak seçer ve kutunun boyutuna bağlı olarak bir daire veya elips seçer.

.my-element {
    background: radial-gradient(white, black);
}

Gradyan'ın konumu, anahtar kelimeler ve/veya sayı değerlerini kullanan background-position'e benzer. Dairesel gradyanın boyutu, gradyanın bitiş şeklinin (daire veya elips) boyutunu belirler ve varsayılan olarak farthest-corner olur. Bu, gradyanın kutunun merkezden en uzak köşesine tam olarak ulaştığı anlamına gelir. Aşağıdaki anahtar kelimeleri de kullanabilirsiniz:

• closest-corner, degradenin merkezine en yakın köşeyi bulur.
• closest-side, kutunun degradenin merkezine en yakın tarafına denk gelir.
• farthest-side, closest-side'in tam tersini yapar.

linear-gradient ile olduğu gibi istediğiniz kadar renk durak ekleyebilirsiniz. Benzer şekilde, istediğiniz kadar radial-gradients de ekleyebilirsiniz.

Konik gradyan

Konik renk geçişi, kutunuzda bir merkez noktasına sahiptir ve varsayılan olarak üstten başlayıp 360 derecelik bir daire çizer.

.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 üstte, ortada başlar. Açıyı 45deg olarak ayarlarsanız sağ üst köşe olur. Açı bağımsız değişkeni, doğrusal ve radyal gradyanlar gibi her türlü açı değerini kabul eder.

Konum varsayılan olarak ortadadır. Radyal ve doğrusal gradyanlarda olduğu gibi, yerleşim anahtar kelimeye dayalı olabilir veya sayısal değerlerle tanımlanabilir.

Diğer renk geçişi türlerinde olduğu gibi istediğiniz kadar renk durağı ekleyebilirsiniz. Konik degradeler içeren bu özelliğin iyi bir kullanım alanı, pasta grafikleri CSS ile oluşturmaktır.

Tekrarlama ve karıştırma

Her degrade türünün tekrarlanan bir türü de vardır. Bunlar: 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şi kutuyu doldurmak için tekrarlanabiliyorsa her iki boyuta göre tekrarlanmasıdır.

Gradyanınız tekrarlanmıyorsa büyük olasılıkla renk duraklarından biri için bir uzunluk ayarlamadınız demektir. Örneğin, renk durak noktalarının uzunluklarını ayarlayarak repeating-linear-gradient ile çizgili bir arka plan oluşturabilirsiniz.

.my-element {
  background: repeating-linear-gradient(
    45deg,
    red,
    red 30px,
    white 30px,
    white 60px
  );
}

background mülklerinde degrade işlevlerini karıştırabilir ve arka plan resminde olduğu gibi istediğiniz kadar degrade tanımlayabilirsiniz. Örneğin, birden fazla doğrusal degradeyi veya iki doğrusal degradeyi radyal degradeyle birlikte kullanabilirsiniz.

Aralıklarla işleme ve renk uzayları

Her degrade türü, renk alanları ve in anahtar kelimesini kullanarak renkler arasında farklı şekillerde kesme noktaları belirleyebilir. Bu seçenek, bir gradyanda iki renk durak noktası arasındaki sonuçları özelleştirmenizi sağlar.

Örneğin, genel olarak doymamış orta renkleri kaldırmak ve daha güvenli ve canlı bir degrade elde etmek için oklab renk alanını kullanabilirsiniz.

.my-element {
  background: linear-gradient(in oklch, deeppink, yellow);
}

Aşağıdaki demo, aynı degradeyi özelleştirilmiş ara değerlerle ve ara değerler olmadan karşılaştırmanıza olanak tanır. Renk alanlarını değiştirerek aralarındaki farkları görebilir veya renkleri değiştirerek aralıklı eklemenin degradeyi nasıl etkilediğini görebilirsiniz.

Silindirik renk alanları (HSL, HWB, LCH ve OKLCH), enterpolasyonu özelleştirmenin yanı sıra gradyan çizgisinin renk tekerleğinde uzun yolu mu yoksa iki renk arasındaki kısa yolu mu kullanacağını belirtmek için shorter (varsayılan) veya longer anahtar kelimelerini sunar.

.my-element {
  background: linear-gradient(in oklch longer hue, deeppink, yellow);
}

Kaynaklar

• MDN'nin gradyanlarla ilgili kılavuzu
• Gradyan oluşturucu
• Conic.css: Konik gradyanlardan oluşan kullanışlı bir koleksiyon

Öğrendiklerinizi test etme

Gradyanlarla ilgili bilginizi test edin