Kategori: Web Tasarım Örnekleri ve Uygulamaları

Web sayfalarımızı tasarlarken bazı durumlarda dikey çizgi oluşturma ihtiyacımız olabiliyor. Örneğin, bir timeline tasarlamak isterseniz dikey çizgiyi kullanmanız gerekecektir. Html etiketlerinden olan <hr> etiketi ile yatay çizgi oluşturabiliyoruz. Ama dikey çizgi oluşturmak için herhangi bir …

Bu yazımızda, Html ve Css ile breadcrumb (içerik haritası) nasıl yapılır onu öğreneceğiz. Breadcrumb çoğu sitede olur ama en çok ETicaret sitelerinde görüyoruz. Bir ETicaret sitesi düşünün ve iç içe birçok kategorisi olsun. Biz kullanıcı olarak Ürünler …

Bu yazımızda Jquery ile sıralı ve sırasız listelerde nasıl arama işlemi gerçekleştirebiliriz onu öğreneceğiz. Projelerimizde listeleme işlemini çok sık kullanıyoruz. Bazı durumlarda bu listelerde arama yapma ihtiyacı oluşabiliyor. Bu gibi durumlarda yardımcı olması için küçük …

Bu yazımızda Jquery ile tablolarda nasıl arama işlemi gerçekleştirebiliriz onu öğreneceğiz. Eğer dinamik bir web sitesi geliştiriyorsanız bunun bir admin paneli olacaktır. Admin panelde en sık yapılan işlemlerden birisi tablolarda listeleme yapmaktır.

Hemen hemen her websitesinde kullanıcıların aradıkları konuyu, ürünü vb.. daha hızlı bulabilmeleri adına arama kutusu bulunuyor. Bu yazımızda arama kutusu örnekleri içerisinden animasyonlu arama kutusunun yapımını öğreneceğiz.

Custom Checkbox yani özel onay kutularını birden fazla seçenek içerisinden kullanıcıya seçim yaptırmak istediğimiz durumlarda kullanıyoruz. Örneğin kullanıcıdan bir form doldurmasını istediğimizi düşünelim. Birçok yazılım dilini (C#, Java vb..) seçenek olarak sunup en iyi bildiği …

Bu yazımızda, Html ve Css kullanarak pagination (sayfalama butonları) yapımını öğreneceğiz. Pagination'ı özellikle ETicaret siteleri, Blog siteleri gibi birşeylerin (yazı, ürün vb..) listelendiği sitelerde sıklıkla kullanıyoruz. Örneğimizi Blog sitesi üzerinden verelim. Anasayfada tüm yazılarımızı yayınladığımızı …

Bu yazımızda Css ile nasıl Toggle Switch yapabiliriz bunu öğreneceğiz. Toggle Switch, daha çok aç-kapa / yes-no / on-off gibi 2 seçenekli durumlarda görselliği biraz daha arttırmak amaçlı kullanılabilir.

Bu yazımızda Css ile nasıl loading animasyonu yapabiliriz onu öğreneceğiz. Bildiğiniz gibi bir sayfa yüklenirken veya bir işlemin gerçekleşmesini beklerken genelde loading animasyonları ile karşılaşırız. İşlem gerçekleştiğinde ise animasyon kaybolur.

Web sayfalarımızı tasarlarken önce Html ile genel yapıyı oluşturuyoruz. Daha sonra bu yapıyı Css özellikleri ile gerçek birer web sayfası haline getiririz. Tabi Css kodları yazarken belki de en çok kullandığımız özelliklerin başında margin ve …

Bu yazımda, Html ve Css kullanarak sosyal medya butonlarının nasıl yapıldığını öğreneceğiz. Her geçen gün sosyal medya kullanıcılarının artmasıyla birlikte web sitelerinde bulunan sosyal medya butonları da artık olmazsa olmazlarımız arasındaki yerini aldı.