Renk geçişi

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