CSS ile Spiral ve Çizgisel Arkaplan

Birçok tarayıcı tarafından desteklenmeye başlayan radial ve linear repeating-gradient (tekrarlanan spiral ve çizgisel arkaplan) tanımlaması sayesinde görsel formattaki çizgisel planları 1 satır CSS koduyla yapabiliyoruz.

CSS3 ile gelen geliştirilmiş gradient desteği, bu işlemi PNG ve GIF görseller generate ederek yapan birçok web girişimini de tarihin tozlu sayfalarına işledi.

CSS ile çizgisel (şerit) arkaplan nasıl yapılır?

Klasik bir background tanımı yaptıktan sonra çizgisel arkaplanımızı ekliyoruz.

background:repeating-özellik-gradient:data1, data2, data3, data4

• Özellik : Radial ve linear şekilde tanımlanabilir.
• Data 1 : Çizgisel arkaplanımız hangi renkle başlayacak?
• Data 2 : Data 1’in dönüşeceği renk ve konum.
• Data 3 : Çizgisel arkaplan için ikincil bir gradient.
• Data 4 : Data 3’ün dönüşeceği renk ve konum.

Örneklerle repeating-gradient

İki adet temel örnek hazırlayalım.

Temel Örnekler

Çizgisel Arkaplan

.cizgisel{
  background:repeating-linear-gradient(-45deg, gray, gray 5px, white 5px, white 10px);
}

Üstteki kodu kullanarak 45 derece yatık halde, gri renkte başlayıp 5. pikselde gri olarak son bulan, sonrasında da beyaz ile devam edip 10. pikselde beyaz ile biten bir çizgisel arkaplan oluşturuyoruz.

Sonuç

Dairesel Arkaplan

.spiral{
  background:repeating-radial-gradient(gray,gray 5px,white 5px,white 10px);
}

Üstteki kodu kullanarak gri renkte başlayan ve 5px sonra gri renkte biten, sonrasında da 5. pikselde beyaz başlayıp 10. pikselde beyaz biten bir dairesel çizim yapıyoruz.

Sonuç

Gelişmiş Örnekler

Şimdi de CSS Tricks üzerinde Chris Coyier tarafından hazırlanmış örneklerle devam edelim.

Diagonal Çizgiler

Resim Üstü Çizgiler

Herhangi Yön ve Açıyla

Dikey Çizgiler

Oval Çizgiler

Süreç Göstergeleri

Tarayıcı Desteği

Tüm tarayıcıların %89.17’sinde çalışan bu tanımlama IE tarafında desteği 10’da buluyor. IE9+, Firefox 30+, Chrome 31+, Safari 6+ ve Opera 27+ bu tanımlamayı kullanabileceğiniz tarayıcılar. Detaylar için buraya bakabilirsiniz.