CSS ile Kenarlık Resimleri Nasıl Yapılır?

  • 0 replies
  • 1106 views

0 Üye ve 1 Ziyaretçi konuyu incelemekte.

*

Çevrimdışı D®agon

  • Her Şey Senin Rızan İçin Allah'ım.
  • *
  • 11539
  • +523/-0
  • Cinsiyet: Bay
    • bilyonmu
CSS ile Kenarlık Resimleri Nasıl Yapılır?
« : 19 Ocak 2015, 13:35:07 »



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 özelliği

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

Bu özellikle ile ne yapabileceğinizi bir örnek üzerinde göstermek istersek:

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

CSS:
Kod: Linkleri gorebilmeniz icin izniniz yok! Uye ol veya Giris yap
.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;
}

HTML:
Kod: Linkleri gorebilmeniz icin izniniz yok! Uye ol veya Giris yap
<div class="imageborder2" style="width:470px;height:300px;background:url(ocean_thumb.jpg) center center no-repeat"></div>
Sonuç

border-image özelliği gayet kullanışlı bir özellik. Birçok konuda elimiz rahatlatacak bir özellik. Uyguladıkça daha güzel örneklerin çıkacağına inanıyorum. Standartlar tam oturmasa da zamanla daha iyi olacaktır. Bu özellikte bazı şimdilik eksik kalan yerler olsa da mobil uygulamalarda uygulanabilirliği var.

Kaynak: Linkleri gorebilmeniz icin izniniz yok! Uye ol veya Giris yap

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ış.

 

Bunlarda İlginizi Çekebilir

  Konu / Başlatan replies Son İleti
2 replies
3547 views
Son İleti 12 Nisan 2008, 19:45:29
Gönderen: Güneş
0 replies
3267 views
Son İleti 13 Kasım 2010, 15:02:22
Gönderen: Black_house
0 replies
3735 views
Son İleti 16 Aralık 2010, 04:07:17
Gönderen: gece_mavisi
0 replies
2868 views
Son İleti 05 Şubat 2011, 01:51:50
Gönderen: gece_mavisi
0 replies
2409 views
Son İleti 13 Mayıs 2013, 22:25:28
Gönderen: D®agon
0 replies
2508 views
Son İleti 24 Kasım 2013, 22:20:34
Gönderen: D®agon
0 replies
1815 views
Son İleti 21 Ocak 2015, 10:30:36
Gönderen: D®agon
0 replies
6731 views
Son İleti 29 Eylül 2016, 08:39:07
Gönderen: Uyanan Gençlik
0 replies
706 views
Son İleti 27 Haziran 2018, 10:36:30
Gönderen: Ders Hocası
0 replies
383 views
Son İleti 07 Eylül 2018, 15:07:00
Gönderen: kardelen