Okul Kaynak Sitesi
Hoşgeldiniz
Ziyaretçi
. Lütfen
giriş yapın
veya
kayıt olun
.
1 Saat
1 Gün
1 Hafta
1 Ay
Her zaman
Kullanıcı adınızı, şifrenizi ve aktif kalma süresini giriniz
Haberler:
Ana Sayfa
Yardım
Giriş Yap
Kayıt Ol
»
Dersler
»
Webmaster
»
CSS
»
Konu:
CSS ile Kenarlık Resimleri Nasıl Yapılır?
« önceki
sonraki »
Yazdır
Sayfa: [
1
]
Aşağı git
Gönderen
Konu: CSS ile Kenarlık Resimleri Nasıl Yapılır? (Okunma sayısı 3046 defa)
0 Üye ve 1 Ziyaretçi konuyu incelemekte.
D®agon
Ezberletmez Öğretir
Administrator
Süper Mega üye
İleti: 11650
+524/-0
Cinsiyet:
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.
[b]border-image özelliği[/b]
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:
[code].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;
}[/code]
HTML:
[code]<div class="imageborder2" style="width:470px;height:300px;background:url(ocean_thumb.jpg) center center no-repeat"></div>[/code]
[b]Sonuç[/b]
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: http://fatihhayrioglu.com/css3-kenar-resimleri-border-image/
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ış.
Kayıtlı
Yazdır
Sayfa: [
1
]
Yukarı git
« önceki
sonraki »
»
Dersler
»
Webmaster
»
CSS
»
Konu:
CSS ile Kenarlık Resimleri Nasıl Yapılır?
Yukarı git
Aşağı git