CSS ile Degradeli Zemin Nasıl Yapılır?

Web tasarımın görsel stilini belirleyen CSS zaman içerisindeki gelişimini sürekli arttırıyor. CSS, CSS2 derken HTML5 ile hayatımıza giren CSS3 birçok görsel efekti web tasarımı kısmında bizlere kodlar vasıtasıyla sunuyor. Hal böyle olunca daha çabuk açılan ve daha rafine web tasarımı çalışmaları karşımıza çıkıyor.

Eski CSS sürümlerinde kullanmaya alışık olduğumuz renk geçişi arkaplan görselinin resim olarak kaydedilmesi de artık tarih oluyor. Degrade renk verilerek elde edilen renk geçişlerini artık CSS3’te kod ile yapmak mümkün. Gradient olarak da adlanrırılan bu renk geçişi efektini 2 satır kod ile yapılacak olması CSS’in geldiği noktayı gözler önüne seriyor.

CSS ile Gradient Arkaplan Nasıl Oluşturulur?

Aşağıdaki kod satırıyla CSS3’te degredeli zemin yapmak mümkün. Örnekteki gradient linear olarak verilmiştir. Dilerseniz radial(oval) olarak uygulama da yapılabilir.

[css]

background:-webkit-gradient(linear, 76% 26%, 10% 21%, from(#866400), to(#FFD500))

[/css]

Yukarıdaki kod satırı ile Linear olarak #866400 dan #FFD500 rengine renk geçişi yapılmıştır. Bu hex renk kodlarını ve renk geçiş açı ve şekillerini tasarımınıza göre düzenlemeniz mümkündür.