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... Devamını oku →
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... Devamını oku →
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,... Devamını oku →
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... Devamını oku →
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
Christoph Ono tarafından geliştirilen bu eklentinin demo resmine ilk baktığımda muhteşem efektlerle donatılmış bir galeri örneği ile karşılaşacağımı zannetmiştim. Eklentinin amacı websayfasını ızgaralandırma ve facebook tarzı sayfa yükleme . Sayfa içerisinde eklenti sayesinde büyük küçük değişik boylarda çerçeveler oluşturulmuş.
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... Devamını oku →
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.... Devamını oku →
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... Devamını oku →
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... Devamını oku →
