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çı

Sıradaki ders: Renk durakları

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler