Merhabalar. Birçok tarayıcının güncellenmesiyle artık biz de Css3 kodlarımızı daha sağlıklı çalıştırır hale geldik. Özellikle Firefox 3.6 üzerinde yaptığımız uygulamaları daha iyi görme şansımız var.

Bu makalemizde de Css ile basit bir yatay menu yapacak, bu menüye gölge efekti verecek ve biraz da jQuery ile animasyon katacağız. Özellikle box-shadow ve border-radius bu makalemizde üzerinde duracağımız konulardan.

UYGULAMA ÖNİZLEME UYGULAMAYI İNDİR (3kb)

1. ADIM Xhtml
Her uygulama yazımızda olduğu gibi önce menümüzün Xhtml kodlarını yazarak başlıyoruz.

<div id="menu">
<ul>
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Xhtml / Css</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">Photoshop</a></li>
<li><a href="#">Fireworks</a></li>
<li><a href="#">Dreamweaver</a></li>
<li><a href="#">Php / Mysql</a></li>
<li><a href="#">Flash / AS</a></li>
<li><a href="#">Worms Armageddon :)</a></li>
<br style="clear:both" />
</ul>
</div>

2. ADIM CSS
Menümüzün genel görünümünü düzenleyecek olan stilleri Css kodlarımız ile tanımlıyoruz. Css kodlarında kullandığımız parametrelere ilişkin açıklamaları makalenin ilerleyen bölümlerinde okuyabilirsiniz.

#menu {font:14px arial, verdana, sans-serif;-moz-box-shadow:0px 2px 5px  2px #999; -webkit-box-shadow:  0px 2px 5px  2px #999;} /* Burada menümüze bir miktar gölge veriyoruz */

#menu ul{background:#fff url(../img/menubg.gif) repeat-x;margin:0;padding:0;list-style:none;border:1px solid #c0c0c0;padding:10px 0px 10px 0px;}

#menu li{margin:0;display:inline;float:left;padding:0px;}

#menu ul li a {padding:10px;color:#444;text-decoration:none;} /* Menü bağlantılarımızı burada tanımlıyoruz */

#menu ul li a:hover { /* Bağlantılarımızın hover durumundaki tanımlamalarını yapıyoruz */
padding:10px;
background:#6bbef0 url(../img/menu2.gif) repeat-x;
color:#fff;
text-decoration:none;

-moz-box-shadow:0px 2px 5px  2px #2e83ff;		/* Bu iki satırda gölge tanımlamaları yapılıyor. */
-webkit-box-shadow:  0px 2px 5px  2px #2e83ff;

-moz-border-radius: 0px 0px 4px 4px;			/* Bu iki satırda ise yuvarlak köşeler için tanımlamalar yapılıyor */
-webkit-border-radius: 0px 0px 4px 4px;
}

3. ADIM jQuery
Bu adımda menümüz bağlantıların etkileyecek küçük bir animasyon oluşturuyoruz.

<script>
	// menü bağlantılarımız için küçük bir animasyon oluşturuyoruz

	$(document).ready(function() {
			$('#menu a').hover(function() { // fare üzerine gelince yapılacaklar
				$(this).animate({ paddingBottom: '15px', paddingTop: '10px'  },300);

			}, function() { // fare gidince yapılacaklar
				$(this).animate({ paddingBottom: '10px', paddingTop: '10px' }, 300);
			});
		});

	</script>

Menümüz Hakkında Küçük Ayrıntılar
Xhtml ve Css kodlarında görmüş olduğunuz gibi gayet basit ve sade bir menü oluşturduk. Menüye artı olarak kattığımız şey sadece gölge efekti ve bağlantıların hover efektinde vermiş olduğumuz yuvarlak köşe görünümü. Geri kalan kısmı ise jQuery ile basit bir animasyon yaparak hallettik. Xhtml kodlarında klasik olarak bir ul li menü dizilimi yaptık ve etiketlerimizi kapattık. Css kodlarında ise ul ve li etiketlerine uygun padding ve görünüm değerleri atadık.

Box Shadow ve Border Radius değerlerimizi neye göre verdik?
Aslında bu makaleyi yazmamın bir amacı da box-shadow ve border-radius parametrelerini anlatabilmekti. Örneğimizde de hem Menu isimli div etikemizte hem de menümüzün bağlantılarında bu parametreleri kullandık. Şimdi kısaca bu parametrelerin kullanımından bahsedelim.

Öncelikle box-shadow’dan başlamak istiyorum. Box shadow isminden de anlaşılacağı üzere oluşturduğumuz alanlara gölge etkisi vermemizi sağlıyor. Kullanımı ise şöyle;

-moz-box-shadow:5px 8px 10px 6px #f91365;

Parametrede verdiğimiz ilk değer (5px) gölgemizin yatay konumda (X ekseninde) ne kadar yayılacağını gösteriyor. Eğer bu değeri pozitif olarak verirsek bu yayılma alanın sağına doğru oluyor. Değeri – (eksi) olarakta vermek mümkün. 0 değeri ise X ekseninde (Horizontal konumda) yayılma olmayacağını gösteriyor.

Sonra verdiğimiz 8px’lik değer ise dikey konumda (Y ekseninde) yayılma miktarını gösteriyor. Aynı X ekseninde olduğu gibi yine buraya da eksi değerler atayabiliyorsunuz. Değeriniz pozitif bir değer olursa alanın altına doğru gölgeniz yerleşiyor. 0 değeri Y ekseninde gölgeyi ortadan kaldırıyor.

Vermiş olduğumuz 3. değer ise (10px) gölgemizin ne kadar bulanık görüneceğini belirleyen blur değeri. Bu değeri eksi olarak vermemiz mümkün değil. Bulanıklık değerini verdiğimiz gölge oranına göre ayarlamak en iyisi. Bu sayede gölgenizin daha iyi şekilde görünmesini sağlıyorsunuz.

Son vermiş olduğumuz değer ise (6px) gölgemizin hem bulanıklık hem de x-y ekseninde genel yayılımını (Spread) gösteriyor. Bu değeri eksi olarak atayabiliyoruz. Bu durumda gölgemizin keskinliği biraz azalıyor. Pozitif değerlerde ise yükseliyor.

Gelgelelim border-radius değerine. Border radius parametresi ile belirlediğimiz alanların köşelerini yuvarlatabiliyoruz. Şimdi bir örnek kod yazalım ve üzerinden değerleri açıklayalım;

-moz-border-radius: 8px 6px 4px 2px;

Border radius’un verilen değerleri nispeten daha kolay anlaşılır. 8px’lik ilk değer üst soldaki yuvarlamanın değerini, sonraki 6px’lik değer üst sağdaki değeri, 4px’lik değer alt sağdaki değeri, son değer ise alt soldaki değeri ifade etmekte. Daha kolay bir anlatımla sırasıyla bu dört değer “saat yönünü” takip ediyor.

Tarayıcı Uyumluluğu
Ne yazık ki her uygulamada olduğu gibi burada da tarayıcı uyumuna takılıyoruz. Örneğimizde verdiğimiz kodlar Firefox 3.6, Google Chrome ve Safari tarayıcılarda sorunsuzca görüntülenecektir. (Bu nedenle sadece -moz-box-shadow değil -webkit-box-shadow değerini de yazdık, bu sayede Webkit tabanlı tarayıcılarda da uyum sağladık) Ne yazık ki Opera 10.10 ve IE8 desteği bulunmuyor. Yani menü örneğimizi belli taraycılar ile görüntüleyebilirsiniz. Ben her zaman olduğu gibi Firefox tavsiye ediyorum. (Zaten uygulamayı geliştirirken de hep Firefox ile izledim)

Tarayıcıların ilerleyen dönemlerde CSS3 desteğini arttırması ile birlikte bu tür örneklere daha çok rastlayacağız. Bu nedenle sanırım bu tür uygulamaları kullanmak için biraz erken. Hele ki IE faktörü göz önüne alınırsa ne demek istediğim daha kolay anlaşılır sanırım. Makalemizde elimden geldiğince kodları sade tutmaya ve amacımıza yönelik olarak sade bir anlatım kullanmaya çalıştım. Eksiklerim veya atladığım noktalar olursa bunları yorumlarınızla tartışmak isterim. Umarım sizler için faydalı olmuştur.

Kaynaklar
http://www.w3.org/TR/2008/WD-css3-background-20080910/#border-radius
http://www.w3.org/TR/2008/WD-css3-background-20080910/#the-box-shadow
https://developer.mozilla.org/en/CSS/-moz-box-shadow
http://markusstange.wordpress.com/2009/02/15/fun-with-box-shadows/
http://css.flepstudio.org/en/css3/box-shadow.html
http://www.css3.info/preview/box-shadow/

Rastgele Yazılar