Erhan Yakut Software Developer @Binalyze | Founder @Passwall | Golang Enthusiast | Open Sorcerer

CSS3 Kenarlık Resimleri

54 sec read



CSS’te kutu modelinin en temel özelliklerinden birisi borders yani kenarlıklar (sınırlardır). CSS3 ile kenarlıklar daha da canlandırılmak istenmiştir. Bu amaçla da düz çizgi halinde kenarlıklar yerine görsel kullanımına başlanılmıştır. Böylece eskisine ziyade çok daha canlı ve güzel kutular elde edebiliyoruz.

border-image

CSS3 ile beraber gelen border-image özelliği ile artık kenarlıklarda görsel yani istediğimiz resimleri kullanabiliyoruz. border-image özelliği temel olarak 5 parametre alır.

border-image-source
border-image-slice
border-image-width
border-image-outset
border-image-repeat

Yukarıdaki parametrelerin açıklanması için sizi başka bir yazıya yönlendirmeden önce bu özellikle ile ne yapabileceğinizi bir örnek üzerinde göstermek isterim.

Aşağıdaki gibi sade bir css kodu ile kodun altında göreceğiniz mükemmel çerçeve efektleri yapabilirsiniz.

CSS:
[css].imageborder2{
border-width: 25px 30px;
-moz-border-image: url(frame2.png) 25 30 stretch;
-webkit-border-image: url(frame2.png) 25 30 stretch;
-o-border-image: url(frame2.png) 25 30 stretch;
-ms-border-image: url(frame2.png) 25 30 stretch;
border-image: url(frame2.png) 25 30 stretch;
}[/css]

HTML:
[html]<div class="imageborder2" style="width:470px;height:300px;background:url(ocean_thumb.jpg) center center no-repeat"></div>[/html]

SONUÇ:
Çerçeve

Yukarıdaki örnek Dynamic Drive sitesinden alınmıştır.

Oldukça etkili bir özellik olan border-image‘in nasıl kullanıldığını Fatih Hayrioğlu‘nun CSS3 Kenar Resimleri (border-image) makalesinden okumanızı tavsiye ederim. Biraz karmaşık gibi duran konu oldukça güzel ve sade bir şekilde anlatılmış.



Erhan Yakut Software Developer @Binalyze | Founder @Passwall | Golang Enthusiast | Open Sorcerer