Japon sitelerin listelendiği, yeni ve kaliteli web tasarım örneklerini görebileceğiniz, 9 web tasarım galerisi site aşağıda listelenmiştir.
the css gallery list , urbantrash.net css gallery list ve instantshift 123 web galeri adreslerini ziyaret ederek tüm dünyadan web tasarım örneklerinin listelendiği, web tasarım galerilerine ulaşabilirsiniz.
Aslında ilk olarak bir web tasarım projesi için kendime sade bir görsel galerisi çözümü arıyordum ancak araştırmamı ilerlettikçe İnternet üzerindeki tüm başarılı görsel galerilerinin yer aldığı bir makale yazmanın ne kadar kullanışlı olabileceğinin farkına vardım ve sonuçta da bu yazıyı yazdım. Listeyi AJAX, JavaScript ve Lightbox tabanlı galeriler, CSS tabanlı galeriler ve Flash tabanlı galeriler olmak üzere 3 ana kategoriye ayırdım bu sayede doğrudan ilgilendiğiniz kategorideki örnekleri inceleyebileceksiniz. Eminim listede bu alanda herhangi bir gereksinimi olan herkesin işine yarayacak bir çözüm mutlaka vardır.
AJAX, JavaScript (jQuery, mooTools), Lightbox Tabanlı Galeriler
1. Jon Design’s SmoothGallery
mooTools 1.11 kütüphanesini kullanan bu JavaScript galerisi ve slayt gösterisi sistemi, geçiş efekti içeren yumuşak görünümlü görsel galerileri, slayt gösterileri, vitrinler ve diğer güzel görünümlü içerikleri web siteniz üzerinde kullanabilmenizi sağlıyor. Site üzeride aynı kodu kullanan 7 farklı galeri örneği bulacaksınız. Dilediğiniz örneği indirebilir ve bilgisayarınız üzerinde test edebilirsiniz.
Diğer sistemlerin aksine JonDesign’ın SmoothGallery betiği en başından itibaren web standartları ile uyumlu olacak şekilde kodlanmış durumda. Galeriyi dilediğiniz belge üzerinden besleyebilir, özel CSS seçicilerini kullanabilirsiniz. Daha da iyisi bu gelişmiş betiğin kullandığı kod sadece 24KB.
CSS’yi kodlamak kolay olabilir ancak buna rağmen her kodcuyu delirtebilecek bazı konseptleri de bulunmaktadır. Bu yazımızda kimilerine göre zor olan ancak anlaması oldukça kolay olan CSS derslerini bir araya getirerek CSS bilginizi bir adım daha ileriye taşımanıza yardımcı olacak dersleri inceledik.
1. CSS Sekmeler ve Navigasyon
1.1. Genişleyebilen CSS Sekmeleri Dersi
Genişleyebilir CSS sekmelerinin anlamı, sekmenin içerisindeki metnin uzunluğuna göre genişleyebilen sekme başlıklarıdır. Kodun özünde start.gif ve end.gif adında iki adet görsel bulunuyor. start.gif görseli boyutu genişletmek için kullanılırken end.gif görseli değişmeden kalıyor.
1.2. Gelişmiş CSS Menüsü
Bu rehberde Photoshop’taki watercolor efektini nasıl tasarlayabileceğiniz anlatılmış. Bu rehber size adım adım bir menü tasarımını nasıl kırpabileceğinizi ve ardından CSS kullanılarak nasıl onları bir araya getirebileceğinizi gösteriyor. Pek çoğunuz muhtemelen dikey ya da yatay menünün CSS ile nasıl kodlanacağını bilyorsunuzdur. Gelin şimdi bunu bir sonraki seviyeye taşıyarak CSS’nin position özelliğini kullanan gelişmiş bir menü tasarlayalım.
site tasarımıyla gerek hobi olarak gerekse de profesyonel olarak ilgilenen birçok tasarımcının ziyaret ettiği galeriler vardır (liste 1, liste 2). herhangi bir tasarıma başlamadan önce bu tarz galerilerin taranması, esinlenmek için bazı parçaların toplanmasında bir zarar yok sanırım. ancak bazen iş abartılıyor.
şurada konu ile ilgili çok güzel bir derleme yapılmış. hangi tasarımların nerelerden, ne şekilde alındığını görmek isteyenler inceleyebilir. işlemin wordpress tema yönünün sistematik anlatımı için de şuraya bakabilirsiniz.
“kötü tasarımcı kopyalar, iyi tasarımcı çalar” sözü bir nebze de olsa doğru sanırım.
internette site tasarımlarını değerlendiren birçok site mevcut. bu galerilerden biri de nice stylesheet. hoş tasarımları incelerken sade, koyu, iki sütünlu gibi kriterlere göre gezinti yapabilirsiniz.
webdesignerwall.com sitesi, css, css + jquery, css + sIFR, css + jQuery + sIFR kullanarak resimlere hükmetmenin yollarını gösteren yazısı ile css’nin önemini birkez daha kanıtlamış.
Arkaplan atama, etiketleme, çerçeve içine alma, köşeleri şekillendirme, yazı yazmak gibi çeşitli efektlerin uygulanabilirliğini gösteren örnekler ile desteklenen yazı, grafik programları ile zaman kaybetmenin önüne geçiyor.Site düzenlemelerinden sonra (renk vs. gibi) resimler üzerinde yapmak zorunda kalabileceğimiz değişiklikler içinde, resimleri tekrar düzenlemeyi ortadan kaldırabilir.
Nette oldukça çok, irili ufaklı css galerileri var, ancak blog galerileri yeni yeni türemeye başladı. Bunlara bir örnek Blogoyla, blogları listelemek ,tanıtmak ve ziyaretçiler tarafından değerlendirilmesini sağlamak amacıyla ve sadece blogları kabul eden wordpress tabanlı bir sistem ile hazırlanmış bir proje. Blogekle bölümünden siz de blogunuzu ekleyebiliyorsunuz. Eğer onaylanırsa galeride yerinizi alıyorsunuz.
Ziyaretçiler blogunuz hakkında yorum yapabiliyor ve puan verebiliyorlar. Blograzzi gibi kapsamlı bir şey değil ancak daha sade ve oldukça şirin bir blog tanıtım galerisi..
Fevkalade çalışmalar , css ile ilgili görülmesi gereken kaynaklar ve ilhan alınası tasarımlar.
Daha evvel burada konu olmamış yeni tasarım kaynaklarını bu yazımda derleyeceğim.
Kaynak niteliği taşıyan Css adresleri ile başlıyalım.
CSSGaleri, CSS ile tasarlanmış web sitelerini listelemek ve tanıtmak amacıyla Sercan Çakır tarafından hazırlanmış bir proje. Site ekle bölümünden siz de web sitenizi ekleyebiliyorsunuz. Eğer onaylanırsa galeride yerinizi alıyorsunuz.
Bunun yanında Haberler bölümünden CSS ile ilgili önemli kaynaklara ulaşabilmeniz de mümkün.
