Jquery ile resim kullanmadan köşeleri yuvarlamak

16 / Haziran / 2008 Author

İsa Engiz

JQuery, javascript Tags

featured, JQuery Yorumlar

8 Yorum Yapilmis.

Web 2.0′ın getirdikleri nelerdir diye bir soru sorarsak, pek çok cevap verebiliriz, kimileri web 2.0′ı sadece ajax’a indirger, kimisi tasarımlardaki değişimlerden dem vurur, bazıları ise kullanıcının ön plana çıkmasını örnek verebilir. Neyse, web 2.0 tanımı için wikipedia’ya bakılabilir, bugün ise bunu tartışmayacağız.

Bugün, web 2.0 ile alışageldiğimiz yuvarlak köşeleri tartışacağız. Köşeleri yuvarlamak için farklı teknikler mevcut. Bunlardan birini eburhan’da bulabilirsiniz. Ancak resim kullanmadan, ufacık bir javascript koduyla da bu başarılabilir. Hemde farklı alternatiflerle. Örnek sayfamıza bakarak bu uygulamayı test edebilirsiniz.

Adım 1: HTML

İlk önce köşeleri yuvarlanacak div etiketini sayfaya yerleştirelim:

<div id="cerceve" class="cerceve1">
<h1>Dikkat!</h1>
<span>Bu div etiketinin köşelerini yuvarlak yapmak için hiç bir resim kullanmadık!</span>
</div>
 
<div id="cerceve" class="cerceve2">
<h1>Sadece üst köşeler!</h1>
<span>Bu bölümde ise sadece üst köşeleri yuvarladık!</span>
</div>
 
<div id="cerceve" class="cerceve3">
<h1>Daha derin yuvarlaklar...</h1>
<span>Bu bölümde ise yuvarlaklar daha derin...</span>
</div>
 
<div id="cerceve" class="cerceve4">
<h1>Farklı köşe sitilleri de mevcut</h1>
<span>Değişik köşe sitillerinden istediğiniz birini kullanabilirsiniz.</span>
</div>

4 tane farklı div alanımız var, bunların her birinde farklı bir köşe yuvarlama tekniğini örnek olarak uygulayalım.

Adım 2: CSS

İkinci adımda ise bu div etiketlerinin görünüşlerini css ile ayarlayalım:

#cerceve {
	background-color:#e5faf0;
	width:500px;
	padding:20px;
	margin-top:30px;
}

Görüldüğü üzere oldukça ufak bir kod parçası.

Adım 3: Jquery

Üçüncü adımda sayfamıza jquery’yi ve köşe yuvarlama eklentisini ekleyelim:

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

Adım 4: Javascript

Geldik esas adıma! Bu aşamada ise istediğimiz div etiketinin köşelerini yuvarlayacağız. Örneğin 1. div etiketinin köşelerini yuvarlamak istiyorsak, basitçe şu kodu yazacağız:

$(document).ready(function()
	{
   		 $(".cerceve1").corner("round");
  });

cerceve1 sınıfına dahil olan div etiketine ulaşıyoruz ve köşelerini yuvarlıyoruz. İşte bu kadar basit.

Farklı alternatifler de mevcut tabi ki. Örnek sayfamızdaki div etiketlerinin köşelerini oluşturan kodlar ise şu şekilde:

$(document).ready(function()
	{
   		 $(".cerceve1").corner("round");
		 $(".cerceve2").corner("round top 30px");
		 $(".cerceve3").corner("round 40px");
		 $(".cerceve4").corner("curl 20px");
  });

Sonuç

Görüldüğü gibi jquery ve onun “corner” eklentisi ile köşeleri yuvarlamak oldukça kolaya indirgenmiş durumda.

Eklentiyi hazırlayan ise Dave Methvin. Ve o kadar farklı köşe sitilleri tasarlamış ki, aklınıza gelebilecek bütün köşe ihtiyaçlarınızı giderecektir! Sayfasına buradan ulaşabilirsiniz.

Not:
Bu uygulamanın canlı haline buradan ulaşabilir veya dosyaları buraya tıklayarak indirebilirsiniz.

- Bu blogda yer alan yazıları RSS ile takip edebilirsiniz. RSS aboneliği için tıklayın.

- Ya da bu blogda yer alan bütün yazıları içindekiler sayfasında görüntüleyebilirsiniz. Tıklayın!