Gönderen Konu: Css3 ve Xhtml ile Apple.com Tarzı Navigasyon Yapımı(ders)  (Okunma sayısı 894 defa)

Çevrimdışı orhan

  • Yönetici
  • Trade Sayısı: (0)
  • *
  • İleti: 384
  • Karma +19/-1
  • Cinsiyet: Bay
    • Profili Görüntüle
    • webtiryaki.com
[h1]Bu kez de basit kodlar kullanarak etkili bir navigasyon örneği yapmaya çalışacağız.
[solresim]http://img29.imageshack.us/img29/1264/applenav.jpg[/solresim]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.
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

Kod: [Seç]
<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.

Kod: [Seç]
#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
[/h1]