CSS3 ile gradient renkler

 

CSS3 Gradient(degrade-renk geçişi) Kullanımı

Belirtilen iki veya daha fazla renk arasında yumuşak bir renk geçişi yapmayı sağlar.

CSS üç tip degradeyi tanımlar:

• Doğrusal Degradeler ( aşağı / yukarı / sol / sağ / çapraz olarak )
• Radyal Degradeler
• Konik Degrade ( bir merkez noktası etrafında döndürülmüş )

Kullanımı: background-image:linear-gradient(yön, renk1, renk2, ...);

Örnek: background-image: linear-gradient(#5155A6, #66B1F2, #F2C49B);

Doğrusal gradient  Yukarıdan Aşağıya (bu varsayılandır)(yön:to bottom)

Örnek: background-image: linear-gradient(red, yellow);

Soldan Sağa:     background-image: linear-gradient(to right, red , yellow);

sağdan sola:      background-image: linear-gradient(to left, red , yellow);

yukarıya doğru:  background-image: linear-gradient(to top, red , yellow);

Doğrusal Gradient – Çapraz:

background-image: linear-gradient(to bottom right, red, yellow);

Keskin renk ayrımlı gradient örneği:

linear-gradient(to right, red 20%, orange 20% 40%, yellow 40% 60%, DarkCyan 60% 80%, blue 80%);

Ekran görüntüsü:

 

Radyal Gradient

Örnek: background: radial-gradient(#F2A428, #F2E527, #3A90DE);

Konik Degrade:

Örnek: background-image: conic-gradient(red, yellow, green);

 deneyiniz!