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)

Merhabalar. Bildiğiniz üzere Youtube kısa bir süre önce tasarımını değiştirdi. Bir takım küçük değişikliklerle tasarımın hem sade hem de daha kullanışlı tutulmaya çalışıldığını görüyoruz. Bana kalırsa bu konuda oldukça başarılı gidiyorlar.

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)

Uzun bir aradan sonra yeniden merhaba. Bu makalemizde yine sizlerle bir navigasyon uygulaması paylaşacağız.

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)

Tarayıcıların Css3 desteklerinin genişlemesiyle birlikte bu alanda yapılan birçok çalışmayı artık rahatlıkla test edebiliyoruz. Özellikle son dönemlerde gördüğümüz örneklerde Css3′ün Transform parametresinden yararlanılarak birçok uygulama yapılabiliyor.

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.

Uzun bir aradan sonra yeniden merhabalar. Bu makalemizde Css ve Xhtml ile klasik bir yatay açılır menü yapacak daha sonra bu menümüzü jQuery ile biraz dinamik hale getireceğiz.

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)

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

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

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

(Merhabalar, bu anlamlı gün vesilesiyle tüm ziyaretçilerimizin 30 Ağustos Zafer Bayramı‘nı kutluyorum. Allah milletimize nice 30 Ağustosları barış, birlik ve beraberlikle görmeyi nasip etsin)

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.

Css3 bilindiği gibi birçok yenilik ve seçenekle geliyor. Arkaplanları istediğimiz ölçüde kesebilme, yuvarlak köşeler, kenarlıklara resim ekleyebilme ve daha birçoğu. Bu yeniliklerden birisi de text-shadow özelliği. Bu özellik yazımızın başlığında da belirttiğimiz gibi metinlere gölge efekti verebilmemizi sağlıyor. Bu sayede farklı yöntemler kullanmaya gerek kalmadan yazılarımıza gölge izlenimi verebiliyoruz. Dilersek gölgemizin boyutlarını ve rengini de ayarlayabiliyoruz. Şimdi isterseniz örnek bir kullanıma gözatalım.

p { font:bold 16px “Arial”, Helvetica, sans-serif; text-shadow: 4px 4px 2px #2e83ff; }

Örnek kodumuzda kalın yazıyla gösterdiğimiz alan bu özelliğin tam kullanılmış halidir. Burada yaptığımız şeyi biraz açıklayalım. Önce p etiketimize yazıtipi ve boyutu ataması yaptık, sonrasında text-shadow parametresi kullarak gölgemizin özelliklerini belirledik. Örnek kod üzerinde 4 tane değer görüyorsunuz. Sırasıyla 4px 4px ve 2px olarak gölgemize ait yön ve son olarakta renk değerlerini giriyoruz.