[WebTech #64] CSS > 4. CSS 範例 > 4-4 視覺元件 > 4-4-1 單選與多選按鈕
在人機介面中,最重要的大概就是「文字框」、「單選按鈕」、「下拉式功能表」...這些視覺元件了! CSS3 提供了大量方法,可以讓你用簡單的方法,製造出各種視覺元件。
由於視覺元件種類非常多,我將會一種一種分開介紹。本篇要介紹的是「單選按鈕」(Radio Button)與「多選按鈕」(Checkbox)。您不要只是點擊進去玩玩看就結束了喔!重要的是要讀懂它的 CSS 原始碼、學習它語法的精髓喔!
三個基本範例:
- 其一: http://www.hongkiat.com/blog/css3-checkbox-radio/
- 其二: http://www.inserthtml.com/2012/06/custom-form-radio-checkbox/
- 其三: http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-easy-css3-checkboxes-and-radio-buttons/
兩個比較精緻的範例:
- 其一: http://webdesign.tutsplus.com/tutorials/site-elements/creating-a-javascript-free-radio-toggle-in-css3/
- 其二: http://tympanus.net/codrops/2012/09/13/button-switches-with-checkboxes-and-css3-fanciness/
最棒的 CSS Selector 或 Properties 線上參考手冊:
(進入後,Selector 在中央,Properties 在左下選單)
http://www.w3schools.com/cssref/css_selectors.asp
codrops buttons 在 紀老師程式教學網 Facebook 八卦
[WebTech #65] CSS > 4. CSS 範例 > 4-4 視覺元件 > 4-4-2 按鈕
按鈕是視覺元件中最常見的。本文將介紹如何用 CSS3 製作美輪美奐的按鈕,並提供數個範例供您參考。
用 CSS3 製作按鈕的方法:
http://designmodo.com/create-css3-buttons/
CSS3 按鈕範例(一般):
(1) http://www.hongkiat.com/blog/css3-glossy-effect/
(2) http://webdesign.tutsplus.com/tutorials/site-elements/orman-clarks-chunky-3d-web-buttons-the-css3-version/
CSS3 按鈕範例(精緻):
(1) http://www.red-team-design.com/just-another-awesome-css3-buttons
(2) http://tympanus.net/codrops/2012/01/11/css-buttons-with-pseudo-elements/
(3) http://webdesign.tutsplus.com/tutorials/quicktip-pressable-css3-social-buttons/
CSS3 按鈕範例(華麗):
(1) http://tympanus.net/codrops/2011/11/07/animated-buttons-with-css3/
(2) http://www.hongkiat.com/blog/css3-on-off-button/
底下嚴格說起來不是按鈕,是購買頁讓使用者選擇不同價格的介面。不過用途與按鈕類似,就把它編在此處了:
(1) http://www.red-team-design.com/css3-pricing-table
最棒的 CSS Selector 或 Properties 線上參考手冊:
(進入後,Selector 在中央,Properties 在左下選單)
http://www.w3schools.com/cssref/css_selectors.asp