CSS son zamanlarda öyle gelişti ki bazı kişiler sadece CSS3 kullanarak animasyonlu banner bile hazırlamaya başladılar. Tarayıcılar ise bu çılgınlığa ayak uydurmaya çalışıyorlar. Neyse konumuza dönecek olursak blog içerisinde kullandığım bir kod yapısı ile herhangi bir imaj kullanmadan sitenizdeki tüm resimlerin köşelerini istediğiniz derecede yuvarlatabilirsiniz.
Gelelim kodlama yapısına, klasik css kodu kullanacağız. Eğer belli bir css kısmının içerisindeki tüm resimleri etkilemesini istiyorsanız alttaki kodları o yapıya ekleyebilirsiniz. Bu kod yapısı Firefox, Safari ve Chrome tarayıcıları için kullanılabilir. Kod yapılarının ayrı yazılmasının sebebi; -moz mozilla, –webkit safari ve chrome, –khtml ise Konquerer tarayıcıları için kullanılan kod yapısıdır. Kod yapısı muhtemelen IE9’da da işe yarıyor lakin diğer Internet explorer versiyonlarında işe yaraması için ek bir kütüphaneye ihtiyaç duyuyor.
.post img
{
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
} Alıntı yapılan makalenin tümüne ve internet explorer versiyonları ile ilgili daha detaylı bilgiye buradan ulaşabilirsiniz.
5 yorumlar On CSS ile resimlerin köşelerini yuvarlatın (imajsız)
border-radius: 3px 3px 3px 3px; şeklinde sağ, sol alt ve üst köşelerin yuvarlaklığını ayrı ayrı da ayarlayabilirsiniz. Kısaca artık yuvarlak köşe için background imaj veren bizden değildir ^^
Güzelmiş :)
Rıza teşekkür ediyorum. Arkaplan zaten vardı. :)
Bu gidişle php felan kullanmaya gerek kalmayacak :)
basit ama çok kullanışlı bir durum.