Murat Çeşmecioğlu

Kişisel Web Sitesi

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]

Yine web tasarımı işlerine giriştiğim için arada sırada CSS içinde kodlar vereyim dedim. Her seferinde arıyorum işe yarar bazı CSS kodları. Fakat kullandıktan sonra tekrar lazım olduğunda eski kodlardan araması daha uzun sürüyor :)
Bu yüzden hem paylaşmış olayım hemde kendime not olsun diye yazıyorum.

Bir çok farklı şekilde dikey ortalama metodu var. Benim en çok hoşuma gideni paylaşacağım. Yazdığım kodlar aynı zamanda yatay ortalamayı da sağlıyor. Yani bir div’i sayfanın tam ortasına getirebilirsiniz.
CSS:
[css]body {margin:0}
#ortala1 {position:relative;height:200px;width:500px;border:1px solid #f0f}
#ortala2 {position:absolute;width:100%;height:1px;top:50%;overflow: visible;text-align:center;visibility:visible;display: block}
#ortala3 {position:absolute;left:50%;width:100%;height:20px;margin-top:-10px;margin-left:-50%;}[/css]

HTML:
[html]<div id="ortala1">
<div id="ortala2">
<div id="ortala3">
Merhaba Dünya! Hep bunu yazmak istemişimdir :)
</div>
</div>
</div>
[/html]

Bu şekilde yaptığınızda dikey ortalanmış bir div elde edeceksiniz. Hareket ettirmek için ortala1 adlı div’i kullanın. Gerekirse ortala3 adlı div’in yükseklik değerini ayarlamanız gerekebilir.