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

Posted: Ocak 14th, 2008 | Author: | Filed under: CSS | Tags: , | 10 Comments »

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

10 Comments on “Nifty Corners Cube – CSS ile resimsiz yuvarlak köşeli kutular”

  1. 1 elif said at 14:05 on Ocak 14th, 2008:

    gerçekten çok faydalı bir yazı. O köşe resimleri ile uğraşmaktan nefret ediyorum.

  2. 2 oyyla.com said at 14:07 on Ocak 14th, 2008:

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

    Web sayfaları için resim kullanmadan sadece css kullanarak yuvarlak köşeli kutucuklar oluşturma…..

  3. 3 Uğur SAMSA said at 20:58 on Ocak 18th, 2008:

    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ş :)

  4. 4 Hüseyin Berberoğlu said at 21:04 on Ocak 18th, 2008:

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

  5. 5 erronin said at 13:46 on Ocak 19th, 2008:

    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…

  6. 6 Hüseyin Berberoğlu said at 14:12 on Ocak 19th, 2008:

    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.

  7. 7 aybar dumlu said at 18:18 on Mart 26th, 2008:

    JS kullanmadan da yuvarlak köşeli kutular oluşturulabiliyor. Fakat henüz bulamadım arkadaşlar.

  8. 8 Aybar said at 11:57 on Nisan 19th, 2008:

    Evet arkadaşlar buldum :)
    Buyrun sitemde açıkladım JS kullanılmadan nasıl yuvarlak köşeler oluşturabiliriz.

    http://www.aybardumlu.com

  9. 9 Scriptorium said at 22:45 on Temmuz 16th, 2009:

    Teşekkürler

  10. 10 Herşeyi Buraya Kodyukü said at 16:01 on Eylül 10th, 2009:

    Teşekkürler

Leave a Reply