Bu örnekte, HTML ve CSS Grid kullanarak bir responsive web sayfası tasarlandı. Sayfa, başlık, altbilgi ve esnek sütunlu bir ana içerik bölümü içeriyor. CSS Grid, sütun sayılarını ve boyutlarını belirleyerek sayfanın farklı ekran boyutlarına uyumlu olmasını sağlıyor. Ekran genişliği 768 piksele kadar olan durumda, sayfa düzeni tek sütuna geçiyor, bu...

Web tasarımının görsel cazibesini artırmak ve içeriği daha çekici hale getirmek için kullanılan masonry layout, farklı boyutlardaki öğeleri düzensiz bir şekilde bir araya getirerek modern bir görünüm sağlar. Bu yazıda, CSS Grid kullanarak nasıl dinamik ve şık bir masonry layout oluşturabileceğinizi adım adım keşfedeceğiz. HTML Yapısını Oluşturma İlk adımımız, HTML...

Pinterest sitesi hakkında fazla bilgi sahibi  biri olmadığım için pek bilgi veremeyeceğim. Pinterest nedir, ne işe yarar, neden kullanılır gibi soruları  hiç merak etmedim şu ana kadar. Alexa dünya sıralaması 29 olmasına rağmen bir türlü ısınamadığım bir ortam. En sevmediğim tarafı da site açılır  açılma koskocaman  Facebook ile üye ol,...

Flex uygulaması sitenizdeki çerçevelere animasyonlu grid (ızgara düzeni çerçeveler) özelliği eklemeye yarayan ve benzerlerinden çok farklı olan bir çalışmadır. Benzerleri arasındaki farkı mouse çerçevelerin üzerine geldiği anda çerçeve genişler ve içerik daha büyük bir şekilde görünür. Bu işlem sırasında diğer elemanların bulunduğu çerçeveler de orantılı olarak küçülürler ve web sitesinde...

Gridster web sitenizdeki çerçevelere grid düzeni sağlamakla beraber bu çerçeveler sürükle bırak özelliği sayesinde yer değiştirebilme özelliği de ekliyor. Gridster’in eksik kalan yanı yer değiştirdiğiniz elemanların otomatik olarak boyut değiştirememeleridir. Aynı yap-boz şeklinde bir elemanı tutup diğer elemanın yerine koyabiliyorsunuz. Javier Sánchez’in yapmış olduğu bir çalışma

Grid-Style jQuery grid  eklentileri  tarzında hazırlanmış ve  görüntü  olarak premium şablonları  andıran bir Wp fotoğrafçı şablonu. Yönetim paneli üzerinden hiçbir  ayar gerektirmediği  için kullanımı oldukça basittir. Tek bir  sidebar  bölümü bulunuyor. Footer  bölümü  Facebook tarzında hazırlanmış. Sayfa aşağı indirdiğinizde  daha eski yazıları görebilmeniz için Load More diye bir link  ile...

Websitemi  sürekli takip ediyorsanız eğer birçok grid örneği paylaştığımızı görmüşsünüzdür. Normalde kolay kolay bir çalışma  için mükemmel, süper gibi kelimeleri  başlık olarak kullanmam. Ama Minh Nguyen tarafından geliştirilmiş olan FreeWall  uygulaması için hazırlanmış demo sayfasını görünce içimden böyle bir başlık eklemek geldi.  FreeWall’da sürükle bırak özelliği  yok. Sanırım tek eksiği bu....

Shapeshift uygulaması  drag&drop dediğimiz  sürükle  bırak yöntemi ile  nesneleri taşımaya  yarayan bir uygulamadır . Scott Elwood tarafından hazırlanan Shapeshift ile kolaylıkla  sürükle  bırak özelikli örnekler  hazırlayabilirsiniz.  Dokunmatik cihazlar  tarafından  da  kullanılabildiği gibi grid  yani ızgara düzenide bulunuyor. Bir çerçeveden diğerine  nesneleri sürüklediğinizde çerçeve içindeki diğer nesneler otomatik kayarak sürüklediğiniz nesneye yer...

CollagePlus  Ed Lea tarafından fotorağ galerilerinizde  ızgara düzeni (grid) kullanabilmeniz  için hazırlanmış bir jQuery eklentisidir. CollagePlus  birbirinden farklı  boyutlarda  olan resimlerin tamamını eşit  oranda ayarlayarak websayfasında düzenli bir görüntüye sahip olmalarını sağlar. Daha önceleride bir çok grid çalışması  paylaşmıştık sizlerle. Her  biri farklı özelliklere sahip çalışmalardı. Hepsinin  amacı aynı olsada çoğunun...