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)

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

Hemen belirtmeliyim ki bu makaleyi yazarken Smashing Magazine‘in yeni tasarımından esinlendim.  Kategorileri görüntülediğimiz menü oldukça hoşuma gitti. Bu tarz bir menü yapımını sizlerle paylaşmaya karar verdim.

MENÜ ÖNİZLEME MENÜ DOSYASI İNDİR

Öncelikle menümüzde/navigasyonumuzda kullanmak üzere arkaplanımızı oluşturacak resmimizi Photoshop’ta oluşturalım ve uygulamamıza başlayalım.

Photoshop’ta 400*400px boyutunda yeni bir doküman açalım. Yeni bir katman oluşturarak Rectangular Marquee Tool aracını seçelim. Üst menüden Style bölümünü Fixed Size yaparak 300*250px bir değer verelim. 300*250px’lik bir dörtgenimiz oldu. Bu dörtgeni siyah renk ile (#000000) dolduralım.

Şimdi yeni bir layer daha oluşturarak oluşturduğumuz dörtgenin üzerinde küçük bir üçgen oluşturalım. Üçgenimizi yapmak için ben Polygonal Lasso Tool (L) kullandım. Küçük bir üçgen çizdikten sonra yine siyah renk ile dolduruyoruz.

Şu anda bir dörtgen ve bir de küçük üçgenimiz var. Üçgenimizi dörtgenimizin üzerinde 30-40px boşluk kalacak şekilde konumluyoruz. Sonrasında Layer penceresinden Layer 1 ve Layer 2′yi Ctrl tuşuna basarak aynı anda seçiyoruz. Seçim yapıldığında da Ctrl+E tuş kombinasyonu ile iki katmanı birleştiriyoruz. Böylelikle dokümanımızda sadece Layer 2 kalmış oluyor.

Bu aşamadan sonra bu katmana istediğimiz özellikleri vererek daha iyi bir görünüm sağlayacağız. Şimdi Layer 2 üzerine iki kez tıklayarak layer özelliklerine geliyoruz. Aşağıda yer alan değerleri girerek çalışmamıza uyguluyoruz.

Resimlerde görülen değerleri uyguladıysak hemen hemen aşağıdaki gibi bir görüntüye sahip olacağız.

Çalışmamızı bu aşamada uygun yerlerden kesecek ve resmi 2 bölüme ayıracağız. (Kodlama esnasında ikiye ayırma bize büyük kolaylık sağlayacak) Photoshop’ta Crop Tool’u (C) seçerek resmimizi uygun alanlardan kesiyoruz. Ben çalışmanın üstünden, altından ve yanlardan 2px fazlalık vererek kesim yaptım. Siz dilediğiniz gibi kesebilirsiniz.

Kesim işleminden sonra Üst alanda yer alan üçgen bölümü 20px’lik bölüm halinde kılavuz çizgimizle ayıralım ve kesip kaydedelim. Sonrasında kalan bölümü de kesip ayrı şekilde kaydedelim. Böylelikle resmimizin üst ve alt kısmını ayrı ayrı keserek kaydetmiş olduk. (Kestiğimiz resimlere nav_ust ve nav_alt şeklinde isimler verebiliriz)

Evet menümüzde kullanacağımız görselleri oluşturduk. Şimdi dilerseniz Xhtml ve Css kodlarını yazalım ve menümüzü oluşturmaya başlayalım. Önce Xhtml kodlarımızı yazarak başlıyoruz. Aşağıda yer alan kodları bir metin editörüne yazarak index.html olarak kaydedelim.

<ul class="menu">
<li><a href="#" class="menu">Anasayfa</a></li>

<li><a href="#" class="menu">Kategoriler (+)</a>
	<ul class="sub"><li>

<div class="nav">
	<div class="nav_ust">&nbsp;</div>
	<div class="nav_alt">
	<h2>Tüm Kategorileri Görüntülüyorsunuz</h2>
	<div class="navlink1">

	<a href="#">Css & Xhtml</a>
	<a href="#">Javascript</a>
	<a href="#">Php & Mysql</a>
	<a href="#">Asp.NET</a>
	<a href="#">Dreamweaver</a>
	<a href="#">Tasarım Genel</a>
	</div>

	<div class="navlink2">
	<a href="#">Photoshop</a>
	<a href="#">Illustrator</a>
	<a href="#">Fireworks</a>
	<a href="#">Gimp</a>
	<a href="#">Flash</a>
	<a href="#">Web Grafik Genel</a>
</div>
</div>
</div>

</li>

</ul>
</li>
<li><a href="#" class="menu">Makaleler</a></li>
<li><a href="#" class="menu">Videolar</a></li>
<li><a href="#" class="menu">Arşiv</a></li>
<li><a href="#" class="menu">Forum</a></li>
<li><a href="#" class="menu">Hakkımızda</a></li>
<li><a href="#" class="menu">İletişim</a></li>

</ul>

Kısaca Xhtml kodlarında yaptığımız şeyden bahsetmek istiyorum. Gördüğünüz gibi önce Ul etiketi ile sırasız listemizi oluşturduk, yani menümüzün görünür ögelerini yerleştirmeye başladık. Ul ve li etiketleri ile arka arkaya menümüzü inşa etmeye başladık. Kategori linkinde ise menümüzü oluşturacak olan alt menü için ayrıca bir ul ve li etiketi açtık. Li etiketi açıkken menümüzü gösterecek olan ana kodlamayı yaptık. Önce div class=”nav” isimli div etiketimizi açtık ve sonrasında navlink1 ve navlink2 etiketleri ile devam ederek içlerinde yer alacak olan linkleri yerleştirdik. Sırasıyla etiketlerimizi kapatarak menü yazımına devam ettik ve diğer görünür linklerimizi yazdık.

Bu noktaya kadar işin büyük bölümünü hallettik. Şimdi ise en can alıcı noktayı yani Css kodlarımızı yazacağız. Aşağıdaki Css kodlarını bir metin editörüne yazarak style.css olarak kaydedin.

ul.menu {list-style:none;margin:0;padding:0;font:bold 14px/24px arial, verdana, sans-serif;}
ul.menu  li {float:left;position:relative;}
li ul {display:none;list-style:none;}
ul li a.menu{float:none;padding:8px 10px 8px 10px;background:#333;color:#fff;display:block;text-decoration:none;border-bottom:4px solid #666}
ul li a.menu:hover{color:#999;background:#666}

li:hover > ul {display:block;position:absolute;margin:0;padding:0;}

.nav {width:250px;display:block;position:absolute}
.nav h2 {color:#333;background:#f5f5f5;display:block;margin:0 auto;padding-left:5px;font:bold 12px/24px arial, verdana, sans-serif;width:95%}
.nav_ust {display:block;background:url(navust.png) no-repeat;float:left;width:304px;height:20px;margin:-6px 0 0 0px;}
.nav_alt {display:block;background:url(navalt.gif) no-repeat;float:left;width:304px;height:247px;}

.navlink1, .navlink2 {width:125px;margin:10px 15px 10px 10px;float:left;display:inline;font:14px/20px arial, verdana, sans-serif;}
.navlink1 a, .navlink2 a {display:block;color:#666;background:transparent;text-decoration:none;padding:6px}
.navlink1 a:hover, .navlink2 a:hover {color:#fff;background:#333;text-decoration:none;padding:6px}

Css kodlarımızdan kısaca bahsedecek olursak. Burada yaptığımız en önemli şey menümüzün görünürlük ve gizlilik durumunu ayarlamak. Bunu da li ul bölümünde display:none değerini vererek yaptık. Alt birimlerin görünmesini sağlamak içinse li:hover > ul bölümüne display:block değerini kullandık. Diğer css kodlarına dikkat ettiyseniz Nav isimli sınıfımızı oluşturduk. Sonrasında nav_ust isimli alanı oluşturduk. Bu alana Photoshop’ta yaptığımız ilk resmi arkaplan resmi olarak atadık. Sonrasında nav_alt sınıfını oluşturduk. Bu sınıfa da sonradan kaydettiğimiz resmi arkaplan resmi olarak atadık. Gerekli değerleri verdik ve sonrasında navlink1 ve navlink2 alanlarını oluşturduk. Bu alanlarda kategorilerimizi 2 sütun olacak şekilde göstereceğimiz için 2 alan oluşturduk. Sonrasında alanlarımızda Css düzenlemelerini sınıflara uygun değerleri atayarak tamamladık.

Belgeyi kaydedip görüntülediğinizde örneğimize benzer bir menü elde etmiş olacaksınız. Uygulamanın kolay ve basitçe uygulanabilir olması nedeniyle herbirinizin bunu yapabileceğini düşünüyorum. Mantık olarak klasik Css açılır bir menü oluşturduk sadece. Bu menünün bir biriminde klasik menü birimlerini göstermek yerine kendi yapmış olduğumuz Css stil ve tanımlamalarını kullandık hepsi bu :)

Bu uygulama modern tarayıcıların hepsinde çalışacaktır. Firefox, Opera, Chrome, IE8 üzerinde denenmiştir. Yalnız bu uygulama IE5+ ve IE6 üzerinde çalışmayacaktır! Çünkü IE eski sürümleri uygulamada kullandığımız :hover sınıfını (pseudo class) desteklemez. Bunu çalıştırabilmek için birçok küçük düzeltme js uygulaması mevcut. Ancak ben fix ile uğraşıp kafanızı karıştırmak istemedim, mazur görün. Şayet soru olarak gelirse yorumlarımda da anlatabilirim.

Unuttuğum veya atladığım noktalar varsa özür dilerim. Umarım sizler için faydalı olmuştur…

Menü Önizleme Menü Dosyası İndir

Web tarayıcıların gelişmesiyle artık (kısıtlı da olsa) Css3′ün nimetlerinden faydalanabiliyoruz. Bu makalemizde basit olarak özel bir yazıtipinin Css3‘te kullanımını ve gösterimini (Font Embed, Yazıtipi gömme olarakta dilimize çevirebiliriz) anlatacağız. Yapacağımız örnekleri Firefox 3.5+ sürümlerde rahatlıkla görebilirsiniz.

Önce örneğimizde kullanacağımız yazıtipini belirleyelim. Ben şurada bulunan White Board Modern isimli yazıtipini indirdim. Dilerseniz siz farklı bir yazıtipi kullanabilirsiniz. İndirdiğimiz yazıtipini gösterecek olan Css kodlarımızı yazalım ve bu yazdığımız kodu işleme koyacak olan bir alanda gösterelim.
@font-face {
font-family: “White Board Modern”;
src: url(Whiteboard-Modern-Demo.ttf);
}

#ozelyazitipi {
font:24px “White Board Modern”;
color:#2e83ff;
}

Css kodumuzda gördüğünüz üzere bir Css3 nimeti olan Font-Face seçicisini kullandık. Font-family alanına kullandığımız yazıtipinin ismini yazdık. Src parametresi ile yazıtipinin bulunduğu dosyanın yolunu ve tam ismini yazdık. Bu kodu yazdıktan sonra ben bir alan oluşturdum. Bu alanda font parametresi ile az önce tanımladığım yazıtipime atıfta bulunarak bunu kullanacağımı belirttim. Şimdi yazımızı gösterecek olan Xhtml kodunu da yazalım.

<div id=”ozelyazitipi”>
BU YAZI WHITE BOARD MODERN YAZITIPI ILE YAZILDI…
</div>

Burada da #ozelyazitipi olarak belirttiğimiz id’mizi kullanarak yazımızı yazdık. Dosyayı .html formatıyla kaydederek görüntülediğinizde yazımızın ekranda belirttiğimiz yazıtipinde görünecek.

(NOT: Bu özelliğin IE tarayıcılarda görülebilmesi için kullandığımız yazıtipinin Embedded Open Type olması gerekiyormuş. Burada konuyla ilgili detayları bulabilirsiniz. Bu yazıyı hazırlarken Css Fonts Module Level 3 sayfasını referans aldım.)

ÖRNEK SAYFA

.sl, .sl a {
text-decoration:none; color:#F91364; background:#fff; padding:2px 2px 2px 2px; font-weight:normal;
}
.sl:hover {
text-decoration:none; color:#fff; background:#F91364; padding:2px 2px 2px 2px; font-weight:normal;
}

Yukarıdaki kodu temanızın stil dosyasına ekleyin. Daha sonra oluşturduğunuz Wordpress gönderisinde herhangi bir bağlantı ekledikten sonra Görsel alanından gönderinin kodlarını gördüğünüz HTML bölümüne gelin. Burada link içine class=”sl” kodunu ekledikten sonra yazınızı yayınlayın. Bağlantı karakterinin değiştiğini göreceksiniz. Kodları yazarak gösterirsek bağlantınız şu şekilde olmalı:

<a href="http://www.google.com" class="sl">Google</a>

Değerleri kendinize göre değiştirerek siz de farklı bağlantı görünümleri kullanabilirsiniz. (Sanıyorum bu konu bana iletişim formu aracılığıyla sorulmuştu, o yüzden yazma ihtiyacı hissettim, umarım faydalı olmuştur)

W3C standartlarına uygun kodlama için (valid code) Xhtml bilgimiz olması şart. Daha önceki zamanlarda sitemizde Xhtml dersleri yayınlamıştık, dilerseniz o derslerden yararlanabilirsiniz. Ancak standartlara uygun bir sayfa kodlaması için yalnızca Xhtml bilgisi başlı başına yeterli değil. Xhtml ile oluşturduğumuz kodların görünümünü düzenleyecek olan stilleri yazmak için CSS’ye de hakim olmak gerekli. Kaldı ki yazacağımız Css kodlarının da standartlara uygun olması gerekiyor. Css yazarken de belli kurallara bağlı kalmamız gerekiyor. Geçerli bir sayfa kodlaması için Xhtml ve Css’ye başlangıç aşamasında hakim olmak yeterli.

Öncelikle Xhtml kodlarımızı yazarak işe başlayalım. Sayfamız klasik olarak bir Üst bölüm (Header), bir Navigasyon alanı (Navigation), bir İçerik alanı (Content), bir Menü bölümü (Menubar veya Sidebar) ve bir Alt bilgi (Footer) alanı barındıracak. Şimdi bu alanları Xhtml olarak yazalım.

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
	<title>Xhtml Css Sayfa Şablonu</title>
	<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-9" />
	<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<!-- XHTML KODLARIMIZ BAŞLIYOR -->

<div id="sayfa">
<div id="ustbolum">Üst Bilgi Alanı</div>
<div id="navigasyon">Navigasyon Alanı</div>
<div id="icerik">Ana İçerik Alanı</div>
<div id="yanmenu">Yanmenü Alanı</div>
<div id="altbilgi">Alt bilgi Alanı</div>
</div> 

</body>
</html>

Xhtml kodlarında gördüğünüz üzere her bir Div için yukarıda bahsettiğimiz alanları tanımladık. Id seçiciler kullanarak div etiketlerimizi sırasıyla yazdık. Buraya kadar sayfamızın Xhtml kodları hazır görünüyor. Şimdi asıl önemli olan kısma geçiyoruz. Css ile Id’lerimize değerler atayacağız ve görünümü şekillendireceğiz. Css kodlarından sonra her Id’de kısaca ne yaptığımızı anlatacağız.

#sayfa {width:800px;margin:0 auto;font:bold 16px "Arial", Verdana, Helvetica, sans-serif;}
#ustbolum {height:100px;background:#2e83ff;color:#fff;}
#navigasyon {height:40px;background:#666;color:#fff;}
#icerik {width:500px;height:500px;float:left;background:#999;color:#333;}
#yanmenu {width:300px;height:500px;float:right;background:#888;color:#333;}
#altbilgi {width:100%;height:50px;background:#777;color:#fff;clear:both;}

Css kodlarımızı da yukarıdaki gibi yazdıktan sonra style.css adıyla kaydediyoruz. Sonuç BURADA yer alan sayfa gibi görünmeli. Şimdi dilerseniz kısaca Css kodlarıyla neler yaptığımızı biraz anlatalım.

Önce Sayfa isimli id’mizi tanıtmaya başladık. Burada sayfa seçicisine 800 piksel genişlik atadık. Margin değerini 0 auto yaparak sayfa id’si içinde kalacak bölümlerin tarayıcımızda ortalanmasını sağladık. Son olarak yazıtipi belirledik. Örnek sayfada dikkat ederseniz diğer alanlarda yazıtipi tanımlaması olmadığı için tüm yazılar 16 piksel Arial yazıtipinde görünmekte. Sayfa id seçiciyi en son kodlama bittikten sonra kapattık.

Ustbolum isimli id’mizde iste sayfamızın Üst bilgisini oluşturacak bir tanılamaya gittik. Yüksekliğini 100 piksel olarak atadık. Arkaplan rengi ve yazı rengini ayrı ayrı tanımlayarak Ustbolum id yazımını bitirdik.

Navigasyon bölümünde ise bir navigasyon alan görünümü istediğimiz için yüksekliğini 40 piksel tuttuk. Yine Ustbolum gibi arkaplan ve yazı rengi atamalarını yaptık.

İcerik ve Yanmenu seçici id’lerinde ise yine öncelikle genişlik ve yükseklik tanımlamaları yaptık. Burada dikkat ettiyseniz fazla olarak float değerini atadık. İcerik için float:left değerini yanmenu içinse float:right değerini kullandık. Böylelikle icerik alanındaki tüm içerik sola, yanmenu alanındaki tüm içerik ise sağa yaslanmış vaziyette görünecek.

Altbilgi bölümünde ise yer alacak içeriğin üstte görünen icerik ve yanmenu’den bağımsız olarak hizalanması içinse clear:both değerini kullandık. Böylelikle Css kodlarımızı tamamlamış olduk.

Gördüğünüz gibi yazmış olduğumuz basit kodlar sayesinde sayfa şablonumuzu oluşturduk. Üstelik W3C’nin sevdiği ve geçerli kabul ettiği bir kodlama ile bunu yaptık. Yukarıda yazılan kodlar ile oluşturduğumuz bu basit sayfayı bir nevi sayfa iskeletimiz gibi düşünebilirsiniz. Zira henüz hiçbir ekstra tanımlama ve kod eklemesi yapmadık. Sadece şablon olarak neyin nerede duracağını belirttik. Css’nin türlü nimetlerinden yararlanarak sayfalarımızı geliştirebilir ve farklı görünümler ortaya çıkarabiliriz.