Kategori: Web Tasarım Örnekleri ve Uygulamaları

Web tasarımlarında en çok kullandığımız öğelerden bir tanesi de resimlerdir. Bu yazımda kullanmış olduğumuz resimleri nasıl responsive hale getirebileceğimizi yani mobil uyumlu yapabileceğimizi göstereceğim.

Bu yazımda Css3 ile birlikte gelen animation özelliğini kullanarak zıplayan top uygulaması yapacağız. Uygulamamızın son hali şu şekilde olacak.

Bu yazımda Css3 ile birlikte gelen animation özelliğini kullanarak iki duvar arasında gidip gelen top uygulaması yapacağız. Uygulamamızın son hali şu şekilde olacak.

Bugün Html ve Css kodları yazarak güp güp atan kalp :) örneği yapacağız. Kodlarımızı yazarken Css3 özelliklerinden animation, transform ve position gibi özellikleri kullanıyoruz. Bu özellikler ile ilgili eksikleriniz varsa şu linklerden konu anlatımlarına bakabilirsiniz.

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.