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:

border: 40px solid transparent;

border-image: url(resim.png) 40 round;

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.

css kenarlık resmi, resmi kenarlık olarak kullanma, border image kullanımı, resim ile kenarlık oluşturma, creating border using image css

KONU İLE İLGİLİ ÖRNEKLER

Border-image örnekleri Kendin Dene


YORUMLAR




4692  kez okundu.

Online Kullanıcı Sayısı 662