#çizgisel

[causeofitself]

Untitled

watercolours on paper

35x18cm

2014

[adobewordpress]

New Post has been published on adobewordpress ~ güncel tasarım okulu

New Post has been published on http://www.adobewordpress.com/css-ile-spiral-ve-cizgisel-arkaplan

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.

×Kapat Aşağıdaki örneklerin kodlarını CSS ve HTML tabları arasında geçiş yaparak görüntüleyebilirsiniz.

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.