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 yapıyorsunuz?

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, 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 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 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 bir 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 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 ortasına 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 degradenin kutuyu doldurmak için tekrarlanabilmesi durumunda, 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.

Kaynaklar

Öğrendiklerinizi test etme

Gradyanlarla ilgili bilginizi test edin

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

1
Tekrar deneyin.
2
Aynı renkte ve düz görünebilirler ancak en az 2 renk gerekir.
3
Tekrar deneyin.
4
Tekrar deneyin.

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

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