Css ile Yuvarlak Kenarlı Resim Yapımı

Css ile Yuvarlak Kenarlı Resim Yapımı

Css ile Yuvarlak Kenarlı Resim Yapımı

Css yapısının temeline artılar sunan css3 ile yapacağımız bu kodlama resimlerimize ayrı bir hava katıyor gerçekten, kenarları oval olarak kesiyor resimleri çerçeve içerisine sığdırıyor. Özelikle ben bu özelliği çok sevdiğim için anasayfam da fazlasıyla kullanıyorum küçük resimlerin tamamı bu özelliği kullanarak oval hale getirildi.

  • Eski sürüm Tarayıcıların Dışında tüm tarayıcılar bu özellik görünmektedir.

Örnek

css-ile-Yuvarlak-kenarli-Resim-yapimi

  • Resimde  Gördüğün Resim 4px Olarak Çerçeve edilip ovalleştirilmiştir.

Kodlama

.ovalresim {
 border: 1px solid #CCCCCC;
 background-color: #FFFFFF;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

Kodların Kullanımı

<img class="ovalresim" src="resim-url" alt="açıklama" width="120" height="120" />
Beğen

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

This site uses Akismet to reduce spam. Learn how your comment data is processed.