empadesign

Yeniden Merhabalar. Yine bir uygulama yazısı ile karşınızdayız. Bu kez de basit kodlar kullanarak etkili bir navigasyon örneği yapmaya çalışacağız.

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.

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…
Not:T-infection'dan Alınmıştır.