[WebTech #74] CSS > 4. CSS 範例 > 4-5 圖形處理 > 4-5-3 幻燈秀

如果你不想小家子氣地秀一些「縮圖」，何妨把它們放大後做成幻燈秀？這邊有一些幻燈秀的效果，您都可以看線上示範、並且免費取得原始碼喔！

先介紹點一般的幻燈秀：
(1) http://tympanus.net/codrops/2012/04/30/fluid-css3-slideshow-with-parallax-effect/
(2) http://tympanus.net/codrops/2012/06/05/fullscreen-slit-slider-with-jquery-and-css3/
(3) http://tympanus.net/codrops/2011/10/10/circle-navigation-effect-with-css3/
(4) http://www.inserthtml.com/2012/09/flipbook-jquery-css/
(5) http://designmodo.com/slider-css3/

底下也是幻燈秀，不過效果非常絢麗：
(1) http://tympanus.net/codrops/2010/06/27/beautiful-photo-stack-gallery-with-jquery-and-css3/
(2) http://coding.smashingmagazine.com/2012/04/25/pure-css3-cycling-slideshow/
(3) http://tutorialzine.com/2012/03/instagram-magazine-php-jquery/
(4) http://tympanus.net/codrops/2012/06/06/image-accordion-with-css3/

這個嚴格上來講不算幻燈秀，應該算「照片濾鏡」。不過因為也可以與幻燈秀一起用，我就放在這裡了：
(1) http://www.inserthtml.com/2012/06/css-filters/

---
最棒的 CSS Selector 或 Properties 線上參考手冊：
（進入後，Selector 在中央，Properties 在左下選單）
http://www.w3schools.com/cssref/css_selectors.asp

[WebTech #73] CSS > 4. CSS 範例 > 4-5 圖形處理 > 4-5-2 游標凌空特效

目前國外的網頁設計風格，正在流行所謂「高效响應風格」（High Responsive Style）。所謂「高效响應風格」，就是使用者做任何事情，畫面都得有個反應，讓使用者潛意識確認「我做對了！」。而「游標凌空特效」（Hover Effect），更是這次「高效响應風」裡，必備的要素之一。

所謂「游標凌空特效」，就是你將滑鼠游標移至可點選、或是希望使用者注意的地方時，都得有「放大」、「糊化（Blur）」...等特效，來吸引使用者。這裡我幫大家整理了一些「游標凌空特效」，希望大家喜歡：

(1) http://tympanus.net/codrops/2012/06/18/3d-thumbnail-hover-effects/
(2) http://tympanus.net/TipsTricks/DirectionAwareHoverEffect/
(3) http://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/
(4) http://tympanus.net/codrops/2012/05/14/annotation-overlay-effect-with-css3/
(5) http://tympanus.net/codrops/2012/08/08/circle-hover-effects-with-css-transitions/
(6) http://www.freshdesignweb.com/css3-hover-effects-with-websymbols-tutorial.html
(7) http://www.hongkiat.com/blog/css3-image-captions/


---
最棒的 CSS Selector 或 Properties 線上參考手冊：
（進入後，Selector 在中央，Properties 在左下選單）
http://www.w3schools.com/cssref/css_selectors.asp