Winamp için yaptığım ilk tasarım. Minimal ve şık bir tasarım oldu. İsminin anlamı selobant :) Albüm kapaklarının gösterildiği yerden aklıma geldi :)

Kurulum:

Sıkıştırılmış dosyanın içinden çıkan klasörü Winamp’ın yüklü olduğu yerdeki Skins klasörü içine atın.

İndirme:

DeviantArt hesabı açtım. Artık  tasarımları oraya yüklemeyi düşünüyoruım. Aşağıdaki adresten ya da sağdaki sosyal medya ikonlarından DeviantArt sayfama ulaşıp temayı indirebilirsiniz.

http://muratcesmecioglu.deviantart.com/art/Scotch-Tape-Winamp-Skin-205755259

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]

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.