Search
掌握進階的 css 動畫( animation )、轉場( transitions )和轉換( transforms )，並實踐 100 個創造性的範例
https://softnshare.com/css-animation-transitions-and-transforms-creativity-course/
[WebTech #72] CSS > 4. CSS 範例 > 4-5 圖形處理 > 4-5-1 縮圖（Thumbnails）
喜歡拍照的朋友，一定會想要在一個網頁內，顯示越多圖片越好。那麼，您就不能錯過現在正要介紹的功能：縮圖（Thumbnails）。
用 CSS 呈現縮圖是相當方便、且效果多元的。本篇分享的縮圖效果有：一般、動畫（含：縮放、糊化、加註...）等效果。讓我們現在馬上就來看看吧！
一般縮圖：
(1) http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/perfectly-rotate-and-mask-thumbnails-with-css3/
(2) http://webdesignerwall.com/tutorials/creating-a-modern-lightbox-with-css3-and-javascript
(3) http://webdesignerwall.com/tutorials/css3-image-styles
動畫縮圖（縮放）：
(1) http://tutorialzine.com/2012/05/growing-thumbnails-portfolio-jquery-css3/
(2) http://www.tangledindesign.com/blog/enhancing-thumb-galleries-css3-transitions-transforms/
(3) http://tympanus.net/codrops/2012/01/04/thumbnail-proximity-effect/
(4) http://inspectelement.com/tutorials/create-a-css3-image-gallery-with-a-3d-lightbox-animation/
動畫縮圖（糊化，Blur）：
(1) http://www.red-team-design.com/css-filter-effects-in-action
動畫縮圖（加註，Annotation）：
(1) http://pehaa.com/2012/02/create-your-portfolio-gallery-using-html5-canvas-tutorial/
(2) http://tympanus.net/codrops/2011/12/26/css3-lightbox/
(3) http://tympanus.net/codrops/2012/01/09/filter-functionality-with-css3/
其它縮圖效果：
(1) http://tympanus.net/codrops/2012/07/20/3d-flipping-circle-with-css3-and-jquery/
底下這個雖然不算縮圖，不過它與製作縮圖所用的技巧差不多，因此我就把它放在這裡了：
* 使用 CSS 製作「便利貼」： http://net.tutsplus.com/tutorials/html-css-techniques/create-a-sticky-note-effect-in-5-easy-steps-with-css3-and-html5/
---
最棒的 CSS Selector 或 Properties 線上參考手冊：
（進入後，Selector 在中央，Properties 在左下選單）
http://www.w3schools.com/cssref/css_selectors.asp
[WebTech #70] CSS > 4. CSS 範例 > 4-4 視覺元件 > 4-4-7 Menu
這篇「分享+留言+按讚」沒破 50 我不甘心！！ ... XD
說真的！這篇我花的整理功夫，至少有七小時以上！因為使用 CSS3 製作 Menu 的範例實在太豐富！我不忍割捨任何一個。加上要想出個面面俱到的分類方法，又花了我不少時間審視手上所有收集到的文件。因此，這麼辛苦才收集齊全、分類完善的文章，請大家稟著「良心」（奸笑），按下一個「讚」吧！
每篇網頁一定都會有所謂「導覽列」。有些是「置頂」，有些是在「左側」。所以我將上百篇文章，精選出來的 28 篇，依照「側邊單層」、「側邊多層」、「頂邊單層」、「頂邊多層」、以及「華麗型導覽列」五大類別，幫各位分類。相信在小弟的幫助之下，您下次想製作「頂邊、側邊」，「單層、多層」，都能「一發中的」。話不多說，以下就是我精選出來的 28 篇 Menu 範例：
「側邊單層」（Sidebar, Single Layer）：
(1) http://www.netmagazine.com/tutorials/swishy-css3-navigation
(2) http://tympanus.net/codrops/2012/02/21/accordion-with-css3/
(3) http://designmodo.com/accordion-css3/
(4) http://www.hongkiat.com/blog/css-content-accordion/
(5) http://www.sitepoint.com/css3-sliding-menu/
(6) http://tympanus.net/codrops/2011/10/24/creative-css3-animation-menus/
(7) http://tympanus.net/codrops/2011/10/19/blur-menu-with-css3-transitions/
「側邊多層」（Sidebar, Multi-layers）：
(1) http://webdesign.tutsplus.com/tutorials/site-elements/orman-clarks-vertical-navigation-menu-the-css3-version/
(2) http://designmodo.com/css3-accordion-menu/
(3) http://www.alessioatzeni.com/blog/css3-menu-navigation-effect/
「頂邊單層」（Navigation Bar, Tabbed）：
(1) http://webdesign.tutsplus.com/videos/how-to-create-a-css3-tabbed-navigation/
(2) http://webdesign.tutsplus.com/tutorials/site-elements/how-to-create-a-modern-ribbon-banner-navigation-bar-with-pure-htmlcss3/
(3) http://tympanus.net/codrops/2012/04/12/animated-content-tabs-with-css3/
(4) http://tutorialzine.com/2010/01/halftone-navigation-menu-jquery-css/
(5) http://www.marcofolio.net/css/the_apple.com_navigation_menu_created_using_only_css3.html
(6) http://tympanus.net/codrops/2012/06/12/css-only-responsive-layout-with-smooth-transitions/
「頂邊多層」（Navigation Bar, Drop-down List）
(1) http://www.webdesignerdepot.com/2012/08/create-a-stunning-menu-in-css3/
(2) http://www.alessioatzeni.com/blog/css3-dropdown-menu/
(3) http://www.script-tutorials.com/css3-green-marble-menu/
(4) http://designmodo.com/css3-dropdown-menu/
(5) http://www.script-tutorials.com/pure-css3-lavalamp-menu/
(6) http://tympanus.net/codrops/2010/07/16/slide-down-box-menu/
「華麗型」（非傳統「置邊」或「置頂」的導覽列）：
(1) http://webdesign.tutsplus.com/tutorials/site-elements/how-to-create-a-css3-wheel-menu/
(2) http://www.inserthtml.com/2012/09/rotating-menu/
(3) http://tympanus.net/codrops/2012/07/02/swatch-book-with-css3-and-jquery/
(4) http://tympanus.net/codrops/2012/03/23/responsive-content-navigator-with-css3/
(5) http://www.alessioatzeni.com/blog/css3-with-jquery-reverse-animation/
(6) http://tympanus.net/codrops/2010/06/28/awesome-cufonized-fly-out-menu/
貼完了～請來賓掌聲鼓勵...（敬禮）
---
最棒的 CSS Selector 或 Properties 線上參考手冊：
（進入後，Selector 在中央，Properties 在左下選單）
http://www.w3schools.com/cssref/css_selectors.asp
css animation 範例 在 網頁前端工程進階：CSS 3 animation 基本動畫特效教學By 彭彭 的必吃
CSS 3 動態效果支援：使用 animation 和@keyframes 設定產生網頁中的動畫或是特效， ... 網頁前端工程入門：HTML DOM - 選單開合 範例 By 彭彭. ... <看更多>