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ç

linear-gradient


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ç

spiral-gradient

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.

Bu da ilginizi çekebilir  CSS ile Duyarlı Altı Çizgili Yazı