Nifty Corners Cube ile hiç resim kullanmadan sitelerde kullandığınız kutucukların köşelerini yuvarlak yapabilirsiniz. İlk gördüğümde çok sevmiştim.. Resim kullarak yuvarlak köşeler yapmak zahmetli bir iş.. Nifty Corners Cube ile bu iş çok basit.. Nasıl yapılacağı yazının devamında..

Resimsiz yuvarlak köşeler oluşturabilmek için üç şeye ihtiyacımız var;

  • niftycornerscube.js dosyası
  • niftycorners.css dosyası
  • nifty cornerı çağıracak olan javascript kodumuz..

Dosyaları buradan indirebilirsiniz. Dosyaları indirip sayfanızın bulunduğu klasöre açınız. Daha sonra html kodlarındaki <head> ile </head> arasında şu kodu yapıştırın;

<script type="text/javascript" src="niftycube.js"></script>

Sonra body bölümünüzde şu kodlar ile kutu oluşturun;

<div id="box">
<h1>Nifty Corners Cube™</h1>
<p>One call. Two parameters. Three sizes.</p>
</div>

Kutumuzun id’si box oldu.. Bu kutudaki öğelerin stillerini de head bölümüne yerleştireceğimiz şu kodlarla verelim

<style type="text/css">
body{padding: 30px 0 0;background:#FFF;font: 100.01%/1.3 Verdana,Arial,sans-serif;text-align:center}
div#box{width: 18em;padding: 20px;margin:0 auto;background:#E6E6E6;color:#000}
h1{font: lighter 200% "Trebuchet MS",Arial sans-serif;color: #208BE1}
h1,p{margin:0;padding:10px 20px}
</style>

Bu son eklediğimiz kod tamamen size kalmış, istediğiniz gibi değiştirebilirsiniz. Oluşturduğumuz “box” idli kutunun içindeki öğelerin stilini bu kod ile belirledik. Şimdi sırada bu kutunun kenarlarnı yuvarlak yapmaya geldi… Bunu da head kısmına ekleyeceiğimiz şu kod ile yapıyoruz.

<script type="text/javascript">
window.onload=function(){
Nifty("div#box","big");
}
</script>

bu kodda bulunan “div#box” box idsine sahip div’i köşeli yap diyor… Bu örnek indirdiğiniz zip dosyasının içinde bulunan örneklerden birincisi.. Dosyanın içinde daha değişik örneklerde mevcut.. Onları da incelemenizi tavsiye ederim..