CSS3 ile Zigzag şeklinde kenarlıklar oluşturma

Web tasarımda kullanılan kenarlıklar küçük ayrıntılardır ama yeri geldiğinde iyi kullanılırsa çok iyi sonuçlar elde edilebilir. Bunlardan örnek vermek gerekirse, Twitter’ın giriş sayfasındaki giriş alanlarına bakın. Kenarlık ne fazla belirgin ne de çok solgun ama hoş bir etki yaratıyor. İşte bu kenarlık tiplerinden birisi de zigzaglı kenarlık. Örneğini aşağıya inerek alt kısımda göreceğiniz şekilde zigzaglı kenarlık yapmak şu ana kadar CSS’yle mümkün değil gibi gözükse de CSS3′le mümkün. Bunu yapabilmek için gradientlerden yararlanıyoruz. Bir kare oluşturup 45 derece döndürürsek bir üçgen elde edebilir (kareyi ikiye katlayın).

Yukarıdan aşağıya zigzag kenarlık yapmak istiyorsanız şöyle bir class oluşturup kullanmanız gerekiyor.

.h-zigzag { /* Horizontal */
    background:
        linear-gradient(-135deg, #333538 5px, transparent 0) 0 5px,
        linear-gradient(135deg, #333538 5px, #fff 0) 0 5px;
    background-color: #333538;
    background-position: left bottom;
    background-repeat: repeat-x;
    background-size: 10px 10px;
}

Yatay olarak zigzaglı kenarlık yapmanız için gerekense şöyle bir class oluşturmak ve aynı şekilde onu da kullanmak.

.v-zigzag { /* Vertical */
    background:
        linear-gradient(45deg, #ec173a 5px, transparent 0) 0 5px,
        linear-gradient(135deg, #ec173a 5px, #fff 0) 0 5px;
        background-color: #ec173a;
        background-position: right top;
        background-repeat: repeat-y;
        background-size: 10px 10px;
}

Örneğini vereceğim blogta görebilirsiniz. Böylece hem resim kullanımını azaltıp sayfa yüklenme sürenizi kısaltırsınız, hem de sprite dosyası oluşturmanıza gerek kalmaz.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir