Nifty Corners Cube – CSS ile resimsiz yuvarlak köşeli kutular

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..

Nifty Corners Cube – CSS ile resimsiz yuvarlak köşeli kutular” üzerine 10 düşünce

  1. Geri izleme: oyyla.com

  2. Uğur SAMSA

    Keşke bir örnek yapıp resmini ekleseydin Hüseyin. Nifty Corners’ı ilk söylediğinde css kodundaki oynama ile olur diye düşünüyordum ama biraz zahmetliymiş :)

    Cevapla
  3. Hüseyin Berberoğlu Yazar

    hiç zahmetli değil bence.. 2 kod ile yuvarlak oluyor.. örnek resim zaten indirilecek olan zip’in içinde var oradan bakabilirsin :)

    Cevapla
  4. erronin

    Aslında kodları çok beğendim. Ama biraz da kafam karıştı. Bir yanda 5-6 satırda yapılacak iş için 300 satırlık js kodu eklemek var. Hem de tasarımda çok fazla JScript kullanmak pek hoşuma gitmiyor. Ama bir yandan da hepi topu 12kbyte tutuyor. Ve gayet pratik. Denemek lazım…

    Cevapla
  5. Hüseyin Berberoğlu Yazar

    aslında o da doğru, nifty koy sonra ajax için kütüphane koy derken js dosyaları bir site için çok büyük boyutlara ulaşabiliyor, site yavaşlayabiliyor.. Ama sitelerde keskin köşeleri sevmeyen biri olarak bu nifty’i seviyorum ben :) çok kolay bir şekilde istediğim kadar yuvarlak kutular oluşturuyorum.

    Cevapla

Bir cevap yazın

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