CSS 3 Renk geçişleri (*) ile alakalı olan yazıyı, oldukça ilgi ile okuyan ve bunu mailleri ile cevaplayn çok sayıda takipçiye istinaden, bu makalede, gene aynı mantık ve yerleşimlere dayanarak ; geliştirebileceğiniz, stripped yani tekrarlanan çizgilerle oluşturulan zemin renkleri ve arkaplanlar üzerine uygulamalı bir kaç örnekle durumun nasıl kullanımı olacağını özetlemeye çalıştım.

Özellikle CSS3 ile geliştirilen projelerin artık eskiye / diğer grafiklerin yüklü olduğu çalışmalara nazaran daha moderne ve hafif olduğunu biliyoruz, ve bu çalışmaların daha esnek daha çözümsel kalıtsallığı da beraberinde getirdiği kanısınıda eklersek daha lezetli çalışmalara sahip olduğumuzu söyleyememek içten bile değil.

Örnekler ve tanımlamaları ile tekrarlanan çizgilerin nasıl kullanılacağını gelin birlikte görüp yorumlayalım. Keyifli uygulama ve okumalar.

Normal olarak çapraz tekrarlanan renk geçişleri (çizgiler) kullanımı
Çizgilerin oluşturulması ve bunların kaynaştırılması için iki farklı renk kodu kullanıp bunları tüm demolar için aynı şekilde kullanacğız. Öncelikle iki farklı renk kodu olarak Windows 8 renk kodlarının ; #5133AB ve #F3B200 hex değerlerine shaip olanlarını seçtim ben siz de kendinize göre istediğinzi gibi renklendirebilirsiniz.



Resme binayen var olan değerlerin kullanılış mantıkları şu şekilde ;

1 numaralı değer, açının geliş noktası, altta stillendireceğimiz ve tanımlayacağımız objenin alacağı rakamsal açı eğim derecesini ifade ediyor. Öyleki en alt sol kısımdan başlayan halini görebiliyorsunuz (Köşeden çıkan kırmızı doğru.)
2 numaralı kısım ise, iki farklı rengin toplam genişliğinin oluşturduğu rakamsal değeri yazmamızı gerektiren parametre alanı.
3 numaralı kısım ise, tek bir çizgisel alanın alacağı genişlik değeri.
Kodlar ile bu durumu şu şekilde oluşturabiliyoruz.

	.d1 {
		background: repeating-linear-gradient(
		  45deg, /* Açı */
		  #5133AB, /* Genel arkaplan rengi*/
		  #5133AB 20px, /* İlk renk çizgi genişliği */
		  #F3B200 20px, /* İkinci renk çizgi genişliği */
		  #F3B200 40px /* Toplam çizgilerin genişlik değeri ve diğer rengin üst zemin durumu */
		);
	}

Önce açı değerimiz, sonra genel arkaplan rengi, ilk çizgi genişlik ve rengi, ikinci çizgi genişlik ve rengi ardından da üstte kalacak renk ve toplam genişlik rengi değerlerini işliyoruz. Mantık bu. Diğer çoğaltacağımız örnekler ile de aynı mantıkta gradient ve (renk geçişleri) çizgilerin kullanımını göreceksiniz.

Gradient (Renk geçişi) ve çizgilerin kullanımı.
Linear gradient ile, beyaz zemin arkasında, çok açık gri ve kırmızının kalmasını sağlayıp, çizgilerimizi şu şekilde belirten bir örnek oluşturdum.

.d2 {
	  background: repeating-linear-gradient(120deg, transparent, transparent 10px, #fff 10px, #fff 20px), -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#dd0000));
	  background: -webkit-repeating-linear-gradient(120deg, transparent, transparent 10px, #fff 10px, #fff 20px), -webkit-linear-gradient(top, #f2f2f2, #dd0000);
	  background: repeating-linear-gradient(120deg, transparent, transparent 10px, #fff 10px, #fff 20px), linear-gradient(to bottom, #f2f2f2, #dd0000);
}

Burada dikkat eidlmesi gereken nokta, linear-gradient özelliğinin önüne repeating suffix (ön eki) i getirmiş olmamız.Hatırlarsanız bir önceki CSS 3 makalesinde bundan bahsetmiştik. Yine üste gradient almak yerine, background resmi belli olan bir imajı alıp arkada çizgileri bu şekilde de saydırabilirsiniz. Ve bu örnekte açı değerini 100′den büyük yapıp ters yönde açılamış olduk. Diğer yönlere de eğim kazandırıp, çizgilerin farklı koordinatlara doğru tekrarlanmasını sağladık.

Mantık olarak gene açı değerlerini 90 vb gibi değiştirdiğinizde de, düşey yatay çizgi tekrarlarını da oluşturabilirsiniz. Bu durumla alakalı sizin yaratıcılığınızın paralel olduğu kanısındayım.

Radyal çizgiler
Tekrarlanan çizgileri radyal gradient ile de kullanmak oldukça keyif verici.

.d3 {
	  background: -webkit-repeating-radial-gradient(circle, red, red 30px, white 30px, white 60px);
	  background: repeating-radial-gradient(circle, red, red 30px, white 30px, white 60px);
}

Kaynak kodlarını gördüğünüz bu çalışmaların tamamı için ; bu adrese bakabilirsiniz. Kaynak dosyaları indirip, üzerinde oynamalarda yapabilirsiniz.

Faydalı olması dileği ile…

İndirmek için tıklayınız.

Kaynak : http://www.fatihtoprak.com/css3-ile-...ipucu-168.html