Kategori: Web Tasarım Örnekleri ve Uygulamaları

Daha önceki bir yazımda Html ve Css ile üçgen yapımını anlatmıştım. Bu yazımda ise Scss'de mixin ve if-else yapısını kullanarak üçgen yapımını bir fonksiyon haline getireceğiz. Böylece projelerimizde istediğimiz yerlerde tek satır kod yazarak üçgenleri …

Daha önceki yazılarımda Html ve Css kullanarak yatay menü yapımını anlatmıştım. Bu yazımda ise Html ve Scss kullanarak yatay menü yapımı nasıl oluyor onu göstereceğim.

Örneğin bir blog sitesi düşünelim. Her yazının sonuna Rating Stars ekleyerek blog ziyaretçilerinin o yazı ile ilgili bir puan vermesini sağlayabiliriz. Yada E-Ticaret sitelerinde olduğu gibi her ürünün altına Rating Stars ekleyerek o ürünü alan …

Günümüzde birçok web sitesinde Rating Stars örneklerini görüyoruz. Rating Stars ile puan verme işlemini yapabildiğimiz gibi verilen puanların ortalamasını da hesaplayıp gösterebiliriz.

Bu yazımda Html ve Css kodları yazarak responsive timeline yapımını göstereceğim. Timeline yapımı için bazı ileri seviye Css özelliklerini kullanacağız.

Bu yazımda Html ve Css kullanarak image overlay yani resmin üzerine gelince resmi kaplayacak şekilde Html öğelerinin gösterilmesini yapacağız.

Bu yazımda, birçok web sitesinde kullanılan popup mesajlarının veya daha genel ifadeyle popup pencerelerinin (açılır pencerelerinin) nasıl yapıldığını anlatacağım.

Bu uygulamanın en çok kullanıldığı yerler E-Ticaret siteleridir. Ürün detay sayfalarında bulunan resimlerin üzerine gelince yanında resmin yakınlaştırılmış halini gösterirler. Bizim yapacağımız uygulama da bunun aynısı olacak. 

Bu yazımda news gallery yani haber sitelerini açtığımızda manşet haberlerin bir resim galerisi olarak gösterildiği alanın nasıl yapıldığını anlatacağım.

Sekmeli galerilerin yapımı düşünüldüğü kadar zor bir hadise değildir. Yazacağımız kodları kendi bilgisayarınızda uygulayıp bazı yerlerini değiştirerek tarayıcıdaki değişimleri incelemeye çalışın. Böylece kodları çok daha hızlı kavramış olursunuz. 

Çoğu zaman web sayfalarımıza slider eklemek istediğimizde hazır eklentiler bulmaya çalışırız. Aslında bu konuda çok güzel eklentiler olsada birçoğu bir slider için gereğinden büyük boyutta dosyalar içeriyor. İster istemez bunlar da web sayfanızın açılış hızını …

Bu yazımda, birçok web sitesinde kullanılan tab menü yapımı diğer adıyla sekmeli menülerin nasıl yapıldığını anlatacağım. Kodlarımızı yazdıktan sonra şu şekilde bir tab menümüz olacak.