Css Border Image Kullanımı

Merhaba Arkadaşlar,
Bu makalede Css’te border-image özelliği nedir, nasıl kullanabiliriz onu öğreneceğiz.border-image özelliği ile bir html etiketinin kenarlıklarına resim yerleştirebiliriz.Bu özelliği kullanırken sırasıyla şu değerleri verebiliyoruz;

      ► border-image-source : Kullanmak istediğimiz resmin url’ini veriyoruz.

      ► border-image-slice : Kullanmak istediğimiz resmin hangi boyutlarda parçalara ayrılacağını ve bu parçaların köşelere ve kenarlara nasıl yerleştirileceğini belirleriz. 

      ► border-image-repeat : Etiketin kenarlarına uygulanacak parçaların tekrarlanması veya uzatılması gibi durumları belirleriz.round, repeat veya stretch değerlerinden birini verebiliriz.

Örneklerimizde kenarlık olarak bu resmi kullanacağız.

css-dersleri-border-image-kullanimi

Border image’ın çalışma mantığı şu şekilde;

Öncelikle resmimizin 9 eşit parçaya ayrıldığını düşünelim.4 köşede bulunan yuvarlak parçaları, yerleştirmek istediğimiz etiketin köşelerine yerleştirir.Diğer arada kalan parçaları ise yazacağımız kod’a göre yerleştirecektir.Örneğin aradaki parçaları tekrar ettirebilir veya uzatabiliriz.

Dikkat : border-image özelliğini kullanırken border özelliği ile birlikte kullanmalıyız.Çünkü border-style özelliğinin varsayılan değeri none olduğu için, kullanmadığımız zaman border-image resmi görünmeyecektir.

Örneğin 5 adet <div> etiketi oluşturalım.border-image özelliği ile div’lerin kenarlıklarına resim yerleştirelim.Bu değerler üzerinde değişiklikler yaparak, tarayıcıdaki durumlarını incelerseniz daha iyi anlayabilirsiniz. 

Tarayıcı Desteği

ÖzellikChromeIEFirefoxSafariOpera
border-image

16.0

4.0 -webkit-

11.0

15.0

3.5 -moz-

6.0

3.1 -webkit-

15.0

11.0 -o-

Bu resimde tarayıcıların border-image özelliğini hangi versiyon ile birlikte sorunsuz desteklemeye başladığını görebilirsiniz.

Tarayıcı uyumluluğu ile ilgili daha kapsamlı ve güncel bilgi almak isterseniz caniuse sitesini ziyaret edebilirsiniz.

Yeni bir makalede görüşmek üzere.

Önceki : Css Dersleri 28 – Gradient Kullanımı

Sonraki : Css Dersleri 30 – Resize Kullanımı

Leave a Reply

TASARIMLARINIZDA KULLANABİLECEĞİNİZ TAM 150 FARKLI RENK PALETİRenkleri Göster
+ +