Sanıyorum t’infection’un tarihi boyunca yaşadığı en uzun süre durgunluk bu zamana denk geldi. Hem t’yi unutmadığımı belirtmek hem de biraz olsun yazı yazmanın heyecanını yeniden yaşayabilmek için bu gönderiyi yazıyorum. Bu zaman zarfında hayatımda ne gibi değişiklikler oldu onları da anlatmak isterim :)Efendim, malumunuz bu yıl benim için oldukça zor bir yıl oldu. Zira Dokuz Eylül Üniversitesi Fizik Tedavi ve Rehabilitasyon Yüksekokulu 4. sınıf öğrencisi olmak zor bir iş :) Bu yıl oldukça yoğundu. 3 haftada bir değiştirilen staj yerleri ve sürekli hastanede oluşum nedeniyle gün içerisinde vaktimin büyük çoğunluğu hastanede geçiyordu. Bu nedenle t’infection ile fazla ilgilenemedim.

Şükürler olsun ki bu Temmuz ayında okulum bitti ve çıkış belgemi aldım. Artık 2. üniversitesini bitirmiş bir insan olarak sizlere bu gönderiyi yazıyorum.

Malum okul bitince İzmir’de yapacağım birşey kalmadı. Tekrar ailemin yanına dönmem yani İstanbul’a gelmem gerekiyordu. Geçtiğimiz zaman zarfında hem okulun son dönemleri, hem sınavları, hem bitirme süreci hem de vilayet değiştirme süreci üst üste bindi. Artık neler yaşadığımı sizler tahmin edersiniz. Bunun üzerine bir de sabit bir bağlantınızın olmayışını ekleyin… Uzun ve zorlu bir dönem oldu ama şükür ki bunu da atlattık.

Sizlerle daha önceki yazılarımda paylaşmıştım. Bu alanı ne kadar daha devam ettirebilirim bilmiyorum. Zira bundan sonraki dönemde artık mesleğimi icra etmeye başlayacağım. Bu nedenle t’ye gerekli vakti ayırabilir miyim bilmiyorum. Ancak elimden geldiğince yazmaya, faydalı şeyler üretmeye gayret edeceğim. Zaten daha önce de belirtmiştim. Şayet yazmayı bırakırsam bir veda yazısı yazmayacağım.

Fakat şartlar ne olursa olsun, (ne kadar yazamıyor olsam da) blog yazmak çok güzel birşey!

Umarım güzel makaleler ve uygulamalarla yeniden birlikte oluruz.

t’infection.com’da kullandığımız kod renklendirici eklenti oldukça eskiydi ve geçtiğimiz günlerde bunu değiştirmeye karar verdim. Bu işlem için SyntaxHighlighter Evolved eklentisini kullandım. Bu yazımızda bu eklentiyi ve kullanımını sizlere kısaca anlatmaya çalışacağım.

Öncelikle söylemeliyim ki bu tür eklentiler, Asp, Php, Xhtml, Css gibi kodları gönderilerimiz içinde daha derli toplu bir şekilde göstermeye yarıyor. SyntaxHighlighter Evolved eklentisini de kullanan birçok site mevcut. Eklenti hem Wordpress’in son sürümüyle uyumlu hem de oldukça kolay bir kullanımı var. Hemen kurulum ve kullanıma geçelim.

Kurulum ve Kullanım
Eklentimizi Wordpress Eklenti bölümünden indiriyoruz. Daha sonra gelen paketi açıyoruz. Paketten çıkan syntaxhighlighter isimli dizini FTP yardımıyla sitemizde wp-content/plugins dizinine atıyoruz.

Bu aşamadan sonra sitemizin Yönetim Panelinden eklenti alanına geliyor ve SyntaxHighlighter Evolved eklentisini aktifleştiriyoruz.

Dilerseniz Yönetim Paneli/Ayarlar bölümünden SyntaxHighlighter kısmına gelebilir ve eklentinizin bir takım ayarlarını değiştirebilirsiniz. Bu alanda satır sayısı, satır numaraları, tema seçimi gibi ayarlarını bu alanda belirleyebiliyorsunuz.

Eklentimizin kullanımı ise oldukça basit. Hangi dilde kod betiği gösterecekseniz bunu küçük harflerle köşeli parantezler içine yazıyorsunuz.

[ css].ornek {color:#333}[/css]

şeklinde bir kullanım ile gönderimizde Css kodlarımızı rahatlıkla gösterebiliyoruz. Aynı şekilde Php, Xhtml, Javascript gibi kodlarımızı da gösterebiliriz. Zaten eklentinin ayarlar sayfasında aşağıda bir takım örnek kullanımlar mevcut. Bunlar da işinize oldukça yarayacaktır.

Ben bu eklentiyi kısa bir zamandır kullanıyorum ve sizlere de tavsiye ediyorum. Umarım sizler için faydalı olmuştur.

Bu yazımızda sizlerle Css3′ün Linear Gradient özelliğinden yararlanarak Apple.com sitesindeki gibi bir navigasyon tasarımını nasıl yapacağımızı konuşacağız. Dilerseniz uygulamaya geçmeden önce neden böyle bir örneği oluşturmaya gereksinim duyduk bundan bahsedelim.

UYGULAMA ÖNİZLEME UYGULAMA İNDİR (10kb)

Neden Apple Tarzı Bir Navigasyon Uygulaması Yapıyoruz?
Aslına bakarsanız bu sorunun sizlerden gelebileceğini düşünerek buna açıklık getirmeye karar verdim. Yazımızın giriş kısmında da bahsettiğim gibi bu uygulamada Linear Gradient özelliğini kullanacağız. Bu özelliğin kullanıldığı birçok güzel site var aslında. Ancak gradient (renk geçişleri olarak tanımlayabiliriz) kullanmak için mutlaka bir resim dosyası kullanmak icab ediyor. Biz bu uygulamada gradient oluşturmak için resim dosyası kullanmayacağız. Tamamiyle Css kodlarından yararlanacak ve bunu uygulamaya dökeceğiz.

Apple.com gibi bilindik bir sitenin navigasyon alanını aşağıdaki kodlara göre yapmak benim için oldukça zevkli oldu. Sizlerin de yararlanabileceğini düşündüğüm için böyle bir uygulama yapmayı tercih ettim. Umarım beğenirsiniz. Şimdi uygulamamıza geçelim.

XHTML

<div id="applenav">
<ul>
<li><a href="#" class="apple"><img src="apple.png" alt="Apple" border="0" /></a></li>
<li><a href="#">Mac</a></li>
<li><a href="#">iPod</a></li>
<li><a href="#">iPhone</a></li>
<li><a href="#" class="secili">iPad</a></li>
<li><a href="#">iTunes</a></li>
<li><a href="#">Destek</a></li>
</ul>

<div class="arama">
<input type="text" value="Arama" />
</div>
<br style="clear:both" />
</div>

CSS
Şimdi işin özü olan Css kodlarımızı yazmaya sıra geldi.

#applenav {
padding:0px 0px 0px 0px;
background:#cacaca;
-moz-border-radius:4px; /* Mozilla için köşelerimizi yuvarlayalım */
-webkit-border-radius:4px; /* Şimdi de Chrome ve Safari için köşeleri yuvarlayalım */
background-image: -moz-linear-gradient(90deg, #848484, #cacaca); /* Mozilla için Linear Gradient kodumuzu yazdık! */
background-image: -webkit-gradient(linear, left top, left bottom, from(#cacaca), to(#848484)); /* Chrome ve Safari için Linear Gradient kodumuzu yazdık! */
}

/* Menümüzün ul ve li etiketlerini tanımlıyoruz... */
#applenav ul, #applenav li {list-style:none;margin:0;padding:0;} 

/* Şimdi menü bağlantılarımızı tanımlamaya başlıyoruz... */
#applenav a {
font:bold 12px/36px arial, verdana, sans-serif;
text-decoration:none;
display:block;
float:left;
width:100px;
height:36px;
color:#252525;
background:#cacaca;
background-image: -moz-linear-gradient(90deg, #848484, #cacaca); /* Menü birimlerindeki Gradienti tanımladık! */
background-image: -webkit-gradient(linear, left top, left bottom, from(#cacaca), to(#848484)); /* Chrome ve Safari'yi unutmadık :) */
text-shadow:0px 1px 1px #ddd; /* Biraz gölge ekleyelim :) */
border-right:1px solid #959595;
text-align:center;
}

#applenav a:hover {
font:bold 12px/36px arial, verdana, sans-serif;
text-decoration:none;
display:block;
float:left;
width:100px;
height:36px;
color:#fff;
background:#cacaca;
background-image: -moz-linear-gradient(90deg, #555, #909090); /* Menü hover içindeyken değişen gradientimiz... */
background-image: -webkit-gradient(linear, left top, left bottom, from(#909090), to(#555));
text-shadow:0px 0px 0px #ddd;
border-right:1px solid #909090;
text-align:center;
}

#applenav a.apple {
-moz-border-radius:4px 0px 0px 4px;
-webkit-border-radius:4px 0px 0px 4px;
text-decoration:none;
display:block;
float:left;
width:100px;
color:#fff;
background:#cacaca;
background-image: -moz-linear-gradient(90deg, #848484, #cacaca);
background-image: -webkit-gradient(linear, left top, left bottom, from(#cacaca), to(#848484));
text-shadow:0px 0px 0px #ddd;
border-right:1px solid #909090;
text-align:center;
}

#applenav a.apple:hover {
font:bold 12px/36px arial, verdana, sans-serif;
text-decoration:none;
display:block;
float:left;
width:100px;
height:36px;
color:#fff;
background:#cacaca;
background-image: -moz-linear-gradient(90deg, #555, #909090);
background-image: -webkit-gradient(linear, left top, left bottom, from(#909090), to(#555));
text-shadow:0px 0px 0px #ddd;
border-right:1px solid #909090;
text-align:center;
}

#applenav a.secili {
text-decoration:none;
display:block;
float:left;
width:100px;
color:#fff;
background:#cacaca;
background-image: -moz-linear-gradient(90deg, #525252, #333);
background-image: -webkit-gradient(linear, left top, left bottom, from(#525252), to(#333));
text-shadow:0px 0px 0px #ddd;
border-right:1px solid #909090;
text-align:center;
}

/* ARAMA ALANIMIZIN KODLARINI YAZIYORUZ */

#applenav .apple img {border:0px;}
#applenav .arama {float:left; display:block; width:140px;line-height:32px;margin-left:10px}
#applenav .arama input {
background:#fff url(arama.png) no-repeat left center;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border:1px solid #999;
width:120px;
font:11px arial, verdana, sans-serif;
padding:2px 2px 2px 20px;
color:#999;
}

Css3 Linear Gradient Kullanımı
Efendim yukarıdaki kodları uygun alanlara yazıp kaydettiğinizde Apple.com tarzında bir navigasyon elde etmiş olacaksınız. Uygulamamızı Firefox, Chrome ve Safari tarayıcılarda sorunsuzca görüntüleyebilirsiniz. (Navigasyonumuzda 2 adet resim dosyası kullandık. Bu resimleri de uygulamayı indirerek bilgisayarınızda kullanabilirsiniz) Bu noktada ben Gradient kullanımını biraz açmak istiyorum.

Linear ve Radial Gradient Css3′ün nimetlerinden birisi. Şu anda emin olduğum kadarıyla Mozilla Firefox, Google Chrome ve Safari tarayıcılarda sorunsuzca görüntülenebiliyor. Kullanımı ise oldukça basit. Aşağıya bir örnek kullanımı yazıyorum.

background-image: -moz-linear-gradient(90deg, #848484, #cacaca);

-moz-linear-gradient şeklinde başlattığımız parametremizde parantez içinde öncelikle geçişin açısını yazıyoruz. Burada ben 90 derecelik bir açı kullandım. Sonrasında vermiş olduğumuz renk değerleri ise hangi renkler arasında geçiş olacağını gösteriyor. Ben burada #848484 ile #555 renkleri arasında bir geçiş istedim. Bunun nedeni Apple.com sitesindeki navigasyona renk bakımından yaklaşmaktı. Mozilla için kullanımı temel olarak böyle olan Linear Gradient’in Webkit tabanlı tarayıcılarda kullanımı ise yine aynı mantıkta ama biraz farklı bir yazım şekliyle.

background-image: -webkit-gradient(linear, left top, left bottom, from(#cacaca), to(#848484));

Bu kez tanıma -webkit-gradient şeklinde başladık. Parantez içine yazmış olduğumuz ilk değer gradientin tipini göstermekte. Bu alanda biz linear tanımı ile Linear Gradient kullandık. Dilersek radial diyerek radial gradient’te kullanabiliriz. Yazmış olduğumuz diğer değerler ise geçişin yönünü bildirmekte. Biz örneğimiz için left top, left bottom gibi bir tanımlama yaptık. Sonrasında renk başlangıcını #cacaca’dan #848484′e doğru olmasını istedik.

Gördüğünüz gibi Linear Gradient kullanımı oldukça basit. Bu konuya yönelik yazılmış olan makaleleri incelersiniz değişik kullanımlara ve oluşturulmuş farklı efektlere de ulaşabilirsiniz.

Peki Internet Explorer?
Internet Explorer bildiğiniz gibi Css3′ün hiçbir özelliğini desteklemiyor. IE9′da bu durumun ortadan kalkacağı söylense de ben pek inanmıyorum. Yine de bir Firefox veya Chrome gibi performans ve görüntüleme yetisi beklemiyorum. Neyse konumuz bu değil.

IE için gradient kullanmak istiyorsak Css dosyamıza bir takım filter kodları eklemek zorundayız. Yine tek satır olan bu kodun bir örneğini ben aşağıya yazıyorum.

filter:progid:DXImageTransform.Microsoft.gradient(enabled=’true’,startColorstr=#525252, endColorstr=#333333);

Bu filter sayesinde IE tabanlı tüm tarayıcılar başlangıç renginden (startColor) bitiş rengine (endColor) kadar bir gradient uygulayacaktır. Ben kişisel bilgisayarımda bunu test ettim. Ancak örneğimize dahil etmedim. Siz kullanmak isterseniz dahil edebilirsiniz. IE için tasarım yapmaktan nefret ettiğimi daha önce söylemiş miydim :) İşin şakası bir yana IE’de ekstra kodlar yardımıyla da olsa Linear gradient etkisini oluşturmak mümkün.

Son Olarak
Linear ve Radial Gradient kullanımı ile sadece Apple tarzı değil kendi hayalgücünüze dayanarak birçok güzel menü uygulaması yapabilirsiniz. IE için kullanacığınız Filter ile sorunsuzca IE kullanıcılarına da bunu gösterebilirsiniz. Yazımızı kullanmış olduğum kaynakları listeleyerek sonlandırıyorum. Umarım sizler için faydalı olmuştur. Tekrar görüşmek üzere…

Mozilla Linear Gradient
IE Gradient Filter
Safari Gradient
Introducing CSS Gradients (Safari)

Yazımın başında söylemek istiyorum ki bu konu hakkında söyleyeceğim sözler “evet bu kuraldır, bu iş böyle olur” niteliğinde tanımlar olmayacak. Daha ziyade kendi görüşlerimi sizinle paylaşacağım. Hem t’infection’a artık kişisel yazılarımı da yazacağım dememiş miydim, buyrun kişisel bir yazı :)

Efendim işin şakası bir yana hepimizin öyle ya da böyle içinde olduğu, bir ucundan tuttuğu bir oluşum bu blog denilen şey. Kimimiz bir bloga sahip ve blog yazarı, kimilerimiz ise blog yazmıyor ancak sevdiği blogların sıkı bir takipçisi. Hatta bazılarımız blog denilen şeyin ne olduğunu bilmese bile internette hergün onlarca blog görüyor.

Bloglar artık insanların kendini ifade etmesini sağlayan en büyük mecra. Bir kişinin bildiği konularda yazılar yazdığı, takip edildiği, insanlara faydalı şeyler sunduğu oluşumlar hepimiz tarafından beğenilmekte ve takip edilmekte. Sözlerim yanlış anlaşılmasın bir blog illaki faydalı olacak diye bir kural yok. Bunu örneğimi daha da perçinlemek adına söylüyorum.

Türkiye’de blog kültürü ilk yerleşmeye başladığı dönemden bu yana oldukça büyük gelişmeler kaydedildi. Blog servisleri çoğaldı, blog yazan kişiler çoğaldı, bilginin ve eğlencenin ana unsuru bloglar oldu. Şirketler, kamu kurum ve kuruluşları kendilerini blogları ile ifade ettiler. Kısacası bloglar daha tanıdık bir yüz daha bizden bir tüketim aracı gibi oldular.

Bununla birlikte internet kullancısının blog denilen şeye karşı bilinci de değişti. Önceki zamanlarda bir blog gören kullanıcı kişisel yazıların yazıldığı, bazen komik bir anının paylaşıldığı bir blogu yadırgayabilirdi. Öyle ya özel hayatımızı pek internete döken bir millet değiliz(!) Şimdilerde ise durum bunun tam tersi. İnsanlar blog denilen kavrama ve en çokta blog yazarı kavramına çok aşinalar. Yazımın başlığını “Blog Yazarlığı Anlayışı ve Blog Ödülleri” olarak attım biliyorum. Konuyu fazla dallandırıp budaklandırmadan anlatmak istediğim şeyleri anlatacağım.

Blog yazarlığı ve blog kavramı artık aşina olunan bir durum olsa bile hala tartışılan bir konu. Kim blog yazabilir, kim yazamaz, blogda neler yazılabilir, bir blogda neler olmalı neler olmamalı… Bu soru ve tartışma listesi uzayıp gider.

Nacizane 5 yıldır blog yazan biri olarak benim de bu konuda söylemek istediğim bazı şeyler var. Aslına bakarsanız herkes blog yazabilir. Herkesin blog yazmadaki özgürlüğü gibi blogunda istediği şeyi de yazabilir. Buna bir okuyucu olarak ben karışamam. O blog yazarının sevdiği şeyleri, gördüğü şeyleri, bildiklerini kısacası tecrübelerini aktarması benim için bir rahatsızlık teşkil etmez.

Bu noktada yaşanan tartışmanın tam ortasına düşüyoruz. Blog faydalı olmalıdır, blog öğretici olmalıdır. Bu önermeye kısmen katılıyorum. Neden derseniz blog denilen şeyin oluşumunda illa birşeyler öğretelim, aman millet bunu da öğrensin gibi bir felsefe yatmıyor. Kullanıcıların daha sonra hatırlamak üzere internet üzerinde herhangi bir yere kaydettiği şeylerden bahsediyoruz. Bazen bir web adresi, bazen bir makale, bazen de o gün yaşadığınız enteresan bir olay. Blogların internet çöplüğüne hizmet eden araçlar olmaktan öteye gidemediği durumlarda ise bu söylediğim şeye katılmıyorum. Nitekim bu gibi birçok blogta mevcut. Üstelik bunlar da blog olarak adlandırılıyor. Bu noktada o web sitesine blog demek ve dememek konusunda kendimle çelişiyorum.

Blog yazarlığı aslına bakarsanız kişinin bilgisine, deneyimine, tecrübesine ve dünya görüşüne dayanan birşey. Zaten o blog yazarının bu tip özellikleri olmasa veya bunları bize uygun bir malzeme ile sunamazsa o kişiyi takip etmeyiz. Hangimiz Nahnu’nun veya Eray Endeş’in bloglarına bakmadık, hangimiz Sunipeyk okumadık değil mi? Böyle yazdığım zaman insanlar kinaye yaptığımı düşünebilirler ancak gerçekten bunu samimi olarak yazıyorum. Çünkü benim de hala Rss okuyucumda bu bloglar kayıtlıdır ve tüm yazılarını takip ederim. Sadece bu saydığım isimler değil, Türkiye’deki birçok blogu yakından takip ediyorum ve izliyorum. Blogları okumak hoşuma gidiyor, ne de olsa ben de bir blog yazarı sayılırım (İşte bakın burada kendime karşı kinaye yaptım, benden de blog yazarı oluyorsa :)

Hem blogları sıkı takip eden biri hem de blog yazmaya çalışan birisi olarak yaşanan bazı şeyler bana oldukça saçma geliyor. Olaya iki açıdan da objektif bir şekilde bakmaya çalışıyorum.

Blog Yazmanın da Blog Yazarı Olmanın da Kuralı Yoktur!
Blog denilen hadisenin veya etrafında dönen tartışmaların odak noktası bu bana kalırsa. Her durumda olduğu gibi bu durumda da bir takım kurallar koyuyoruz kendimize. Daha doğrusu bu kuralların etrafında hareket etmeyi seviyoruz.

Aynı durum blog yazarlığı için de geçerli. Blog yazarı olmanın bir kuralı yok! Bir insan internet bağlantısı olan herhangi bir bilgisayarda hür ve özgür irade ile ücretsiz bir blog servisinden kullanıcı adını, blog adını seçip blog yazmaya başlayabilir. Bu kişinin yazdığı blogu okuyup okumamak, yazılarını tasvip edip etmemek size kalmış birşey. Unutmayın internet kullanıcısı olarak böyle bir hakkınız var.

Blogu ya da blog yazarını kalıplar içine almaya çalışmak, blog bu değil(!) mantığı ile yaklaşıp kişileri yargılamak hiç hoş değil. Bunu yapan bazı arkadaşları görüyorum ve bu durumda oldukça üzülüyorum. Neden bu biçime sığma çabası? Bence gereksiz…

Peki BÖ!?
Efendim, son birkaç yıldır yapılan bir organizasyon var malumunuz. Blog Ödülleri adı altındaki bu yarışma ile her sene belli kategorilerde bloglar yarışıyor. Bu tür organizasyonların olduğu dönemlerde yazımın konusu olan blog tartışmaları da daha çok alevleniyor.

Çünkü insanlar yarışmada yapılan bir takım şeyleri beğenmiyorlar. Bazı noktaları kusurlu buluyorlar. Olumlu ve olumsuz eleştirilerini sıralıyorlar. Bunlar bana kalırsa yapılan bu tür organizasyonların ilerlemesi ve daha iyi olması açısından iyi şeyler. Ancak dozunda olmak kaydıyla. Hakaretamiz tabirlerle, karşıdaki kişinin kalbini kıracak şekilde söylemlerle olmamak kaydıyla…

Yazımı buraya kadar takip ettiyseniz benim BÖ! hakkında düşüncelerimi de merak ediyorsunuzdur. Bunları da açık bir şekilde dile getirmek istiyorum.

t’infection.com’da Blog Ödülleri şeklinde arama yaparsanız Blog Ödüllerinin kazananlarını duyurduğum, blog ödülleri kayıt ve işleyiş zamanlarını bildirdiğim birkaç yazıma rastlayabilirsiniz. Bu tür organizasyonların blog camiası için verimli olacağını düşündüğüm için hemen bunları sitemde duyuruyor ve insanları bilgilendiriyordum. Sanıyorum ilk olarak 2008 yılında başlayan bu organizasyona t’infection olarak ilk yıl aday olmuştuk. Geçtiğimiz yıl ise aday olmadım. Hatta buraya da aday olmayacağımı yazmıştım.

Geçtiğimiz yıl aday olmamamın birçok nedeni vardı aslında. Organizasyonda gördüğüm eksiklikler bunun başında geliyordu. İşleyiş, kategorilendirme, kabul edilme şartları gibi konularda kafamda bazı soru işaretleri vardı. Bunlarla birlikte asıl önemli nokta; t’infection’u hala umduğum gibi verimli bir blog haline getirememiştim. Belki bu konuda bana katılmayabilirsiniz ancak bu blogun kurucusu ve yazarı olarak ben öyle düşünüyorum. Nitekim bol uygulama yazılarının olduğu, insanlara gözle görülür bir takım materyallerin sunulduğu, mümkün olduğunca özgün içeriğin barındırıldığı bir blog olma çabamı yerine getirdiğimi düşünüyorum. En azından yeni versiyonumuza geçtiğimiz v6 döneminden bu yana durum böyle. Bu konuda takdir siz sevgili okurların ve takipçilerin.

BÖ! Sev, BÖ! Eleştir!
Bu yıl yine BÖ! yarışma takvimini takip ettim. Adaylık sürecinde t’infection.com’u aday olarak gösterdim. Bundan artık organizasyonun eksiklerinin giderildiği ve yarışmaya bu şekilde aday olduğum sonucu çıkarılmasın. Açıkyüreklilikle söylüyorum ki t’infection.com’u artık bir blog olarak görebildiğim için bu organizasyona katıldım.

Blog Ödülleri yarışması bu yıl biraz daha renkli gibi geldi bana. Örneğin Blog Ödülleri’nin tanıtımı için yapılmış olan reklam filmleri. Bu bir blog yazarı olarak beni çok sevindirdi. Yekta Kopan’ın sesinden o reklamları izlemek hoştu doğrusu. Ayrıca geniş sponsor desteğinin yarışmaya olan etkisini de görmek mümkün. Büyük firmaların bloglara verdiği desteği görmek güzel. Bu yılki kategorilendirme biraz daha iyileştirilmiş gibi üstelik.

Organizasyonun mutlaka eksikleri var. Hem de acımasızca eleştirmek istediğim birçok noktası mevcut. Bunlardan bir tanesi kategoriler içinde yer alan ve o kategoriye gerçekten uygun olmadığını düşündüğüm bloglar. Bir başkası yarışmaya aday olan blogların uygun eleminasyona tabi tutulmaması. Bazen bölümlere bakıyorum da o bölüme uymayan birçok blog var. Sırf bu yüzden onlarca blog bir kategori içinde aday olabiliyor. Bu yıl yarışmaya katılan 1800 blog var biliyor musunuz? Şimdi bir kullanıcı olarak ben tüm blogları nasıl inceleyip oy vereceğim, oyumu vereceğim bloga nasıl karar vereceğim? E bunların olmaması gerekir işte bu tür bir yarışmada.

Hediye konusunu ise hiç açmak istemiyorum ama ne yapayım açmış bulundum bir kere. Bana kalırsa bu tür bir yarışmada kazanan bloglara hediye falan vermeyin. O zaman bu gibi bir yarışmanın amacı o hediyeyi kazanmak oluyor. Bu durum da hiç hoş birşey değil bana göre. Hediye mediye olmasa da olur. Orada kullanıcıların oyuyla seçilen o blogun yazarına veya yazarlarına vereceğiniz bir plaket onlara yeter de artar bile. Yahu ne yapayım ben Ülker’den kucak dolusu hediye paketini… Bisküvi, gofret yiyerek blog yazmaya devam mı edeyim? Yok yok bu konuyu uzatmayayım en iyisi…

Son Olarak
Yazımın sonunda yine hatırlatıyorum. Benim Blog yazarlığı ve BÖ konusunda kişisel görüşlerimi okudunuz. Bana katıldığınız veya katılmadığınız noktalar olabilir. Bunları yorumlarınızla yazarsanız çok sevinirim. Blogküre konusunda ahkam kesmek benim haddime değil ancak gördüğüm eksikleri de bildirmek boynumun borcu. Eğer blog yazdığımı düşünüyor ve blog yazarı olduğumu söylüyorsam bunu yapmak zorundayım.

Üstelik Türkiye’de hem internet medyasında, hem de blog yazarlarının kendi arasında bu tartışmalar hiç bitmeyecek. Belki yön değiştirecek ama yine benzer ifadeler ve tanımlamalar etrafında dolanacağız. Maalesef bu böyle.

Bu aşamada düzenlenen Blog Ödülleri yarışmasını lütfen eleştirin. Eleştirin ki her yıl daha iyi bir organizasyon görelim. Ama yazımın içinde söylediğim gibi düzeyli ve karşımızdakini kırmayacak şekilde.

Yarışmayı düzenleyenleri böyle bir yükümlülüğün altına girdikleri ve eleştirilere katlandıkları için kutluyorum. İnşallah kazanan Türk Blogküresi olur… İnşallah kazanan blog yazarları olur…

Saygı ve sevgilerimle efendim…
Volkan KARAKUŞ

Youtube’da üye girişi yaptıktan sonra üst sağ alanda yer alan navigasyon sadeliği ve etkili görünümü ile çok hoşuma gitti. Bu yazımızda bu tarz bir menü sistemini basit kodlar yazarak nasıl yapabileceğimizi anlatacağız.

UYGULAMA ÖNİZLEME UYGULAMA İNDİR (8kb)

XHTML
Öncelikle her zaman olduğu gibi Xhtml kodlarımızı yazarak başlayalım.

<div id="youmenu">
<ul>
<li><a href="#">Anasayfa</a></li>
<li><a href="#" class="menu">Seçenekler<span>ok</span></a>
<ul class="menualani">
<li><a href="#">Hesabınız</a></li>
<li><a href="#">Mesajlarınız</a></li>
<li><a href="#">Favorileriniz</a></li>
<li><a href="#">İzledikleriniz</a></li>
</ul>
</li>
<li><a href="#" class="cikis">Oturumu Kapatın</a></li>
<br style="clear:both" />
</ul>
</div>

CSS
Şimdi menümüzün görünümünü düzenleyecek olan Css kodlarımızı yazıyoruz.

/* MENÜ STİLLERİMİZİ TANIMLAMAYA BAŞLIYORUZ */

#youmenu {
font:13px arial, verdana, sans-serif;
display:block;
}

/* Menü bağlantılarımızı tanımlıyoruz... */
#youmenu ul a {
text-decoration:none;
color:#333;
display:block;
margin:0px 5px 0px 5px;
padding:4px 10px 4px 10px;
background:#fff;
border-top:1px solid #fff;
border-left:1px solid #fff;
border-right:1px solid #ccc; /* Sağ tarafta 1px solid bir kenarlık bırakıyoruz. */
border-bottom:1px solid #fff;
outline:none;
zoom:1;
}

#youmenu ul a:hover {
text-decoration:none;
color:#333;
display:block;
margin:0px 5px 0px 5px;
padding:4px 10px 4px 10px;
background:#fff url(menuarkaplan.png) repeat-x; /* Arkaplan resmimizi tanımladık */
border:1px solid #666;
outline:none;

-moz-box-shadow:0px 0px 4px #333; /* Fare üzerine gelince bağlantı alanımızın biraz gölge kazanmasını sağlıyoruz */
-webkit-box-shadow:0px 0px 4px #333; /* Gölge işlemini Chrome ve Safari için yapıyoruz. */
box-shadow:0px 0px 4px #333; /* Opera'yı da unutmayalım :) */

/* IE için gölge işlemini yapıyoruz, bundan sonraki alanlarda yer alan gölge tanımlamalarını IE için yine aynı şekilde yapacağız. */
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#333333, offX=1, offY=1, positive=true);
zoom:1;
}

#youmenu li, #youmenu ul {
float:left;
position:relative;
margin:0px;
padding:0px;
list-style:none;
display:block
}

#youmenu li ul { /* Menümüzün alt birimlerini display:none tanımıyla gizliyoruz */
display:none;
position:relative;
}

/* Menümüzde açılacak olan bağlantı birimini işaret etmesi için span etiketine bazı değerler atıyoruz */
#youmenu span {
background-image: url("ok.png") ;
background-repeat:no-repeat;
background-position: center right;
display:block;
float:right;
padding:0;
margin:0;
width:16px;
height:16px;
text-indent:-9999px;
}

/* Bu alandan sonra yapılan tanımlamalar açılır menümüz için... */

#youmenu ul.menualani {
border:1px solid #333;
display:none;
position:absolute;
padding:0px;
margin:2px 0px 0px 5px;
list-style:none;
-moz-box-shadow:0px 1px 2px #666;
-webkit-box-shadow:0px 1px 2px #666;
box-shadow:0px 1px 2px #666;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#333333, offX=1, offY=1, positive=true);
zoom:1;
}

#youmenu ul.menualani a {
display:block;
color:#666;
float:left;
text-decoration:none;
background:#fff;
width:120px;
padding:4px;
margin:0;
border:none;
}

#youmenu ul.menualani a:hover {
display:block;
color:#333;
float:left;
text-decoration:none;
background:#eaeaea;
width:120px;
padding:4px;
margin:0;
border:none;
-moz-box-shadow:0px 0px 0px #333;
-webkit-box-shadow:0px 0px 0px #333;
box-shadow:0px 0px 0px #333;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#333333, offX=0, offY=0, positive=true);
zoom:1;
}

#youmenu a.cikis {color:#2e83ff;border:1px solid #fff}
#youmenu a.menu {color:#333}

jQUERY
Son olarak menümüze dinamik etkisini katacak olan jQuery kodlarını yazıyoruz.

<script>
$(document).ready(function () {	

	$("a.menu").click(function () {
    $(".menualani").slideToggle(100);

    });
});
</script>

Neler Yaptık?
Bu aşamaya kadar neler yaptığımızdan kısaca bahsetmek istiyorum. Menümüze Youmenu ismini verdiğimiz bir id tanımlayarak başladık. Sonrasında klasik bir Ul Li menü kodu yazdık. Bu menü içinde alt menü şeklinde görünmesini istediğimiz ana menü bağlantımıza class=”menu” şeklinde bir sınıf tanımı verdik. Bu tanımdan daha sonra yararlanacağız. Alt menülerimizin stil tanımlamasını ise “menualani” isimli sınıfımızla yaptık. Menümüz bu aşamaya kadar klasik bir menü görünümü ve özelliği taşımakta.

İşte klasik bir görünüm ve özellikte olan bu menümüzü Css ile şekillendireceğiz. Css kodlarının uzunluğundan bu uygulamanın aslında tamamen Css’de bittiğini söyleyebilirim. Zira hem Xhtml hem de jQuery kodlarımız oldukça kısa.

Css tanımlamalarında dikkat edeceğiniz nokta #Youmenu isimli id içinde tanımladığımız A etiketi. A etiketinin görünümünü tıpkı Youtube sitesinde olduğu gibi düzenledik. Bu görünümü oluşturabilmek için Css3′de tanımlanan box-shadow parametresinden yararlandık. Bu parametreyi uzun uzadıya anlatmayacağım. Çünkü Yatay Gölge Menü Yapımı isimli yazımızda uzunca bu parametreden bahsettik. Dilerseniz o yazıdan yararlanabilirsiniz.

Menümüzde açılacak olan bağlantıya vurgu yapabilmek adına Span etikene bir takım tanımlamalar yaptık. Burada ben Youtube tasarımına benzetebilmek için bir aşağı ok kullandım ve bunu arkaplan resmi olarak tanımladım. Uygun değerleri verdikten sonra açılmasını istediğim menü birimine Xhtml koduyla ekledim. Biraz karışık gelebilir ama kodları incelerseniz ne kadar kolay olduğunu görürsünüz.

Menümüzün alt birimlerini ise Ul etiketi için oluşturduğumuz menualani isimli sınıfta tanımladık. Bu alanda alt menülerimizin nasıl bir görünüme sahip olacağını belirledik.

İşin jQuery boyutunda ise menümüzün açılır hale gelmesi için çok kısa bir kod kullandık. Sanıyorum daha önceki yazılarımızdan birinde de jQuery’nin slideToggle fonksiyonundan yararlanmıştık. jQuery kodunda görebileceğiniz gibi daha önce tanımladığımız menu sınıf ismine sahip a etiketine tıklanınca menualani isimli sınıfın slayt şeklinde açılmasını istedik. Uygulamanın en kolay noktası bu galiba :)

Tarayıcı Uyumu
Şayet Css kodlarını incelediyseniz box-shadow etkisini Internet Explorer’da yakalayabilmek için filter kullandığımı görürsünüz. Aslına bakarsanız bu durumdan nefret ediyorum. Çünkü IE gibi ilkel bir tarayıcıya hala tasarımlarımızı anlatmak, kanıtlamak zorunda olmamız hiç hoşuma gitmiyor. Ne yazık ki ziyaretçilerimizden gelen talep bu yönde. Bundan sonraki yazılarda elimden geldiğince bu konuya dikkat edeceğim.

IE engelini de aştıktan sonra rahatlıkla söyleyebilirim ki bu uygulamamız tüm tarayıcılarda hemen hemen benzer şekilde görünecektir. Ben kontrollerimi yaptım ama sizler de kendi tarayıcılarınızda test ederseniz sevinirim.

Umarım sizler için faydalı olmuştur. Bir diğer makalemizde görüşmek üzere.

UYGULAMA ÖNİZLEME UYGULAMA İNDİR (8kb)

Bu 4 yıllık zaman sürecinde bizi yalnız bırakmayan siz ziyaretçilerimize ve takipçilerimize teşekkür ediyorum. Bu vesileyle önümüzdeki dönemde t’infection’da bir takım değişiklikler düşünüyor ve bunları sizinle paylaşmak istiyorum.

Açıkçası 4 yıllık bir dönemi bitirip 5. yıla ne zaman adım attık bilemiyorum. Bana bu siteyi açtığım ilk günler hala dün gibi geliyor. Geçmişe dönüp baktığımızda az da olsa faydalı şeyler yaptığımızı düşünüyorum. Umuyorum siz değerli ziyaretçilerimiz de benimle aynı fikirdedir.

Yazımızın giriş bölümünde belirttiğim gibi önümüzdeki dönemlerde t’infection’da neler yapmak istediğime dair bir takım bilgiler vermek istiyorum. Son 1 yıllık dönemde (belki daha uzun) sürekli uygulama yazıları ve makaleleri yayınlıyorum. Ziyaretçilerimizden ve takipçilerimizden aldığım geribildirimler ışığında bu tarz yazıların oldukça faydalı olduğunu anlıyorum. Ancak birçok ziyaretçimiz ve blog yazarı arkadaşımız kişisel yazılarımı neden burada yazmadığım konusunda bana sorular soruyorlar.

t’infection.com açıldığı ilk dönemlerde buraya kişisel yazılarımı giriyordum. Ancak daha sonra bu alışkanlığımdan vazgeçip kişisel yazılarım için başka bir blog açmıştım. Sonradan açtığım blogda da pek fazla kişisel yazı yazabildiğim söylenemezdi. Çünkü tüm enerjimi t için harcıyordum. Hal böyle olunca kişisel blog olarak devam ettirmeyi düşündüğüm mecralar bir bir kapandı. Yakın zamanda bir kişisel blog girişimim daha oldu ancak oraya da sık sık yazdığım söylenemez.

Bu dönemde fazla abartıya kaçmamak kaydıyla kişisel yazılarımı da t’infection üzerinde yazmayı düşünüyorum. Ziyaretçilerimiz son dönemlerde burada bu tarz yazılara pek alışık değiller biliyorum. Zaten sizlerin affına sığınarak böyle bir karar alıyorum.

Bu döneme kadar hep yanımızda olan siz ziyaretçilerimize teşekkür etmek istiyorum. İlginizi eksik etmediğiniz için sizlere minnettarım.

Blog yazarı arkadaşlarımı da unutmamak gerekiyor. Onlarla da çok güzel ilişkilerimiz ve dostluklarımız oldu. Umuyorum ki bu dostluğumuz hep baki kalır.

(Sevgili dostum, arkadaşım Cihan’a ayrıca bir parantez açmak istiyorum. Sitemizde zaman zaman yazılarını da gördüğünüz ve bu zamana kadar t’infection’un teknik altyapısındaki tüm sorumluluğu üstlenen dostuma da bu vesile ile teşekkür ediyorum. Yıllardır t’infection.com Güzelhosting bünyesinde barınıyor ve bu döneme kadar birkaç küçük sorun dışında hiç sorun yaşamadık. Teşekkür ederim Cihan :)

t’infection.com kurucusu Volkan Karakuş

Bu uygulamamızda Css3, Xhtml ve jQuery ile ikon destekli dikey (vertical) tab menü (veya tab navigasyon da diyebiliriz) uygulaması yapacağız. Tab menümüzü oluşturduğumuz aşamaları da makalemiz sonunda sizlerle konuşacağız. Dilerseniz hemen kodlarımızı yazmaya başlayalım.

UYGULAMA ÖNİZLEME UYGULAMA İNDİR (16kb)

<div id="menualani">
<div class="ikonalani">

<a href="#" class="ikon1 aktifikon">ikon 1</a>
<a href="#" class="ikon2">ikon 2</a>
<a href="#" class="ikon3">ikon 3</a>

</div>

<div class="icerikalani">
<div class="icerik1 goster"><h2>KATEGORİLER</h2>
<ul>
<li><a href="#">XHTML / CSS</a></li>
<li><a href="#">JAVASCRIPT</a></li>
<li><a href="#">DREAMWEAVER</a></li>
<li><a href="#">PHOTOSHOP</a></li>
<li><a href="#">PHP / MYSQL</a></li>
<li><a href="#">WORDPRESS</a></li>
<li><a href="#">KISA KISA</a></li>
<li><a href="#">GENEL KONULAR</a></li>
</ul>

</div>
<div class="icerik2">
<h2>HAKKIMIZDA</h2>
<p>Sitemiz hakkında verebileceğimiz kısa bir tanıtım cümlesi ve girişi bu alana yazabiliriz. Bu alandaki yazıyı içerik2 isimli div sınıfı içine yazıyorum. </p>

<p><a href="#">Hakkımızda</a> <a href="#">RSS Takip</a></p>

</div>
<div class="icerik3">
<h2>BİZİ TAKİP EDİN!</h2>
<p>Aşağıdaki bağlantılardan yararlanarak bizi farklı sosyal medya sitelerinde takip edebilirsiniz. </p>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Friendfeed</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Flickr</a></li>
<li><a href="#">Youtube</a></li>
</ul>
</div>

</div>
</div>

Şimdi Xhtml kodlarımızın görünümünü düzenleyecek olan Css kodlarımızı yazalım.

#menualani {width:300px;display:block;float:left}

/* Menümüzün ikon alanını aşağıda tanımalamaya başlıyoruz. Sonrasında her bir menü ikonumuzu tanımlayacağız. */
.ikonalani {width:42px;display:block;float:left;position:relative;z-index:999;}

/* ikon1, ikon2 ve ikon3 için ortak stil tanımlaması yapıyoruz. Özelleştirmeleri aşağıdaki kodlarda işleyeceğiz */
/* text-indent:-9999px değeri ile ikonlarımızdaki metin bağlantıları ortadan kaldırıyoruz */

a.ikon1, a.ikon2, a.ikon3 {
text-decoration:none;
display:block;
outline:none;
text-indent:-9999px;
width:40px;
height:40px;
}

/* Şimdi ikonlarımız için özel olarak arkaplan resmi tanımlıyoruz. */

a.ikon1 {
background:#fff url(resim1.png) no-repeat center center;
margin-top:10px;
}

a.ikon2 {
background:#fff url(resim2.png) no-repeat center center;
}

a.ikon3 {
background:#fff url(resim3.png) no-repeat center center;
}

/* Menümüzde aktif olarak görünecek olan ikonu .aktifikon sınıfı içinde tanımlıyoruz. Parametrelere dikkat! */

a.aktifikon {

background-color:#ddd;
width:40px;
height:40px;
border-top:2px solid #bbb;
border-left:2px solid #bbb;
border-bottom:2px solid #bbb;
border-right:2px solid #ddd;
display:block;
-moz-border-radius:6px 0px 0px 6px; /* Firefox için köşe yuvarlatalım */
-webkit-border-radius:6px 0px 0px 6px; /* Google Chrome ve Safari için köşe yuvarlatalım */
border-radius: 6px 0px 0px 6px; /* Opera için köşe yuvarlatalım */
}

/* BU ALANDAN SONRA İÇERİK ALANIMIZI TANIMLAMAYA BAŞLAYACAĞIZ... */

/* İçerikalaninin z-index'ini ikon alanından daha düşük bir sayıyla tanımlayarak daha altta kalmasını sağlıyoruz... */
/* z:index:1 */

.icerikalani {width:250px;background:#f5f5f5;float:left;position:relative;z-index:1;display:block}

/* Dikkat! Tüm içerik isimli alanları display:none ile gizliyoruz */
.icerik1, .icerik2, .icerik3 {display:none}

.icerik1, .icerik2, .icerik3 {
background:#ddd;
color:#fff;
height:300px;
top:48px;
border:2px solid #bbb;
margin-left:0px;

/* Bu kez her bir içerik alanımız için köşe yuvarlatıyoruz. Tabiki farklı tarayıcılar için farklı kodlarla :( */
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius: 6px;
}

/* Daha önce gizlediğimiz tüm icerik alanlarına bu sınıf eklenerek görünür hale gelecek. */
/* display:block bu gösterim için yeterli */
.goster {display:block;}

/* Bu alandan sonraki kodlar icerik isimli sınıfı güzel bir görünüme kavuşturmak için oluşturduğum css kodları */
/* Genel olarak başlık, sırasız liste [menümüz], paragraf ve bağlantı etiketlerini .icerikalani sınıfı içinde tanımladım */

.icerikalani h2 {font:bold 16px arial, verdana, sans-serif;padding:0px 10px 0px 10px;color:#333;text-shadow:0px 1px 2px #fff}
.icerikalani ul {list-style:none;margin:0;padding:0px 10px 0px 10px;}
.icerikalani li {padding:0;margin:0}
.icerikalani ul li a {text-decoration:none;color:#333;background:#ddd;font:12px arial, verdana, sans-serif;border-top:1px solid #eee;border-bottom:1px solid #ccc;padding:6px;margin:0;display:block}
.icerikalani ul li a:hover {text-decoration:none;color:#fff;background:#333;font:12px arial, verdana, sans-serif;border-top:1px solid #ccc;border-bottom:1px solid #aaa;padding:6px;margin:0;display:block;text-shadow:0px 1px 2px #fff;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius: 4px;
}
.icerikalani p {font:13px/24px arial, verdana, sans-serif;padding:0px 10px 0px 10px;color:#666;}
.icerikalani p a {padding:4px;background:#2e83ff;color:#fff;text-decoration:none}
.icerikalani p a:hover {padding:4px;background:#666;color:#fff;text-decoration:none}

Menümüzün fare ile tıklanışında yapacağı değişiklikleri jQuery yardımı ile tanımlayalım.

<script>
$(document).ready(function() {

	$("a.ikon1").click(function() { // ikon1'e tıklandığında neler olacak?

		$(".icerik1").addClass("goster");
		$(".icerik2, .icerik3").removeClass("goster");

		$("a.ikon1").addClass("aktifikon");
		$("a.ikon2, a.ikon3").removeClass("aktifikon");

        return false;

		});

	$("a.ikon2").click(function() { // ikon2'ye tıklandığında neler olacak?

		$(".icerik2").addClass("goster");
		$(".icerik1, .icerik3").removeClass("goster");

		$("a.ikon2").addClass("aktifikon");
		$("a.ikon3, a.ikon1").removeClass("aktifikon");

		return false;

		});

	$("a.ikon3").click(function() { // ikon3'e tıklandığında neler olacak?

		$(".icerik3").addClass("goster");
		$(".icerik1, .icerik2").removeClass("goster");

		$("a.ikon3").addClass("aktifikon");
		$("a.ikon2, a.ikon1").removeClass("aktifikon");

        return false;

		});

	});
</script>

Uygulamamızın Detayları
Bu kadar kod yazdıktan ve uygulamayı oluşturduktan sonra ne yaptığımız anlatmamak olmaz değil mi :)

Öncelikle bu uygulamanın ne gibi bir zemin üzerine kurulduğunu anlatalım. Xhtml kodlarında dikkat ettiğiniz gibi iki tane ana sınıf bulunmakta. Bunlardan birisi sadece ikonlarımızın yer aldığı “ikonalanı” ve diğeri ise içeriğimizi yerleştirdiğimiz “icerikalanı” isimli sınıflar.

İkonalanı isimli sınıfımızda belli bir genişlik içinde ikonlarımızın alt alta yer almasını istedik. Ayrıca bu alanda yer alan her bir ikonumuza ikon1, ikon2 ve ikon3 diye ayrı ayrı sınıflar oluşturduk. Kodları optimum düzeyde kısaltma adına ikonların görünümündeki ortak özellikleri tek bir Css kodunda topladık. Css kodlarında yazmış olduğum açıklamalara ve kodlara dikkat ederseniz bunu görebilirsiniz.

Bu noktada önemli olan şu ki; hangi ikona tıklanırsa tıklansın o ikon jQuery yardımı ile “aktifikon” isimli Css sınıfını kazanmakta. Aktifikon isimli Css sınıfını içerikalanı isimli sınıfımıza göre görünüm olarak düzenleyip menü de bir bütünlük olmasını sağladık. Yine kodlar üzerinde bunu görebilirsiniz.

Bu aşamadan sonra içeriğimizin görüneceği ana alan olan “içerikalanını” tanımlaya geldi. Yine içerik alanı da belli bir genişlik içerisinde girmiş olduğumuz içerikleri gösteren alan olarak görevini yapacak. Dikkat çektiğimiz nokta şu; nasıl ki ikonalanında her bir ikon için ikon1, ikon2 ve ikon3 diye sınıflar oluşturduysak aynısını içerik alanı içerisinde de yapıyoruz.

Burada oluşturduğumuz icerik1, icerik2 ve icerik3 isimli div sınıfları fare ile hangi ikon sırasına tıklanırsa aynı ikon sırasıyla görünecek. Oldukça basit değil mi.

Yazdıklarımızı toparlayacak olursak iki ana sınıf içinde sıralı şekilde ikon1-icerik1, ikon2-icerik2 ve ikon3-icerik3 alanlarını tanımladık. Bu alanların görünümlerini Css’de uygun parametre ve değerler ile zenginleştirdik. Şimdi iş her bir ikona tıklayışta içeriğimizin nasıl değiştiğini anlatmaya geldi.

jQuery Aşamasında Ne Yaptık?
Uygulamamızın en kolay ve belki de en can alıcı noktası da burası. Yazmış olduğumuz jQuery kodlarını incelerseniz sonuca nasıl gittiğimizi anlayabilirsiniz.

İlk ikon sıramızda ne gibi bir işlem yaptığımızı anlatalım. İkon1 isimli ikonumuza tıklandığında gerçekleşecek olan olayları sırayla tanımladık. İkon1′e tıklandığında jQuery’nin addClass ve removeClass fonksiyonlarından yararlanarak diğer alanlarımızın Css sınıfı almasını ve/veya bunu kaldırmasını sağladık. Adından da anlaşılacağı gibi addClass bir ögeye sınıf eklemeye, removeClass ise tam tersi sınıf kaldırmaya yarıyor.

Şöyle ki; İkon2′ye tıklandığında önceden görünür halde olan icerik1 ve ikon1 isimli sınıflarımız yaptığımız tanımlamaya göre “goster” ve “aktifikon” isimli Css sınıfını kaybettiler. Bununla birlikte hem ikon2 hem de icerik2 isimli alanlarımız goster ve aktifikon sınıfını kazandılar. Mantığı gayet basit olan bu yöntemi her 3 durum için de uyguladık. Uzun lafın kısası 1 görünürken 2 ve 3 gizlensin ve sınıf kaybetsin, 2 görünürken 1 ve 3 gizlensin ve sınıf kaybetsin :)

(Aslına bakarsanız bu tarz bir olay gelişimi için farklı yöntemler kullanılabilir. Fakat ben jQuery’nin az kod çok iş mantığına bağlı kalarak kodları elimden geldiğince kısa tuttum)

Tarayıcı Uyumu
Yine geldik o malum şarkıya :) Uygulamamız Firefox, Google Chrome, Safari ve Opera ile sorunsuz çalışacaktır. IE türevleri içinse durum biraz farklı. IE üzerinde sadece yuvarlak köşeler görünmeyecek ama uygulama sorunsuz çalışacaktır. IE üzerinde köşeleri yuvarlatmak için farklı yöntemler mevcut ancak ben örneğimiz üzerinde böyle bir ekleme yapmadım. Dilerseniz kaynak kodlarda değişiklik yaparak IE için farklı görünümler ortaya çıkarabilirsiniz.

Son Olarak…
Uygulama üzerinde veya kod aşamasında atladığım, eksik bulduğunuz noktalar olursa lütfen yorumlarınızla beni bilgilendirin. Umarım sizler için faydalı bir anlatım ve doküman olmuştur. Bir başka makalemizde görüşmek üzere.

UYGULAMA ÖNİZLEME UYGULAMA İNDİR (16kb)

Bu makalemizde Css3 Transform (dönüştürme) işlemlerinin ne olduğunu ve nasıl kullanıldığını anlatacağız. Rotate, Translate, Skew ve Scale gibi özelliklerden bahsedecek ve örneklerle kodlarımızın nasıl çalıştığını göreceğiz.

BAŞLAMADAN ÖNCE
Konumuza geçmeden önce biraz Css 2d Transform hakkında bilgi vermek istiyorum. Transform Türkçe karşılığı olarak Dönüştürme anlamına gelmektedir. Bu tanımdan da şu anlaşılıyor ki Css ile web elementlerimizi belli bir biçimden başka bir biçime dönüştürebiliyoruz. Örneğin Rotate ile web elementlerimizi belli bir derecede döndürebiliyoruz, Skale ile belli bir boyuta ölçekleyebiliyoruz. Bu özelliklerin hepsini makalemizin ilerleyen bölümlerinde tek tek anlatacağız.

Web elementlerinin dönüştürme işleminde temel alınan nokta X ve Y eksenlerinde (X ekseni yatay [horizontal] konumu Y ekseni dikey [vertical] konumu temsil etmektedir) verilen uygun değerlerdir. Şimdi dilerseniz kısaca bu özelliklere ve nasıl kullanılacağına geçelim.

(Hemen söylemeliyim ki makalemizde yapmış olduğumuz örnekleri Firefox 3.6, Safari 4.04, Opera 10.50 ve Google Chrome 4.0.249 tarayıcılar ile sorunsuzca görüntüleyebilirsiniz. Her bir örneğin içerisinde tarayıcılar için uyumlu Css kodunu da yazacağız)

ROTATE (Döndürme)
Rotate parametresi ile web ögelerini belli bir açı içerisinde döndürebiliyoruz. Bu açı bizim belirlediğimiz bir pozitif veya negatif değer olabilir. Şimdi aşağıda bir örnek uygulama yapalım ve sonucunu test edelim.

<div style="background:#2e83ff;
border:4px solid #9a9;
width:100px;
height:100px;
margin:100px;
-moz-transform: rotate(45deg); /* Firefox için */
-webkit-transform: rotate(45deg); /* Safari ve Google Chrome için */
-o-transform: rotate(45deg); /* Opera için */
"></div>

Yazılan kodun şimdi nasıl göründüğünü buradan test edelim.

Örnek kodumuzda bir div etiketine inline (dahili) olarak stil ataması yaptık. Önce arkaplan rengini sonra kenarlığını, en ve boy oranlarını tanımladık. Sonrasında döndürme için gerekli olan Css parametremizi yazdık. -moz-transform: rotate(45deg); şeklinde verdiğimiz atama ile alanı 45 derece döndürmüş olduk. Rotate sonrasında parantez içine web ögesini kaç derece döndürmek istiyorsak bunu xxdeg şeklinde yazıp parantezi kapatıyoruz. Dilerseniz bu değeri başına – işareti koyarak negatif olarakta verebilirsiniz. -webkit-transform: rotate(-45deg) gibi.

Aynı uygulamayı paragraf ve başlık etiketi gibi block etiketlerde de yapmamız mümkün. Kodlarımızda herhangi bir değişiklik olmadan aynı şekilde uygulayabiliriz. Hemen bir örnek kod daha yazalım ve test edelim.

<p style="background:#eee;
border:4px solid #9a9;
color:#666;
-moz-transform: rotate(40deg);
-webkit-transform: rotate(40deg);
-o-transform: rotate(40deg);
width:200px;
height:200px;
margin:100px;
display:block;
float:left;
padding:5px;
font:16px/24px arial, verdana, sans-serif;
">

p etiketi içine yazmış olduğumuz bu yazı 40 derece dönmüş olmalı...

</p>

Örneğimizin çalışır halini buradan test edebilirsiniz.

SCALE (Ölçekleme, Ölçeklendirme)
Transform işleminin bir başka parametresi de Scale. Scale Türkçemize Ölçekleme olarak çevrilebilir. Kısaca izah etmek gerekirse Css’de bir ögeyi X ve Y eksenlerinde belirli oranlarda boyutlamaya yarayan bir atamadır. Bu konuyu bir küçük örnek ile anlatmak daha doğru olacaktır.

<div style="
height:100px;
width:100px;
display:block;
float:left;
background:#2e83ff;
-moz-transform: scale(2, 4);
-webkit-transform: scale(2, 4);
-o-transform: scale(2, 4);
position:absolute;
top:200px;
left:200px;
">&nbsp;</div>

Örneğin çalışır halini buradan izleyebilirsiniz.

Örneğimizde kullandığımız kodda 100 piksel eninde ve 100 piksel boyunda bir div etiketini tanımladık. Scale(2, 4) şeklinde verdiğimiz değer sayesinde 100 piksellik yatay ekseni 2 katına büyüttük. Yani artık width değeri 200 piksel oldu. (100*2=200 piksel) Aynı şekilde Y ekseninde ise 4 kat bir büyüme istedik. Bu sayede height değeri ise 400 piksel oldu. (100*4=400 piksel)

Scale parametresini kullanırken verdiğimiz ilk değer X eksenini sonraki değer ise Y eksenini ifade etmekte. Dilersek sadece X veya sadece Y değerini de ölçekleyebiliriz. Bunun için scaleX(5) veya scaleY(2) gibi bir değer kullanmamız yeterli olacaktır.

Şayet hem X hem de Y ekseninde aynı oranda bir ölçekleme yapacaksak o zaman tek bir rakam değeri yazıyoruz. Örnek olarak scale(4); şeklinde bir kullanımda en ve boy olarak 4 katı bir büyüme elde ederiz.

TRANSLATE (Değiştirme, Dönüştürme)
Translate parametresi sayesinde bir web ögesinin X ve Y ekseninde yeniden konumlandırabiliyoruz. Yine örnek bir kod ile konumuzu açıklamaya çalışalım.

<div style="
height:50px;
width:50px;
display:block;
float:left;
background:#2e83ff;
-moz-transform: translate(200px, 300px);
-webkit-transform: translate(200px, 300px);
-o-transform: translate(200px, 300px);
position:absolute;">&nbsp;</div>

Verdiğimiz kodların çalıştığı sayfayı buradan izleyebilirsiniz.

Yapmış olduğumuz örnekte 50 piksel eninde ve 50 piksel boyundaki kutumuzu translate ile yeniden konumladık. Kutumuz başlangıçta X ve Y ekseninde (translate değeri vermeden önce) 0 pozisyonundaydı. Örnek kodda verdiğimiz translate(200px, 300px) değeri ile kutunun X ekseninde 200px ve Y ekseninde 300px yer değiştirmesini sağladık. Bir bakıma left:200px ve top:300px değeri vermiş gibi işlem yaptık.

Yine Scale’de olduğu gibi X ve Y eksenlerinde tekil olarakta atamalar yapabiliriz. Bunun için translateX(100px) veya translateY(10px) gibi değerler kullanmamız yeterli olacaktır.

Translate bu örnek ve anlatım ile sizlere biraz gereksiz bir parametre gibi görünebilir. Ancak bir web elementini yeniden konumlayabilmek ve belirli bir noktaya taşımak şimdi ne kadar gereksiz görünse de ileride Css ile animasyonların yaygınlaşmaya başladığı dönemlerde kıymeti daha da fazla anlaşılacaktır. Bir ögenin bir noktadan bir noktaya bir geçiş (transition) ile taşınması oldukça güzel bir animasyon etkisi oluşturabilir. (Kaldı ki Webkit tabanlı tarayıcılarda artık Css’de yaptığımız animasyonları test etmeye başladık)

SKEW (Eğrilik, Çarpıklık, Yamukluk)
Skew değerini Photoshop kullanıcıları iyi bileceklerdir. Skew ile bir web elementinin X ve Y eksenlerine belirli açılar verilebilir. Bu sayede o ögeye belli bir eğrilik, belli bir yamukluk açısı kazandırmış oluruz. Yine örneğimizi yazarak konumuzu açıklamaya çalışalım.

<div style="
height:75px;
width:75px;
display:block;
float:left;
background:#2e83ff;
-moz-transform: skew(45deg, -20deg);
-webkit-transform: skew(45deg, -20deg);
-o-transform: skew(45deg, -20deg);
position:absolute;
left:300px;
top:300px;
">
&nbsp;
</div>

Örneğimizi izlemek için buraya gözatabilirsiniz.

Örnek kod içinde 75 piksel eninde ve yine aynı boyda bir kutu oluşturduk. Bu kutunun X ekseninde 45 derecelik, Y ekseninde ise -20 derecelik bir açılaşma yapmasını istedik. Bu sayede kutumuzu ilk halinden daha çarpık bir hale getirdik. Yine Translate parametresinde olduğu gibi sadece X veya sadece Y ekseninde belirli açılar vermek mümkündür. skewX(45deg) gibi bir kullanım sadece X eksenine 45 derecelik açı verecektir.

Skew değeri atanarak oluşturulmuş basit bir küp görünümü için tıklayınız.

TÜM PARAMETRELERİN BİR ARADA TANIMLANMASI
Yukarıda kısa bir şekilde Transform özelliğinden bahsetmeye çalıştık. Css kodlarımızı yazarken her elemente ayrı ayrı parametre ve değer yazmaktansa hepsini birleştirerek bir yazım yapabiliriz.

-moz-transform: scale(1, 2) translate(50px, 100px) skew(45deg, -15deg) rotate(50deg);

Gördüğünüz gibi aralarında boşluk bırakarak tüm parametre ve değer atamalarını yaptık. Bu nedenle her bir tanım için ayrı ayrı kod yazmamıza gerek kalmadı. Css kodlarımızı oldukça kısaltmış olduk üstelik.

TARAYICI UYUMU İÇİN KODLARIN DEĞİŞİMİ
Aslına bakarsanız farklı tarayıcılar için farklı kodlar yazmıyoruz. Sadece parametrenin başına tarayıcının motorunu simgeleyici bir ön ek getiriyoruz.

Firefox için -moz, Webkit için -webkit ve Opera için -o öneklerini kullanmamız yeterli oluyor. Zaten makalemizdeki örnek kodlar içerisinde ziyadesiyle bunları kullandık. Okuyucularımızın kafasının karışmaması için bu açıklamayı yapmayı uygun buldum.

Peki ya Internet Explorer?
Bu özelliklerin tümünün kullanımı için sanıyorum IE 9 veya 10′un çıkmasını beklemek zorundayız :) Şaka bir yana bazı parametreler IE tarayıcılarda belli filter’lar ile yapılabiliyor. Ancak tüm özellikleri de kapsamıyor. IE’nin bir sonraki versiyonunda Css3′e desteğinin biraz daha iyi olmasını umut ediyoruz.

SON OLARAK…
Gerek kodlar gerekse de görsel ögelerle destekleyerek size Css3 2d Transforms konusunu anlatmaya çalıştım. Atladığım veya unuttuğum noktalar olmuşsa lütfen yorumlarınızla beni bilgilendiriniz. Bu makaleyi hazırlarken W3C’nin konu hakkındaki yayınlanmış doküman‘ından yararlandım. Umarım sizler için faydalı olmuştur.

Menümüzü oluştururken Css3′ün bir takım özelliklerinden de yararlanacak ve görünümü daha iyi hale getirmek adına menü kodlarımızda kullanacağız. Şimdi dilerseniz hemen uygulamamıza geçelim.

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

XHTML
Her zaman olduğu gibi öncelikle Xhtml kodlarımızı yazarak uygulamamıza başlıyoruz.

<div id="menu">
<ul>

<li><a href="#" class="secim">Reşat Nuri Güntekin</a>
<ul>
<li><a href="#">Çalıkuşu</a></li>
<li><a href="#">Yaprak Dökümü</a></li>
<li><a href="#">Son Sığınak</a></li>
</ul>
</li>

<li><a href="#" class="secim">Halide Edip Adıvar</a>
<ul>
<li><a href="#">Sinekli Bakkal</a></li>
<li><a href="#">Ateşten Gömlek</a></li>
<li><a href="#">Vurun Kahpeye</a></li>
</ul>
</li>

<li><a href="#" class="secim">Namık Kemal</a>
<ul>
<li><a href="#">İntibah</a></li>
<li><a href="#">Vatan Yahut Silistre</a></li>
</ul>
</li>

<li><a href="#" class="secim">Peyami Safa</a>
<ul>
<li><a href="#">Dokuzuncu Hariciye Koğuşu</a></li>
<li><a href="#">Fatih - Harbiye</a></li>
</ul>
</li>

<li><a href="#" class="secim">Ömer Seyfettin</a>
<ul>
<li><a href="#">Kaşağı</a></li>
<li><a href="#">Başını vermeyen şehit</a></li>
</ul>
</li>

<br style="clear:both" />
</ul>
</div>

CSS
Menü görünümünü belirleyecek olan stil tanımlamalarını yapıyoruz.

#menu {
font:14px arial, verdana, sans-serif;
width:720px
}

#menu ul {
list-style:none;
margin:0;
background:#3ca0df url(menubg.gif) repeat-x bottom; /* menü arkaplan resmimiz tanımlanıyor. */
padding:5px;

/* Firefox, Chrome, Safari tarayıcılar için Border radius ve Shadow tanımları yapılıyor */

-moz-border-radius:4px; /* menümüzün yuvarlak köşeleri tanımlanıyor. */
-moz-box-shadow:0px 1px 2px #333; /* burada menümüze çok küçük bir gölge efekti veriyoruz */

-khtml-border-radius:4px; /* menümüzün yuvarlak köşeleri tanımlanıyor. */
-khtml-box-shadow:0px 1px 2px #333; /* burada menümüze çok küçük bir gölge efekti veriyoruz */

-webkit-border-radius:4px; /* menümüzün yuvarlak köşeleri tanımlanıyor. */
-webkit-box-shadow:0px 1px 2px #333; /* burada menümüze çok küçük bir gölge efekti veriyoruz */
}

#menu li { /* menümüzün liste tanımı yapılıyor. */
list-style:none;
padding:0;
margin:0;
float:left;
position:relative;
}

#menu a {
color:#fff;
text-decoration:none;
padding:4px;
display:block;
text-shadow:0px 1px 2px #000;
margin:0px 10px 0px 10px;
}

#menu a:hover {
color:#fff;
text-decoration:none;
padding:4px;
background:#333;
-moz-border-radius:3px; /* menü bağlantılarımıza küçük bir gölge efekti veriyoruz. */
-khtml-border-radius:3px;
-webkit-border-radius:3px;
display:block;
}

/* Alt menülerimizi gizliyor ve sonrasında alt menünün stil tanımlamalarına geçiyoruz. */

#menu li ul {
display:none; /* Alt menülerimizi gizliyoruz! */
position:absolute;
padding:0px;
margin:0px;
}

#menu li:hover > ul {
display:block; /* Alt menülerimiz #menu li üzerine fare ile gelinince görünecek şekilde hover ile gösterimini sağlıyoruz. */
position:absolute;
padding:0px 0px 0px 0px; /* margin ve padding değerlerini uygun şekilde ayarlıyoruz. */
margin:0px 10px 0px 10px;
width:150px;
left:0
}

/* Alt menü görünümünü değiştirecek olan stilleri yazıyoruz. */

#menu ul ul {
-moz-border-radius:4px; /* alt menümüzün köşelerini yuvarlıyoruz. */
-webkit-box-shadow:0px 1px 2px #2e83ff; /* ve burada da biraz gölge katıyoruz. */
-khtml-box-shadow:0px 1px 2px #2e83ff; /* ve burada da biraz gölge katıyoruz. */
width:150px;
margin:0px 10px 0px 10px;
border:1px solid #777;
}

#menu ul ul li {
display:block;
float:none;
}

#menu ul ul a { /* alt menü listemizin linklerini tanımlıyoruz. */
display:block;
font:14px/20px arial, verdana, sans-serif;
margin:0;
background:#888;
border-bottom:1px solid #777
}

#menu ul ul a:hover {
background:#f5cd14;
color:#fff;
}

jQUERY
Son olarak alt menünün slayt şeklinde görünmesi için küçük bir jQuery kodu ekliyoruz.

$(document).ready(function () {	

	$('#menu li').hover(
		function () {
			// #menu li üzerine gelince alt menümüzün SlideDown ile görünmesini sağlıyoruz.
			$('ul', this).slideDown(200);

		},
		function () {
			// imlecimiz ul üzerinden kalkınca alt menümüz SlideUp ile kapanıyor.
			$('ul', this).slideUp(200);
		}
	);

});

Neler Yaptık?
Kodlarımızı yazdıktan sonra kısaca neler yaptığımızı anlatmak istiyorum. Öncelikle Xhtml kodlarıyla basit olarak bir sırasız açılır menü (Unordered List) oluşturduk.

Css kodlarımızla tanımladığımız menü isimli id içinde menü görünümlerini ayarladık. Önce menü bağlantılarının görünümünü tanımladık. Alt menülerin görünümünü gizlemek için #menu li ul parametresine display:none değeri verdik. Böylelikle alt menüleri gizledik.

Sonrasında alt menülerin görünür hale gelmesi için #menu li:hover > ul bölümüne display:block değerini verdik. Böylelikle menü bağlantılarımızın üzerine gelince şayet bir alt menü içeriyorsa bu alan görünmeye başlayacak.

Bu aşamadan sonra menümüzün görünümüyle ilgili stilleri biraz daha genişlettik. Css3′ün Box Shadow, Text Shadow, Border Radius gibi özelliklerinden faydalandık. Bu parametrelerin herbirini daha önceki yazılarımızda anlatmıştık. Şayet kullanımı bilmiyorsanız önceki yazılarımızdan faydalanabilirsiniz.

Son olarak jQuery’den yararlanarak Css ile gizlediğimiz alt menülerin görünümünün slayt şeklinde olmasını sağladık. Css3 ve Xhtml ile kolayca menümüzü oluşturduk ve görünümünü düzenledik. Menünün padding ve margin değerlerinin orantılı kullanımına dikkat ettik.

(İndireceğiniz örnek dosyada style.css ve index.html kodları içerisinde yazmış olduğum kodlarla ilgili birtakım açıklamalar yazdım. Bunları okumanız menünün nasıl yapıldığını anlamanız adına yararlı olacaktır. Bu menüyü, Firefox, Chrome ve Safari tarayıcılarda sorunsuz olarak görüntüleyebilirsiniz. Atladığım veya unuttuğum bir nokta varsa şimdiden özür dilerim)

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

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/