css galeri | bildirgec.org

css'in mükemmel özelliklerini kullanarak web siteleri derli-toplu hale getirilebileceği gibi şık uygulamalar ile ziyaretçilerinize hoş karşılamalar yapabilirsiniz. Aşağıda metin efektleri, bilgi kutucukları gibi çeşitli uygulamalar bulunmakta bunlardan mutlaka hoşunuza gidecek uygulamaların olduğunu düşünüyorum.
1- css hover effec - demo
mouse imleci ile üzerine gelindiğinde renk değiştiren kutucuklar oluşturabilirsiniz.

2- css gradient text effect - demo - download
metinlerinize ışık efekti verebileceğiniz bir uygulama.

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.

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.

Örnek adreste görülebilecek, huddle together tarafından geliştirilmiş LightBox2 ile süslenmiş resim galerisini, html ve css bilgisi olmadan , fotoğrafların boyutlarını değiştirmek için başka programlara ihtiyaç duymadan sadece tek bir tıklama ile oluşturmaya imkan veren, küçük boyutu ile büyük işler yapan, LightBox2 JS Resim Galerisi Oluşturucusu.

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.

Css Galaxy

Css Love

Css Princess