border-image-source
Kenarlık için görsel olarak kullanılacak dosyanın adresi bu özellik ile belirtilir. Kullanım formatı aşağıdaki şekildedir:
border-image-source: url("dosya_adresi");
Belirtilen adresteki dosyanın bulunamaması durumunda diğer özelliklerle belirtilmiş olan kenarlık biçimlendirmeleri kullanılır. Bu özellikle yapılan biçimlendirme alt elemanlara aktarılmaz.
border-image-slice
Bu özellik ile kenarlık olarak kullanılacak görsel dokuz parçaya ayrılır. Bu dokuz parça aşağıdaki resimde görülmektedir.
Yukarıdaki resimde gösterilen dört ölçünün verilmesi bu dokuz alanı belirlemek için yeterlidir. Bu dört ölçü özelliğin karşısına değerler olarak girilir. Değerler yine uzunluk belirtir fakat yüzde ya da sadece sayı şeklinde olmalıdır. Sadece sayı şeklinde yazılan değerler px olarak değerlendirilir.
Eğer özelliğin karşısına tek değer girilirse tüm ölçüler bu değeri alır, iki değer girilmesi durumunda ilk değer üst ve alt ölçülerin, ikinci değer sağ ve sol ölçülerin değeri olur. Üç değer girilirse ilk değer üst ölçünün, ikinci değer sağ ve sol ölçülerin, üçüncü değer alt ölçünün değeri olur. Dört değer girilmesi durumunda değerler sırasıyla üst, sağ, alt ve sol ölçülerin değerleri olur. Normalde ortada kalan kısım (yukarıdaki resimde gri bölge) yok sayılır. Fakat değerlerden sonra fill değeri girilirse bu kısım da arkaplan olarak kullanılır.
Bu özellikle yapılan biçimlendirmeler alt elemanları etkilemez.
<!DOCTYPE html>
<html>
<head>
<title>CSS Kutu Modeli</title>
<meta charset="UTF-8">
<style>
p.ornek1{
border-image-source: url("https://dl.dropboxusercontent.com/u/53524685/kenarlik.png");
border-image-slice: 13 17 19 21 fill;
}
p.ornek2{
border-image-source: url("https://dl.dropboxusercontent.com/u/53524685/kenarlik.png");
border-image-slice: 13 17 19 21;
}
p.ornek3{
border-image-source: url("https://dl.dropboxusercontent.com/u/53524685/kenarlik.png");
border-image-slice: 25;
}
p{
height: 300px;
border-image-width: 30px;
border-width: 30px;
}
</style>
</head>
<body>
<p class="ornek1">Örnek Paragraf 1</p><br>
<p class="ornek2">Örnek Paragraf 2</p><br>
<p class="ornek3">Örnek Paragraf 3</p><br>
<div>Bu örnekte kullanılan görsel:<br>
<img src="https://dl.dropboxusercontent.com/u/53524685/kenarlik.png" width="100" height="100" alt="">
</div>
</body>
</html>
Yukarıdaki örnekte görsel ilk iki paragraf için aynı şekilde bölünmüştür. İki paragraf arasındaki fark birisinin fill değerini kullanması diğerinin kullanmamasıdır. Üçüncü paragrafta resim farklı şekilde bölünmüştür bu nedenle kenarlıkta grilikler de görülmektedir.
border-image-width
Bu özellik ile görselle oluşturulan kenarlıkların kalınlıkları belirlenir. Bu sadece görsel olarak kenarlık kanlınlığını etkiler, elemana girilen içerik kenarlıklar ile çakışabilir. Bu nedenle boyutsal olarak da bu kenarlığın normal bir kenarlık gibi davranabilmesi için border-width özelliği de kullanılmalıdır.
Bu özelliğin karşısına dört taneye kadar değer girilebilir. Eğer tek değer girilirse girilen değer tüm kenarlıkların değeri olur. İki değer girilmesi durumunda ilk değer üst ve alt kenarlıkların, ikinci değer sağ ve sol kenarlıkların değeri olur. Üç değer girildiğinde ilk değer üst kenarlığın, ikinci değer sağ ve sol kenarlıkların, son değer de alt kenarlığın kalınlığını belirler. Dört değer girilmesi durumunda değerler sırasıyla üst, sağ, alt ve sol kenarlığı biçimlendirir.
Bu özelliğin karşısına girilen değerler uzunluk olabileceği gibi sayı da olabilir. Sayı girilmesi durumunda kenarlıkların kalınlığı border-width özelliği ile tanımlanan kalınlığın bu sayı ile çarpılması ile belirlenir. auto değeri kullanıldığında ise border-image-slice özelliği ile oluşturulan kısımların orijinal değerleri kullanılır.
Bu özellikle yapılan biçimlendirmeler alt elemanları etkilemez.
<!DOCTYPE html>
<html>
<head>
<title>CSS Kutu Modeli</title>
<meta charset="UTF-8">
<style>
p.ornek1{
border-image-source: url("https://dl.dropboxusercontent.com/u/53524685/kenarlik.png");
border-image-slice: 13 17 19 21;
border-image-width: 30px;
border-width: 30px;
}
p.ornek2{
border-image-source: url("https://dl.dropboxusercontent.com/u/53524685/kenarlik.png");
border-image-slice: 13 17 19 21;
border-image-width: 0.75;
border-width: 13px 17px 19px 21px;
}
p.ornek3{
border-image-source: url("https://dl.dropboxusercontent.com/u/53524685/kenarlik.png");
border-image-slice: 13 17 19 21;
border-image-width: 10px 15px;
border-width: 10px 15px;
}
p{
height: 300px;
}
</style>
</head>
<body>
<p class="ornek1">Örnek Paragraf 1</p><br>
<p class="ornek2">Örnek Paragraf 2</p><br>
<p class="ornek3">Örnek Paragraf 3</p><br>
<div>Bu örnekte kullanılan görsel:<br>
<img src="https://dl.dropboxusercontent.com/u/53524685/kenarlik.png" width="100" height="100" alt="">
</div>
</body>
</html>
border-image-repeat
Bu özellik ile kenarlıklar oluşturulurken izlenen yöntem belirtilir. Varsayılan değer stretch değeridir ve bu durumda görselin köşeler dışındaki kısımları uzatılarak kenarlıklar oluşturulur. repeat değeri girilmesi durumunda ise köşeler dışındaki kısımlar tekrarlanarak kenarlıklar oluşturulur. repeat değeri kullanıldığında görselin tekrarlanan kısmının köşelere dokunduğu noktalar tam olmayabilir. Bu durumun önüne geçmek için tekrarlanan kısımların tüm tekrarlar tam olacak şekilde ölçeklendirilmesi sağlanabilir. Bunun için round değeri kullanılır.
Bu özellikle yapılan biçimlendirmeler alt elemanları etkilemez.
<!DOCTYPE html>
<html>
<head>
<title>CSS Kutu Modeli</title>
<meta charset="UTF-8">
<style>
p.ornek1{
border-image-source: url("https://dl.dropboxusercontent.com/u/53524685/kenarlik.png");
border-image-slice: 13 17 19 21;
border-image-repeat: stretch;
}
p.ornek2{
border-image-source: url("https://dl.dropboxusercontent.com/u/53524685/kenarlik.png");
border-image-slice: 13 17 19 21;
border-image-repeat: repeat;
}
p.ornek3{
border-image-source: url("https://dl.dropboxusercontent.com/u/53524685/kenarlik.png");
border-image-slice: 13 17 19 21;
border-image-repeat: round;
}
p{
height: 300px;
border-image-width: 30px;
border-width: 30px;
}
</style>
</head>
<body>
<p class="ornek1">Örnek Paragraf 1</p><br>
<p class="ornek2">Örnek Paragraf 2</p><br>
<p class="ornek3">Örnek Paragraf 3</p><br>
<div>Bu örnekte kullanılan görsel:<br>
<img src="https://dl.dropboxusercontent.com/u/53524685/kenarlik.png" width="100" height="100" alt="">
</div>
</body>
</html>
border-image-outset
Bu özellikle kenarlıkların elemanın kenarlık olarak belirlenen sınırlarından ne kadar taşacağı belirtilir. Varsayılan değer 0'dır ve kenarlıklar elemanın kenarlık olarak belirlenen kısmından dışarı taşmaz. Buraya girilecek değerler yine uzunluk ya da sayı olabilir. Sayı girilmesi durumunda uygulamada kullanılacak değer border-width özelliği ile belirtilen kalınlık değerinin bu sayıyla çarpımıdır.
Bu özellikle belirtilen değer kadar taşma önce margin daha sonra da eleman dışına doğru olacağı için diğer elemanlarla çakışmalar yaşanabilir.
Bu özelliğin karşısına dört taneye kadar değer girilebilir. Eğer tek değer girilirse girilen değer tüm kenarlıkların değeri olur. İki değer girilmesi durumunda ilk değer üst ve alt kenarlıkların, ikinci değer sağ ve sol kenarlıkların değeri olur. Üç değer girildiğinde ilk değer üst kenarlığın, ikinci değer sağ ve sol kenarlıkların, son değer de alt kenarlığın biçimlendirmesini belirler. Dört değer girilmesi durumunda değerler sırasıyla üst, sağ, alt ve sol kenarlığı biçimlendirir.
Bu özellikle yapılan biçimlendirmeler alt elemanları etkilemez.
<!DOCTYPE html>
<html>
<head>
<title>CSS Kutu Modeli</title>
<meta charset="UTF-8">
<style>
p.ornek1{
border-image-source: url("https://dl.dropboxusercontent.com/u/53524685/kenarlik.png");
border-image-slice: 13 17 19 21;
border-image-outset: 0px;
}
p.ornek2{
border-image-source: url("https://dl.dropboxusercontent.com/u/53524685/kenarlik.png");
border-image-slice: 13 17 19 21;
border-image-outset: 20px;
}
p.ornek3{
border-image-source: url("https://dl.dropboxusercontent.com/u/53524685/kenarlik.png");
border-image-slice: 13 17 19 21;
border-image-outset: 40px;
}
p.ornek4{
border-image-source: url("https://dl.dropboxusercontent.com/u/53524685/kenarlik.png");
border-image-slice: 13 17 19 21;
border-image-outset: 10px 15px;
}
p{
height: 300px;
border-image-width: 30px;
border-width: 30px;
border-image-repeat:round;
background-color:aqua;
}
</style>
</head>
<body>
<p class="ornek1">Örnek Paragraf 1</p><br>
<p class="ornek2">Örnek Paragraf 2</p><br>
<p class="ornek3">Örnek Paragraf 3</p><br>
<p class="ornek4">Örnek Paragraf 4</p><br>
<div>Bu örnekte kullanılan görsel:<br>
<img src="https://dl.dropboxusercontent.com/u/53524685/kenarlik.png" width="100" height="100" alt="">
</div>
</body>
</html>
border-image
Bu özellik görsellerle kenarlık oluştururken kullanılan özelliklerden birden fazlasını tek seferde biçimlendirmeye yarar. Kullanım formatı şu şekildedir:
border-image: "border-image-source değeri" "border-image-slice değeri" / "border-image-width değeri" / "border-image-outset değeri" "border-image-repeat değeri";
Bu özellik ile yapılan biçimlendirmeler de alt elemanları etkilemez.
<!DOCTYPE html>
<html>
<head>
<title>CSS Kutu Modeli</title>
<meta charset="UTF-8">
<style>
p.ornek1{
border-image: url("https://dl.dropboxusercontent.com/u/53524685/kenarlik.png") 13 17 19 21 / 30px / 0px round;
}
p.ornek2{
border-image: url("https://dl.dropboxusercontent.com/u/53524685/kenarlik.png") 13 17 19 21 / 13px 17px 19px 21px round;
}
p.ornek3{
border-image: url("https://dl.dropboxusercontent.com/u/53524685/kenarlik.png") 13 17 19 21 stretch;
}
p{
height: 300px;
border-width: 30px;
background-color:aqua;
}
</style>
</head>
<body>
<p class="ornek1">Örnek Paragraf 1</p><br>
<p class="ornek2">Örnek Paragraf 2</p><br>
<p class="ornek3">Örnek Paragraf 3</p><br>
<div>Bu örnekte kullanılan görsel:<br>
<img src="https://dl.dropboxusercontent.com/u/53524685/kenarlik.png" width="100" height="100" alt="">
</div>
</body>
</html>
Kenarlıklar <<<<< CSS3 >>>>> Outline