Konik gradyan
conic-gradient() ile açısal gradyanları öğrenirsin.
Konik gradyan nedir?
Konik gradyan, bir merkez nokta etrafında dönen bir açı boyunca renk geçişi yapar. conic-gradient() işleviyle yazılır. conic-gradient(red, yellow, red) ortadan başlayıp 360 derece boyunca kırmızı-sarı-kırmızı döner.
En bilinen kullanımı bir renk çemberidir: gökkuşağı duraklarını eşit aralıklarla verirsen tekerlek gibi bir görüntü elde edersin. Pasta dilimleri ve saat ibreleri için de uygundur.
Konik gradyanda renk durakları
Konik gradyanda her renk durağı merkezin etrafında bir açı konumundadır. Varsayılan olarak duraklar 360 dereceye eşit bölünür: üç renk verdiysen her biri 120 derece aralıklıdır.
Konumu açıkça yazmak istersen red 0deg, yellow 120deg gibi açı değerleri verebilirsin. Bu, her dilimin tam olarak nerede başlayıp bittiğini denetlemeni sağlar.
Uygulama Renk çemberi arka planı yap
.wheel seçicisi için bir arka plan tanımla. Değer conic-gradient() işlevi olsun; altı renk durağı ver: red, orange, yellow, green, blue, violet. Hepsi virgülle ayrılmış ve parantez içinde olmalı. Yalnızca background özelliğini kullan.
Örnek çözümü göster
/* renk çemberi arka planı */
.wheel {
background: conic-gradient(red, orange, yellow, green, blue, violet);
}Kendini test et
-
conic-gradient() başlangıç açısını ne ile belirtirsin?
background: conic-gradient(____, red, yellow);- to top
- from 45deg
- circle at center
- starting 45deg
Cevabı göster
from 45deg — Doğru. conic-gradient() başlangıç açısını from anahtar sözcüğüyle alır.
-
Konik gradyanı from açısıyla yaz
background: conic-gradient(____, red, yellow, red);Cevabı göster
background: conic-gradient(from 0deg, red, yellow, red); -
Gradyan işlevini geçiş biçimine eşle
- linear-gradient
- Bir doğru boyunca
- radial-gradient
- Merkezden dışa
- conic-gradient
- Merkez çevresinde açı