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 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?

Başlık, paragraf ve bağlantı içeren koyudan açık mora geçişli bir arka plan.

İ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, bir 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, bir veya daha fazla rengi bu şekilde iletebilirsiniz. Bu durumda, renkleri otomatik olarak eşit şekilde bölüp karıştırır.

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

Renk geçişi işlevlerinde yalnızca bir renk kullanılması geçerli bir CSS olsa da bu, yalnızca düz bir renk oluşturur:

.my-element {
    background: linear-gradient(red);
}

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 şu şekilde 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 konumu, anahtar kelimeler ve/veya sayı değerlerini kullanan background-position ile benzerdir. Dairesel gradyanın boyutu, gradyanın bitiş şeklinin (daire veya elips) boyutunu belirler ve varsayılan olarak farthest-corner olur. Bu, gradyanın kutunun merkeze 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 degradelerin kullanıldığı 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ıklandırma 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ştirmenize olanak tanır.

Örneğin, daha güvenli ve canlı bir degrade oluşturmak için genellikle doymamış orta renkleri kaldırmak üzere 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, hatta renkleri değiştirerek enterpolasyonun degradeyi nasıl etkilediğini görebilirsiniz.

Ayrıca, gradyan bir renkten diğerine geçerken ton açısının ilerleme yönünü kontrol etmek için silindirik renk alanlarıyla increasing veya decreasing anahtar kelimelerini de kullanabilirsiniz. Açı, daha uzun veya daha kısa olmasına bakılmaksızın her zaman seçilen anahtar kelimenin yönünde hareket eder.

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

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

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

Öğrendiklerinizi test etme

Gradyanlarla ilgili bilginizi test edin

Gradyan oluşturmak için gereken minimum renk sayısı nedir?

1
Doğru!
2
Tekrar deneyin.
3
Tekrar deneyin.
4
Tekrar deneyin.

Öğelerin arka planında birden fazla degrade olabilir mi?

Doğru
background-image mülkü birçok degradeye izin verir. Bunları virgülle ayırmanız yeterlidir.
Yanlış
Evet, yapabilirler.