Bu yazımızda 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;
|
1 2 3 |
border-image: border-image-source border-image-slice border-image-repeat; |
► 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.
Border image’in ç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 koda göre yerleştirecektir.
Örneğin aradaki parçaları tekrar ettirebilir veya uzatabiliriz.
Önemli 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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<style> div { width: 160px; padding: 100px 5px; text-align: center; margin: 20px; background-color: antiquewhite; border: 10px solid transparent; } #box1 { border-image: url('border-image.png') 30 round; } #box2 { border-image: url('border-image.png') 30 stretch; } #box3 { border-image: url(border-image.png) 40% stretch; } #box4 { border-image: url('border-image.png') 20% round; } #box5 { border-image: url('border-image.png') 30% round; } </style> <div id="box1">border-image: url('border-image.png') 30 round;</div> <div id="box2">border-image: url('border-image.png') 30 stretch;</div> <div id="box3">border-image: url('border-image.png') 40% stretch;</div> <div id="box4">border-image: url('border-image.png') 20% round;</div> <div id="box5">border-image: url('border-image.png') 30% round;</div> |
CSS BORDER İMAGE ÖZELLİĞİ TARAYICI DESTEĞİ
| Özellik | Chrome | IE | Firefox | Safari | Opera |
| 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 tabloda 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.
Umarım sizin için faydalı bir yazı olmuştur.
Yeni bir yazımda görüşmek üzere.
Merhaba, sitenizden oldukça fazla yararlanıyorum. Özellikle birkaç konuda gerçekten adım adım anlatmanız ve en basit haliyle anlatmanız anlamamda çok yardımcı oluyor. Emekleriniz için teşekkür edip yorum yapmak istedim.