[範例] 以 CSS 與 JavaScript 做出 3D 視差(Parallax)效果的立體邊框
這篇文章示範了如何利用 CSS 與 JavaScript 做出 3D 視差效果,並用此效果呈現出立體邊框。如果您想要讓自己的輸入框被使用者「更加」注意到的話,不妨用這招試試看:
http://css-tricks.com/3d-inset-parallax-effect/
---
歡迎加入 Google+ 「紀老師網頁程式設計」私密社團,完全免費!盡情學習 HTML、CSS、與 JavaScript:
(更多資源、更快速的分享、更專注的主題、更多樣的活動)
https://plus.google.com/communities/100793154849235819235
(申請制,點擊後請靜待至多 24 小時審核)
同時也有10000部Youtube影片,追蹤數超過2,910的網紅コバにゃんチャンネル,也在其Youtube影片中提到,...
css parallax effect 在 紀老師程式教學網 Facebook 的最佳貼文
[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