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)

Uzun bir aradan sonra yine merhabalar. (Yazmayalı çok uzun zaman olmuş gerçekten) Bu makalemizde sizlerle web tasarımında son dönemlerde oldukça sık kullanılan açılır navigasyonları nasıl oluşturacağımızı anlatacağız.

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

(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.

Wordpress blog sahipleri için gönderiler içindeki bağlantılar çok önemlidir. Bunun gerekliliğini ben de oldukça fazla yaşadığım için sadece temamın bana sunduğu bağlantı karakterini kullanmakla yetinmiyorum. Bunun yerine temamın stil dosyasında farklı bir bağlantı sınıfı oluşturarak gönderilerim içinde bunu kullanıyorum. Bazen yazılarımızın içinde gördüğünüz bağlantılar (özellikle renkli ve ikon destekli olanlar) buna bir örnektir. Öncelikle size kullanmış olduğum Css kodlarını yazayım, sonrasında bunu bir Wordpress gönderisinde nasıl kullanacağımızı anlatalım.

Az önce Line25′te bir makale gördüm. Basit olarak Xhtml ve Css ile bir sayfanın kodlaması anlatılıyordu. Ne zamandır aklımda olan ama yazmaya bir türlü fırsat bulamadığım bir konuydu bu. Ben de oturup yazmaya karar verdim. Umarım size en yalın haliyle Xhtml ve Css sayfa kodlamayı anlatabilirim. Gerçekten bu iş düşündüğümüz kadar zor değil.

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.