天天看點

推薦60多個CSS GALLERY畫廊網站

因為我個人平常就比較喜歡浏覽Gallery站點,再加上這篇收集,總結一些小小的經驗與大家分計和探讨,主要是做為一個收集展示畫廊應該注意的一些地方:

求量同時求精。如果你想要被搜尋引擎大量收錄,想要更多的人知道你的網站,當然要從數量下功夫,但也不能亂收集。至少要在一定程式上保證收集的網站設計的品質。當然,這根本不算個問題,優秀的網站設計實在太多了,隻怕你收不完。

良好的導航系統。收集的網站過多了,一個良好的導航就顯得非常重要了,那些收錄幾千幾萬網站設計的畫廊,卻隻是給個分頁導航,我不知道這幾千幾萬要了幹嘛。通常,如果能做到按網站配色和内容進行分類,已經很不錯了。

突出自己的網站個性。這适用于任何一個網站,畫廊站點當然适用,特别是Gallery站點也是相當的多,而且有着其獨特性: 相對于其它類型的網站注重搜尋引擎,Gallery站點對”回頭客”的比例更加的注重。說實話,要想Gallery站點的頁面在搜尋引擎獲得良好的關鍵字排名不太現實。是以,塑造出自己的個性,抓住設計愛好者的眼球才是最重要的。

自己收集還是讓使用者送出。讓使用者送出當然是最圓滿的,省時省力同時還容易建立人氣。但要做到擁有大量的使用者,那還真是相當的困難。

網站的設計。一個設計愛好者,到一個Gallery站點,就是為了享受視覺。是以,你收錄很多優秀的設計同時,你網站本身的設計也是相當重要的,尤其是網站的整個配色基調,将影響到收錄作品的視覺傳達。最常見的Gallery配色要麼使用白底顯得清新,要麼使用黑底更加凸現出收錄作品。而似乎黑色背景讓人在浏覽時更加舒服。

縮略圖。這也是一個很重要的部分。最常見的縮略圖展示,要麼就是截取所要收錄的網站設計中最醒目的一部分設計截圖進行展示。要麼直接截屏,讓使用者能夠直覺的看到将要到達的網站的總體設計。

OK, 開始品嘗帕蘭為你準備的這些Gallery美食吧:)

<a href="http://www.cssdrive.com/" target="_blank">CSS Drive</a>

收錄各種網頁設計。含評級功能,設計技巧新聞欄目,擁有一個論壇和CSS菜單收錄專項。主要按網站類型,網頁布局和風格分類。

<a href="http://www.css-website.com/" target="_blank">CSS Website</a>

非常清新簡單的一個CSS Gallery站點。每個收錄的設計顯示評級和留言數,可以通過色彩,收錄日期和網站類型進行進階搜尋。 

<a href="http://www.csselite.com/" target="_blank">CSSelite</a>

分類比較簡單,按設計風格和網站類型。沒有評級功能,單頁有相關的網站設計展示,首頁有一些來自其它網站最新的設計技巧文章連結。

<a href="http://www.cssbeauty.com/gallery/" target="_blank">CSS Beauty</a>

比較知名的網頁設計資源站點CSS Beauty的Gallery子站點。沒有評級,沒有留言等據顯示。非常單一的顯示最新的20個收錄設計,可以按日期歸檔進行查詢。是比較清新簡潔了,但同時意味着失去了一個良好的導航。

<a href="http://www.cssheroes.com/" target="_blank">CSS Heroes</a>

顯示留言數和評級功能。按網站類型進行分類。黑色背景的Gallery站點在浏覽時感覺很舒服,但同時會讓人對所收錄作品的優秀産生錯覺判斷,也就是說,一些可能并不太漂亮的設計,會凸現的很醒目。個人看法。

<a href="http://www.cssbloom.com/categories/css-gallery/" target="_blank">CSS Bloom</a>

部落格一欄式的收錄展示畫廊,按網站類型和所使用的技術進行分類。帕蘭個人不太喜歡這種類型的畫廊,雖然站點縮略圖比較大,但老需要滾屏,很麻煩。顯示留言數和評級功能。

<a href="http://www.free-css.com/css-gallery.php" target="_blank">CSS Gallery (CO UK)</a>

一個英國的CSS畫廊站點。沒有評級,沒有分類,不過卻有XTHML和CSS驗證功能。相信站長在收錄時也是嚴格按照W3C的标準進行收集。另外,這個站點還設有其它一些非常有用的欄目,比如免費的CSS菜單,CSS使用教程,CSS布局等等。

<a href="http://www.cssheaven.com/" target="_blank">CSS Heaven</a>

<a href="http://www.cssgallery.ro/galerie.html" target="_blank">CSS Gallery (Ro)</a>

一個羅馬尼亞的CSS畫廊站點。包含評級功能和留言數顯示,以及網站作者。沒有發現分類功能。網站的整體設計趨于Web2.0風格,但個人還是不喜歡它的底色造成的視覺反差。

<a href="http://www.csszone.org/" target="_blank">CSS Zone</a>

按網站類型分類,有評級功能,還算不錯。

CSS coosite

<a href="http://www.unmatchedstyle.com/" target="_blank">Unmatchedstyle</a>

分類相對來說籠統一點。不過網站整體設計還是比較優秀的,有利于浏覽欣賞。同時提供一些來自其它網站的設計資源連結。

<a href="http://cssvault.com/gallery/" target="_blank">CSS vault</a>

有評級和留言功能。但是卻是按日期存檔進行分類。 我不知道這樣的分類有多大意義,一個好的設計不在乎時間。

<a href="http://www.cssimport.com/" target="_blank">CSS import</a>

沒有分類。不過可以按最熱點選,最多浏覽,名稱和評級等進行排序浏覽。

<a href="http://www.css-galleries.com/" target="_blank">CSS Galleries</a>

這是一個專門聚合其它CSS畫廊站點收錄作品的站點。比如我們上面提到的CSS Drive。但是沒有分類,沒有評級。還一直讓我Stand by… 無語。

<a href="http://bestwebgallery.com/" target="_blank">Best Web Gallery</a>

來自Nick la的畫廊站點,這應該是所有畫廊站點裡面最優秀之一了。按TAG标簽分類,浏覽布局可以切換為一欄式,兩欄式以及含站點介紹資訊的布局。滑鼠浮動在站點上面時,會顯示大的縮略圖。不管從技術性還是收錄網站的設計水準,都絕對是一流。就像Nick la說的那樣,他的收錄标準是: 一個高品質的設計=視覺+技術+創意。帕蘭曾非常不自量力的送出自己的站點,結果… 呃,當然是可想而知了。

<a href="http://www.css20.com/" target="_blank">CSS Gallery 2.0</a>

網站設計比較清新。 含評級功能,有很多相關的最新設計技巧資源,比如Flash設計資源,CSS設計資源,設計工具資源等等。

<a href="http://www.cssleak.com/" target="_blank">CSS leak</a>

有評級功能。 有相關設計新聞。可以按熱門評級,熱門點選等進行排序浏覽。可以按月或者是按網站配色進行浏覽。

<a href="http://www.cssglance.com/category/gallery/number-of-columns/vcol2/" target="_blank">CSS Glance</a>

這也是一個比較優秀功能比較豐富的畫廊站點。可以切換浏覽布局,有評級和HTML校驗功能。 最優秀的地方在于,它的分類非常詳細,可以按網站所使用的程式,網站配色,網站所在國家,網站布局有幾欄,網站内容,日期歸檔,布局技術甚至是菜單幾格進行浏覽。同時,支援标簽搜尋功能。推薦。

<a href="http://www.csstux.com/" target="_blank">CSS TUX</a>

一個充滿圓角設計的CSS畫廊站點。按網站類型和内容進行分類。看上去非常酷,不過導航系統還是欠缺了點。

<a href="http://www.cssbased.com/" target="_blank">CSS based</a>

含評級功能和提供一些相關的設計資源,但惟乎沒有分類系統。

<a href="http://www.cssburst.com/" target="_blank">CSS Burst</a>

好像是一個上線不久的CSS畫廊站點,收錄的作品不多。不過都還算比較精緻,網站的設計所制造出的視覺浏覽體驗也比較好。 但似乎同樣缺乏一個良好的導航。

Best CSS Gallery

<a href="http://www.designshack.co.uk/" target="_blank">Deisgn Shack</a>

附加一些最新的設計資訊。但同樣沒有良好的浏覽導航。

<a href="http://css-warfare.com/" target="_blank">CSS Warfare</a>

含評級功能,按網站風格進行分類。

<a href="http://css-demo.com/" target="_blank">CSS Demo</a>

比較個性的CSS示範站點,但确實不實用。

CSS Galaxy

也是非常個性,隻是網站縮略圖小了點。按設計類型進行分類。

<a href="http://www.cssfill.com/" target="_blank">CSS FILL</a>

按網站類型進行分類,截取網頁的很細一部分做為縮略圖。 有點唬爛。

<a href="http://www.cssclip.com/" target="_blank">CSS Clip</a>

有評級功能。縮略圖比較上,不過功能還是非常強大。收集的設計種類也比較多,可以按設計類型,網站配色等進行浏覽。隻是感覺這個畫廊站眯的設計相對的擁擠了一點。

<a href="http://csscollection.com/" target="_blank">CSS Collection</a>

按網站内容進行分類的設計收集站點。

<a href="http://www.ceeses.com/" target="_blank">CeeSes</a>

有評級功能,網站整體比較清新。

<a href="http://galerie.crooco.com/index.php?p=galerie" target="_blank">CSS Galerie</a>

縮略圖比例不太恰當,且排版過于擁擠。

<a href="http://csshazard.com/" target="_blank">CSS Hazard</a>

趨于收集非主流的個性設計。給人妖豔怪異的感覺,非常适合那些崇尚個性的朋友。另外 ,可以按網站配色标簽進行浏覽。

<a href="http://cssmania.com/" target="_blank">CSS Mania</a>

這個畫廊站點設計總體來說比較清新,按網站内容進行分類。

CSS Reboot

主要按網站配色進行分類,不過最大的特點是,縮略圖展示的區域比較多,可以很清楚的看出一個網站的設計。

<a href="http://cssprincess.com/" target="_blank">Prin CSS</a>

有評級功能,分類和标簽結合的比較好,可以按網站配色,使用的技術,網站内容等來進行浏覽。

<a href="http://cssremix.com/" target="_blank">CSS Remix</a>

這個CSS畫廊站點也算是比較知名的了,我覺得它最大的特色就如同域名所指出的那樣,混合,感覺似乎想要把所有站點拼成一幅圖畫似的。我個人不太喜歡這種全部擠在一起影響視覺判斷的GALLERY站點,但其收錄的資源确實相當的豐富,且品質都很高。

<a href="http://csssmoothoperator.com/" target="_blank">CSS SMOOTH OPERATOR</a>

分類過于單一,不過網站設計的挺個性的。

<a href="http://csslove.net/" target="_blank">CSSlove</a>

沒有分類,沒有評級,就顯示個名稱和縮略圖,廣告和其它Widget比主體内容還要多。

<a href="http://www.piepmatzel.de/" target="_blank">Piepmatzel</a>

百萬格式式的網站設計收藏展示站點。像這樣的網站有很多,怎麼說呢,雖然缺乏良好的導航,詳細的資訊介紹,但這樣的設計展示還是蠻有趣的。至少站長願意犧牲網頁打開速度可能流失的使用者和本該屬于廣告位的空間,這樣的站點更多趨于那些真心想要分享美好設計的朋友。

<a href="http://www.mostinspired.com/" target="_blank">Most Inspired</a>

這站點除了本身收集展示網站設計,同時還聚合其它熱門的GALLERY站點的收集。

<a href="http://www.designsnack.com/" target="_blank">Design snack</a>

有評級功能,按網站内容進行分類。

<a href="http://www.cssimpress.com/" target="_blank">CSS impress</a>

按網站内容進行分類,有評級功能。整體設計比較清新,縮略圖展示區域也比較多。

<a href="http://www.lightondark.com/sites/" target="_blank">Light on dark</a>

導航不夠完善,但非常優秀。 我喜歡這個畫廊站點的另一個原因是他所傳達出來的概念,Light on dark。做為一個畫廊站點,站點本身應該是綠葉,所收集的網站設計才是紅花。這也跟帕蘭一貫對設計的看法相同: 世界本是無色的,因為設計而變得豐富多彩。

<a href="http://screenfluent.com/" target="_blank">Screen Fluent</a>

收錄近7000個優秀的網站設計。沒有評級,沒有好的導航。有Lightbox的預覽功能。是以,有得必有失。

<a href="http://www.webcreme.com/" target="_blank">Web Creme</a>

這恐怕是我個人到目前為止最喜歡的“一行隻展示一個作品”的畫廊站點了。界面清新,縮略圖品質和可預覽區域也比較廣。推薦。

<a href="http://styleboost.com/" target="_blank">Styleboost</a>

相對于其它Gallery站點強調的視覺感官欣賞。Styleboost更加注重對每個網頁設計的介紹。同時,你可以在Styleboost進行注冊,收錄你喜歡的網站到你的帳戶空間裡面。

<a href="http://www.w3csites.com/" target="_blank">W3C Sites</a>

收錄優秀且符合W3C标準的網站,附有XTHML校驗功能。每個網站都有簡短的描述介紹。支援使用者注冊,看上去注冊的人還挺多,網站的大部分内容也是由使用者提供。

<a href="http://www.refreshlinks.org.uk/" target="_blank">Refresh</a>

絕佳的畫廊展示站點。 有評級功能的簡短的收錄設計描述。整個站點設計簡潔美觀大方。我最喜歡的是他們的Logo,非常的贊.

<a href="http://www.edustyle.net/" target="_blank">edustyle</a>

類似Digg的投票制度,這也是在這個名單面唯一的一個讓你對網站設計進行贊同時也可以進行鄙視的網站。

<a href="http://www.designcreme.com/" target="_blank">Design Creme</a>

收錄的設計還不是太多。 可以按标簽和分類進行浏覽。

<a href="http://www.designbygrid.com/" target="_blank">Design by Grid</a>

專門收集展示網格設計的GALLERY站點。還包括相關的日志,教程和資源。如果你像帕蘭一樣鐘愛網格設計,那這個站點一定不能錯過。

<a href="http://www.coolsitecollection.com/" target="_blank">Cool site Collection</a>

有評級功能,還行吧。

<a href="http://www.cartedup.com/sites/archive" target="_blank">Carted up</a>

本身就是網格設計的GALLERY站點,工整美觀。Tag标簽系統也利用的比較好,友善使用者的過濾欣賞。

<a href="http://www.plasticpilots.com/" target="_blank">Plasticpilots</a>

分類比較詳細,每個站點都有簡短的描述。

<a href="http://www.inspirationking.com/" target="_blank">Inspiration King</a>

導航比較欠缺。

<a href="http://www.cssdump.com/" target="_blank">CSS Dump</a>

最後這個完全缺乏視覺設計的Gallery站點,隻為你了向你說明一個道理: 如果你是一個設計愛好者,哪怕你完全不懂設計,隻是喜歡欣賞,你想要展示分享自己發現的美好設計。那即使你使用WP的預設主題來收集,你同樣可以體驗分享的快樂。

OK,如果你知道其它優秀的Gallery畫廊站點,也歡迎在些留言提出。

<a target="_blank" href="http://www.cnblogs.com/lhb25/p/must-read-links-for-web-designers-and-developers-volume-12.html">Web 前端工程師和設計師必讀精華文章推薦</a>

<a href="http://www.cnblogs.com/lhb25//lhb25/archive/2011/07/28/html5-awesome-single-page-sites-inspiration.html" target="_blank">酷!15個精美的 HTML5 單頁網站作品欣賞</a>

<a target="_blank" href="http://www.cnblogs.com/lhb25//lhb25/archive/2011/11/22/best-awesome-css3-animation-demos.html">炫!35個讓人驚訝的 CSS3 動畫效果示範</a>

<a href="http://www.cnblogs.com/lhb25//lhb25/archive/2012/03/02/30-mind-blowing-parallax-scrolling-effect-websites.html" target="_blank">贊!30個與衆不同的優秀視差滾動效果網站</a>

<a target="_blank" href="http://www.cnblogs.com/lhb25//lhb25/archive/2012/01/13/25-outstanding-single-page-website-designs.html">靓å!25個優秀的國外單頁網站設計作品欣賞</a>

<a target="_blank" href="http://www.cnblogs.com/lhb25//lhb25/archive/2011/08/09/awesome-html5-and-javascript-effects.html">帥!8個驚豔的 HTML5 和 JavaScript 特效</a>

<a href="http://www.cnblogs.com/lhb25//lhb25/archive/2011/06/27/35-exclusive-rainbow-colored-flash-websites.html" target="_blank">頂!35個很漂亮的國外 Flash 網站作品欣賞</a>

<a href="http://www.cnblogs.com/lhb25//lhb25/archive/2011/08/24/outstanding-admin-panels-part-one.html" target="_blank">哇!34個漂亮網站和應用程式背景管理界面</a>

推薦60多個CSS GALLERY畫廊網站

<a href="http://www.yyyweb.com/go/web" target="_blank">本部落格新站點 ◆ 前端裡 ◆ 歡迎圍觀:)</a>

歡迎任何形式的轉載,但請務必注明出處。

繼續閱讀