Bu makalemizde css3 ile beraber gelen border-image özelliği ile nesnelerimize artık resimli çerçeveler ekleyebiliyoruz.
İçerik
göster
CSS3 border-image ile resimli çerçeveler oluşturma
Şimdi border-image özelliğini bazı örneklerimizle açıklamaya çalışalım
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 39 | <!DOCTYPE html> <html lang="tr"> <head> <meta charset="utf-8"> <style> *{ font-family: Calibri, Arial; } div { border: 15px solid transparent; width: 250px; padding: 10px 20px; } #round { -webkit-border-image: url(http://www.w3schools.com/cssref/border.png) 30 30 round; /* Safari 3.1-5 */ -o-border-image: url(http://www.w3schools.com/cssref/border.png) 30 30 round; /* Opera 11-12.1 */ border-image: url(http://www.w3schools.com/cssref/border.png) 30 30 round; } #stretch { -webkit-border-image: url(http://www.w3schools.com/cssref/border.png) 30 30 stretch; /* Safari 3.1-5 */ -o-border-image: url(http://www.w3schools.com/cssref/border.png) 30 30 stretch; /* Opera 11-12.1 */ border-image: url(http://www.w3schools.com/cssref/border.png) 30 30 stretch; } </style> </head> <body> <p>border-image özelliği resimli çerçeveler oluşturma için işimize yaramattadır.</p> <div id="round">Burada round değeri vererek resmin tekrarlanmasını sağladık</div><br> <div id="stretch">Burada ise stretch değeri vererek resim çerçevesinin sığdırılmasını sağladık.</div> <p>Kullanılan resim:</p> <img rel="lightbox" src="http://www.w3schools.com/cssref/border.png"> </body> </html> |
