Günümüz tasarımlarının en popüler öğelerinden olan yapışkan (sticky) header nasıl hazırlanır? Eğer bu soru sizin de aklınızı kurcalıyorsa doğru yerdesiniz.
(daha&helliip;)menu
CSS ile Navigasyon Menü Tasarlayalım
CSS3 ile birlikte tasarım yelpazemiş genişledi. HTML5 ile de kod dizinlerimiz daha derli toplu bir hal aldı. O zaman bu avantajları kullanarak yeni bir navigasyon menü hazırlayalım. Hem de JavaScript kullanmadan!
(daha&helliip;)CSS ile Renkli ve Görsel Geçişli Menü
Web sayfanıza renkli geçişlere sahip etkileyici bir menü hazırlamak ister misiniz? Hem de sadece CSS kullanarak… Aşağıdaki css menü örneğini test ederek başlayabilirsiniz.
(daha&helliip;)CSS ile Toogle Menü
Web üzerinde dolaşan ilgi çekici tasarım örneklerini sizlerle paylaşmaya devam ediyoruz. Bu makalemizde, tıklanıldığında açılan şık bir menü örneği hazırlayacağız. Mobil buttonları kullanarak menüyü daha ilgi çekici bir hale getireceğiz.
Sadece CSS ile Yatay Menü
Merhaba arkadaşlar, bu makalemde sizlerle birlikte bütün cihazlarda sorunsuz görüntülenebilen (responsive) yatay bir menü örneği hazırlayacağız. Yukarıda önizlemesini görüntülediğiniz bu tasarımı canlı olarak test etmek için aşağıdaki “Örneği Görüntüle” linkinden faydalanabilirsiniz.
(daha&helliip;)WordPress Sitenize Muhteşem jQuery Menüler Hazırlayın
Merhaba arkadaşlar. WordPress eklentileri konulu bu yazımda yeni sayılabilecek bir menü eklentisinden bahsedeceğim.
JQuery Vertical Mega Menu Widget isimli bu eklenti WordPress sitenize gayet şık menüler eklemenizi sağlıyor. Bu işlemi ise neredeyse saniyeler içerisinde yapıyor. Kullandığı jQuery desteği ile açılabilir yapılabilen menüler sitenize widget olarak ekleniyor. Ayrıca sizler için hazırlanmış 8 adet menü tasarımı gayet şık duruyor.
Hadi incelememizi biraz detaylandıralım. (daha&helliip;)
HTML5 ve CSS3 ile Yaprak Menü
CSS’in transition efektleriyle ilgili bir çok çalışma yaptık. Fiziksel efektlerinden de rotate ve bluru daha önce birkaç kez kullandık. Hadi gelin hem o bilgileri pekiştirelim hem de gayet şık bir menü tasarımı yapalım. Ama öncesinde aşağıdaki örnek .GIF dosyasını görüntülemenizde fayda var.
Ya da canlı test etmek isteyebilirsiniz :
(daha&helliip;)CSS ile Basılabilen 3 Boyutlu Buttonlar
CSS ile birçok button hazırladık. Fakat yukarıda gördükleriniz basılma hissiyatını en çok verenler.
Box-Shadow ile hem 3 boyut hem de basılma efekti oluşturacağız. Yani buttonu tasarlarken bir yandan da hover için alt yapı oluşturmuş oluyoruz. Bu şu demek oluyor; 50% daha hızlı yüklenen buttonlar ve aynı oranda artan performans.
(daha&helliip;)“Bu makalede hazırlayacağımız buttonlar performans-tasarım açısından en iyiler listemde.”
Web Geliştiricilerinin El Kitabı
Üniversite hayatımın son yılında yazmaya başladığım “The Differences Between Web 1.0 and Web 2.0” konulu tezim hiç yönelmediğim, web tasarımının sosyal yönünü bana öğretti.
WWW içinde fazlasıyla yer etmiş onlarca akademisyenin çalışmalarını okumak üniversite eğitimi hayatımdaki tek verimli dönem olmuştu.
Bu makale dizesinde web geliştiricilerinin bilmesi gereken bazı ipuçlarından bahsedeceğiz. Web teknolojilerini verimli kullanarak sayfalarımızı geliştireceğiz bir yandan da SEO dostu tasarımı konuşacağız.
Okumakta olduğunuz makale sizlerle etkileşim içinde gelişecektir. Önemli bir bilgi bankası olana kadar genişlemeye devam edecektir. (daha&helliip;)
CSS3 ile Geçiş Efekti (Transition) Kullanarak Windows 8 Tarzında Kutucuklar Hazırlamak
Her geçen gün JavaScript pastasından bir ısırık daha alan CSS gelişimini sürdürüyor. Bu makalemde ise CSS’in öne çıkan elementlerinden olan geçişleri (transitions) konuşacağız.
Bu yeni kod sistemi sayesinde iki renk, boyut, ölçeklendirme gibi birimler arasında geçiş sağlayabiliyoruz.
Özellikle son günlerde herkesin beğenisini kazanan Windows 8 benzeri menü örnekleri de konumuzun bir parçası.
Makalemize önemli örneklerle ve incelenmesi gereken kaynaklarla devam edelim :
(daha&helliip;)