[WebTech #69] CSS > 4. CSS 範例 > 4-4 視覺元件 > 4-4-6 表單(Forms)
使用 CSS3,也能做出非常令人讚嘆的表單。讓我們來看點例子:
登入表單(一般):
- http://tympanus.net/codrops/2012/03/27/login-and-registration-form-with-html5-and-css3/
- http://www.red-team-design.com/css3-signup-form
登入表單(精緻):
- 可立體翻轉(點右上角): http://tutorialzine.com/2012/02/apple-like-login-form/
- 可計算密碼強度: http://tutorialzine.com/2012/06/beautiful-password-strength-indicator/
搜尋框表單:
http://www.hongkiat.com/blog/css3-search-field/
檔案上傳表單:
http://designmodo.com/create-upload-form/
---
最棒的 CSS Selector 或 Properties 線上參考手冊:
(進入後,Selector 在中央,Properties 在左下選單)
http://www.w3schools.com/cssref/css_selectors.asp
codrops tutorial 在 紀老師程式教學網 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
codrops tutorial 在 紀老師程式教學網 Facebook 八卦
[WebTech #68] CSS > 4. CSS 範例 > 4-4 視覺元件 > 4-4-5 下拉式功能表與對話框
下拉式功能表(Dropdown List):
http://tympanus.net/codrops/2012/10/04/custom-drop-down-list-styling/
對話框(Dialog Box):事實上,我這邊舉例的比較像「跳出式視窗(Pop-up Box)」
(1) http://www.inserthtml.com/2012/05/zoom-dialogue-pop-boxes/
(2) http://spyrestudios.com/how-to-create-a-sexy-vertical-sliding-panel-using-jquery-and-css3/
---
最棒的 CSS Selector 或 Properties 線上參考手冊:
(進入後,Selector 在中央,Properties 在左下選單)
http://www.w3schools.com/cssref/css_selectors.asp