Hüseyin Berberoğlu
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>
<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>
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>
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..
If you enjoyed this article, please consider sharing it!
gerçekten çok faydalı bir yazı. O köşe resimleri ile uğraşmaktan nefret ediyorum.
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…..
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ş :)
hiç zahmetli değil bence.. 2 kod ile yuvarlak oluyor.. örnek resim zaten indirilecek olan zip’in içinde var oradan bakabilirsin :)
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…
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.
JS kullanmadan da yuvarlak köşeli kutular oluşturulabiliyor. Fakat henüz bulamadım arkadaşlar.
Evet arkadaşlar buldum :)
Buyrun sitemde açıkladım JS kullanılmadan nasıl yuvarlak köşeler oluşturabiliriz.
http://www.aybardumlu.com
Teşekkürler
Teşekkürler