CSS3 Resmi Kenarlık Olarak Kullanma - Border Image

Css Border-Image Özelliği

Elimizdeki bir resmi, html elemanlarına kenarlık olarak kullanmak CSS3 ile mümkün.

Bunun için border-image özelliği kullanılmaktadır. Tarayıcıların eski versiyonları içinse -webkit- ve -moz- ön ekleri kullanılmalıdır.

Ayrıca border özelliği kullanılarak border-style ve border-width değerleri belirtilmelidir. Bunu yapmazsak border-style özelliği varsayılan olarak none olduğundan resimli kenarlığımız görünmez.

Border-image özelliği şu şekilde kullanılır:

Yukarıdaki örnekte görüldüğü gibi 3 özelliğin belirtilmesi gerekmektedir. 

İlk olarak url parantezinde kullanılacak resmin yolu ve adı belirtilir. (border-image-source)

İkinci olarak bu resmin hangi boyutlarda parçalanarak köşelere ve kenarlara dağıtılacağı belirlenir. (border-image-slice)

Son olarak da round, repeat veya stretch değerlerinden biri ile köşeler arasındaki kenarlarda resmin nasıl gösterileceği belirlenir.(border-image-repeat)

Ayrıca ilk satırda border özelliği kullanılarak kenarlığın toplam genişliği belirtilmiştir.

Burada en önemli kısım ikinci parametreyi iyi ayarlayarak resmin nasıl parçalanacağını belirlemektir. Kullandığımız resim border-images özelliği ile 9 parçaya ayrılacak, ardından resmin parçalanan her köşe ve kenarı, html elemanının karşılık gelen köşe ve kenarlarına yerleştirilecektir.

Örneğin yıldızlardan oluşan bir kenarlık oluşturmayı deneyelim. Bunun için aşağıdaki gibi bir resim dosyası hazırlayabiliriz:

Bu resimdeki her yıldızı genişliği 40px olacak şekilde hazırladım. Border-image-slice değerini yani ikinci parametreyi de 40 olarak belirlediğim için resim şu şekilde parçalanacaktır:

Sonra da tüm parçalar karşılık gelen köşelere ve kenarlara yerleştirilerek kenarlık oluşturulacaktır.

Örneğin çalışan halini görmek ve daha iyi anlamak için konu örnekleri kısmındaki örnekleri inceleyiniz ve değerleri değiştirerek kendiniz deneyiniz.

KONU İLE İLGİLİ ÖRNEKLER