Murat Çeşmecioğlu

Kişisel Web Sitesi

CSS İle Köşe Yuvarlatma

Bir stil dosyasını incelerken bulduğum kodları paylaşmak istiyorum: Köşe Yuvarlatma.

Kodlarınızdaki bir div’in köşelerini yuvarlatmak isterseniz, o div’e bir class eklemeniz yeterli oluyor. Internet Explorer’da çalışmıyor fakat Opera, Chrome ve Firefox’ta mükemmel çalışıyor.

Hangi köşeyi yuvarlatmak isterseniz ona göre class ekleyin.

CSS:

[css wraplines=”false”]
.ui-corner-tl { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; border-top-left-radius: 4px; }
.ui-corner-tr { -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; border-top-right-radius: 4px; }
.ui-corner-bl { -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; }
.ui-corner-br { -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; }
.ui-corner-top { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; border-top-left-radius: 4px; -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; border-top-right-radius: 4px; }
.ui-corner-bottom { -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; }
.ui-corner-right { -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; border-top-right-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; }
.ui-corner-left { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; border-top-left-radius: 4px; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; }
.ui-corner-all { -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; }[/css]

HTML:

[html]<div class=”ui-corner-top”>
Bu div’in üst köşeleri yuvarlatılmış
</div>[/html]

1 Yorum

  1. #1 Yunus Oksuz tarafından, tarihinde

    ie 7 ve 8’de işe yaramiyor ie9 da css3 desteği gelirse kullanırız inşallah :)

Yorum Yazın

İsim (gerekli)

E-Posta (gerekli)

İnternet sitesi