CSS Lab
-
Upload
leo-nguyen -
Category
Technology
-
view
258 -
download
0
description
Transcript of CSS Lab
![Page 1: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/1.jpg)
LeoNguyen.com
![Page 2: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/2.jpg)
OutlineReferences (bit.ly/1jdFrJA)01. Pattern02. Text03. UI Framework04. Navigation:- Horizontal Navigation- Vertical Navigation- Accordion- Popover05. Input:- Button- Dropdow List- Datepicker
- Form- Widget06. Display:- Progress Bar- Notification- Tags- Effect- Others
![Page 3: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/3.jpg)
01. Pattern
![Page 4: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/4.jpg)
Noise Texture
- www.cssmatic.com/noise-texture
![Page 5: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/5.jpg)
Ultimate CSS Gradient Generator
- http://www.colorzilla.com/gradient-editor/
![Page 6: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/6.jpg)
SVGenerator
- svgeneration.com
![Page 7: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/7.jpg)
Pattern.CSS3 Pattern- Enter code: jsfiddle.net/leonguyen/PmXHY/
![Page 8: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/8.jpg)
02. Text
![Page 9: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/9.jpg)
Text Shadow
- www.themeshock.com
![Page 10: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/10.jpg)
CSS Type Set
- www.csstypeset.com
![Page 11: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/11.jpg)
Type Tester
- www.typetester.org
![Page 12: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/12.jpg)
Icon Builder
- http://livetools.uiparade.com/icon-builder.html
![Page 13: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/13.jpg)
Text.Text-Shadow- Enter code: jsfiddle.net/leonguyen/uCL5g/
![Page 14: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/14.jpg)
03.UI Framework
![Page 15: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/15.jpg)
Outline
- Compatibility- Reset- Boilerplate- Framework
![Page 16: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/16.jpg)
Compatibility
![Page 17: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/17.jpg)
IE version- jsfiddle.net/leonguyen/UERWV/
![Page 18: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/18.jpg)
Reset
![Page 19: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/19.jpg)
Eric Meyer’s “Reset CSS”- http://bit.ly/1bxTgRl
![Page 20: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/20.jpg)
Normalize.css- http://necolas.github.com/normalize.css
![Page 21: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/21.jpg)
Others- HTML5 Doctor CSS Reset (www.html5doctor.com)- Yahoo! (YUI 3) Reset CSS (bit.ly/1bQc2Sk)- CSS Reset (www.cssreset.com)- Selectivizr (www.selectivizr.com)
![Page 22: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/22.jpg)
Boilerplate
![Page 23: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/23.jpg)
HTML5 Boilerplate- www.html5boilerplate.com
![Page 24: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/24.jpg)
Initializr- www.initializr.com
![Page 25: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/25.jpg)
Shibui- projects.craftedpixelz.co.uk/shibui/
![Page 26: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/26.jpg)
CSSFlow
- www.cssflow.com
![Page 27: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/27.jpg)
CSS Layout Generator
- csslayoutgenerator.com
![Page 28: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/28.jpg)
Faux Width CSS Layouts
- faux-width-css-layouts
![Page 29: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/29.jpg)
Fixed Width CSS Layouts
- fixed-width-css-layouts
![Page 30: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/30.jpg)
Framework
![Page 31: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/31.jpg)
Twitter Bootstrap- getbootstrap.com- startbootstrap.com
![Page 32: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/32.jpg)
Twitter Bootstrap - Template- TemplateVamp (bit.ly/1bqpnEk)
![Page 33: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/33.jpg)
Foundation- foundation.zurb.com
![Page 34: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/34.jpg)
Semantic UI- semantic-ui.com
![Page 35: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/35.jpg)
UIkit- getuikit.com
![Page 36: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/36.jpg)
Others- Topcoat (topcoat.io)- Gumby (gumbyframework.com)- HTML KickStart (www.99lime.com)- MaxmertKit (http://maxmert.com)- MetroUI (http://metroui.org.ua)- Responsive Web Page Layouts (www.responsivewebcss.com)- Ratchet iPhone (http://maker.github.com/ratchet)- ChocolateChip-UI (www.chocolatechip-ui.com)
![Page 37: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/37.jpg)
jQuery UI
![Page 38: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/38.jpg)
jQuery UI- www.jqueryui.com
![Page 39: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/39.jpg)
jKit- jquery-jkit.com
![Page 40: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/40.jpg)
04.Navigation
![Page 41: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/41.jpg)
HozNav.Top Bar- Enter code: jsfiddle.net/leonguyen/ybwSm/
![Page 42: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/42.jpg)
HozNav.Dark Navigation- Enter code: jsfiddle.net/leonguyen/fZDwP/
![Page 43: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/43.jpg)
HozNav.Tabbed Navigation- Enter code: jsfiddle.net/leonguyen/zFpXm/
![Page 44: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/44.jpg)
HozNav.Graphite Navigation- Enter code: jsfiddle.net/leonguyen/yaqXn/
![Page 45: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/45.jpg)
HozNav.Light Horizontal Navigation- Enter code: jsfiddle.net/leonguyen/EJFaZ/
![Page 46: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/46.jpg)
HozNav.Dark Horizontal Navigation- Enter code: jsfiddle.net/leonguyen/8j7xS/
![Page 47: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/47.jpg)
HozNav.Menu Notification Badges- Enter code: jsfiddle.net/leonguyen/scShN/
![Page 48: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/48.jpg)
HozNav.Sky Mega Menu- Enter code: jsfiddle.net/leonguyen/AMKAV/
![Page 49: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/49.jpg)
HozNav.App Navigation with Notification Badges
- Enter code:
![Page 50: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/50.jpg)
VetNav.Inset Side Navigation- Enter code: jsfiddle.net/leonguyen/K3Mg7/
![Page 51: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/51.jpg)
Accordion
![Page 52: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/52.jpg)
Accordion.Vertical Navigation Menu- Enter code: jsfiddle.net/leonguyen/9ATK5/
![Page 53: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/53.jpg)
Popover
![Page 54: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/54.jpg)
Popover.Animated Profile Popover- Enter code: jsfiddle.net/leonguyen/q5gGr/
![Page 55: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/55.jpg)
Popover.iOS Style Popover- Enter code: jsfiddle.net/leonguyen/QWg9G/
![Page 56: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/56.jpg)
DropList.Search Dropdown- Enter code: jsfiddle.net/leonguyen/Pscfr/
![Page 57: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/57.jpg)
Form
![Page 58: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/58.jpg)
Form Builder
- http://livetools.uiparade.com/form-builder.html
![Page 59: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/59.jpg)
Form.Login Form- Enter code: jsfiddle.net/leonguyen/EC4zA/
![Page 60: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/60.jpg)
Form.Login Form 2- Enter code: jsfiddle.net/leonguyen/P33km/
![Page 61: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/61.jpg)
Form.Login Form 3- Enter code: jsfiddle.net/leonguyen/VEpjJ/
![Page 62: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/62.jpg)
Form.Login Form 4- Enter code: jsfiddle.net/leonguyen/PcLjA/
![Page 63: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/63.jpg)
Form.Login Form 5- Enter code: jsfiddle.net/leonguyen/aswUB/
![Page 64: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/64.jpg)
Form.Login Form 6- Enter code: jsfiddle.net/leonguyen/GBRsE/
![Page 65: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/65.jpg)
Form.Facebook Login Form- Enter code: jsfiddle.net/leonguyen/tExNq/
![Page 66: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/66.jpg)
Form.Dark Login Form- Enter code: jsfiddle.net/leonguyen/2EuU5/
![Page 67: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/67.jpg)
Form.Login Form- Enter code: jsfiddle.net/leonguyen/hSXQR/
![Page 68: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/68.jpg)
Form.Sky Login Form- Enter code: jsfiddle.net/leonguyen/qMSjp/
![Page 69: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/69.jpg)
Form.Sign Up Form- Enter code: jsfiddle.net/leonguyen/k92aH/
![Page 70: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/70.jpg)
Form.Registration Form- Enter code: jsfiddle.net/leonguyen/jyCpu/
![Page 71: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/71.jpg)
Form.Modal Box Contact Form- Enter code: jsfiddle.net/leonguyen/PWAvz/
![Page 72: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/72.jpg)
Form.Newsletter Sign Up Form- Enter code: jsfiddle.net/leonguyen/yX7Du/
![Page 73: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/73.jpg)
Form.Checkout Form- Enter code: jsfiddle.net/leonguyen/AfmYG/
![Page 74: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/74.jpg)
Form.Settings Panel- Enter code: jsfiddle.net/leonguyen/tPfKD/
![Page 75: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/75.jpg)
Form.Medialoot CSS UI- Enter code: jsfiddle.net/leonguyen/xzXDr/
![Page 76: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/76.jpg)
Widget
![Page 77: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/77.jpg)
Widget.File Download Widget- Enter code: jsfiddle.net/leonguyen/VwFGP/
![Page 78: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/78.jpg)
Widget.Simple To-do List- Enter code: jsfiddle.net/leonguyen/WL7NB/
![Page 79: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/79.jpg)
Widget.Task List- Enter code: jsfiddle.net/leonguyen/Yy86v/
![Page 80: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/80.jpg)
Widget.Tabbed Widget- Enter code: jsfiddle.net/leonguyen/SP4Rn/
![Page 81: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/81.jpg)
Widget.Shopping Cart Checkout Widget
- Enter code: jsfiddle.net/leonguyen/5QdsS/
![Page 82: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/82.jpg)
Widget.Mini Social App- Enter code: jsfiddle.net/leonguyen/jmAet/
![Page 83: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/83.jpg)
Widget.OS X-style Transparent Window
- Enter code: jsfiddle.net/leonguyen/kCZrb/
![Page 84: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/84.jpg)
05. Input
![Page 85: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/85.jpg)
Button
![Page 86: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/86.jpg)
CSS3 Button Generator
- www.css3buttongenerator.com
![Page 87: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/87.jpg)
Button Maker
- www.css-tricks.com
![Page 88: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/88.jpg)
Button Builder
- http://livetools.uiparade.com/button-builder.html
![Page 89: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/89.jpg)
Button Download
- www.button-download.com
![Page 90: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/90.jpg)
Button Essentials
- bit.ly/1dLygDf
![Page 91: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/91.jpg)
Button.CSS Buttons- Enter code: jsfiddle.net/leonguyen/uuqdu/
![Page 92: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/92.jpg)
Button.Glossy Buttons- Enter code: jsfiddle.net/leonguyen/uTgWS/
![Page 93: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/93.jpg)
Button.Download Buttons- Enter code: jsfiddle.net/leonguyen/98qRD/
![Page 94: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/94.jpg)
Button.3D Buttons- Enter code: jsfiddle.net/leonguyen/3Ru4S/
![Page 95: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/95.jpg)
Button.Multi-colored Push Buttons- Enter code: jsfiddle.net/leonguyen/Txtek/
![Page 96: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/96.jpg)
Button.Social Buttons- Enter code: jsfiddle.net/leonguyen/uT3Xy/
![Page 97: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/97.jpg)
Button.Share Buttons- Enter code: jsfiddle.net/leonguyen/dU3e7/
![Page 98: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/98.jpg)
Checkbox
![Page 99: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/99.jpg)
CSS Checkbox
- www.csscheckbox.com
![Page 100: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/100.jpg)
Button.Check Buttons- Enter code: jsfiddle.net/leonguyen/bkK57/
![Page 101: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/101.jpg)
Button.Toggle Switches- Enter code: jsfiddle.net/leonguyen/aRu6D/
![Page 102: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/102.jpg)
Button.Simple Toggle Switch- Enter code: jsfiddle.net/leonguyen/Xxfjz/
![Page 103: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/103.jpg)
Button.Selection Widget- Enter code: jsfiddle.net/leonguyen/ze4xy/
![Page 104: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/104.jpg)
Dropdown List
![Page 105: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/105.jpg)
DropList.Mini Dropdown Menu- Enter code: jsfiddle.net/leonguyen/hRu6F/
![Page 106: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/106.jpg)
Datepicker
![Page 107: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/107.jpg)
Datepicker.Dark Datepicker- Enter code: jsfiddle.net/leonguyen/CccK9/
![Page 108: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/108.jpg)
Datepicker.Mini Calendar- Enter code: jsfiddle.net/leonguyen/y5vNA/
![Page 109: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/109.jpg)
Datepicker.Little Calendar- Enter code: jsfiddle.net/leonguyen/Z3hNH/
![Page 110: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/110.jpg)
Datepicker.Month Picker- Enter code: jsfiddle.net/leonguyen/8AdTe/
![Page 111: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/111.jpg)
Other
![Page 112: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/112.jpg)
Ribbon
- http://livetools.uiparade.com/ribbon-builder.html
![Page 113: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/113.jpg)
FESS
- www.fess.me
![Page 114: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/114.jpg)
ProCSSor
- procssor.com
![Page 115: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/115.jpg)
Layer Styles
- layerstyles.org
![Page 116: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/116.jpg)
CSS3 PIE
- css3pie.com
![Page 117: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/117.jpg)
Spritebox
- spritebox.net
![Page 118: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/118.jpg)
Shorthand Cheat Sheet
- bit.ly/1b6yrb8
![Page 119: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/119.jpg)
06. Display
![Page 120: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/120.jpg)
Menu
![Page 121: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/121.jpg)
CSS Menu Maker
- cssmenumaker.com
![Page 122: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/122.jpg)
CSS3 Menu
- css3menu.com
![Page 123: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/123.jpg)
Progress Bar
![Page 124: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/124.jpg)
Progress.Multi-colored Progress Bar- Enter code:
![Page 125: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/125.jpg)
Progress.Animated Progress Bar- Enter code:
![Page 126: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/126.jpg)
Progress.Metal Progress Bar- Enter code:
![Page 127: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/127.jpg)
Notification
![Page 128: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/128.jpg)
Notification.Growl Notification- Enter code:
![Page 129: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/129.jpg)
Notification.Notification Windows- Enter code:
![Page 130: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/130.jpg)
Tags
![Page 131: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/131.jpg)
Notification.Sliding Tags- Enter code:
![Page 132: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/132.jpg)
Effect
![Page 133: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/133.jpg)
Hover.css- ianlunn.github.io/Hover/
![Page 134: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/134.jpg)
Others
![Page 135: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/135.jpg)
View.Notepaper Blockquote- Enter code: jsfiddle.net/leonguyen/H8ybr/
![Page 136: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/136.jpg)
View.Notepad- Enter code: jsfiddle.net/leonguyen/VLPGj/
![Page 137: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/137.jpg)
View.Pricing Table- Enter code: jsfiddle.net/leonguyen/aBkBB/
![Page 138: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/138.jpg)
View.Plans & Pricing Table- Enter code: jsfiddle.net/leonguyen/WDHXF/
![Page 139: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/139.jpg)
View.Analytics Widget- Enter code: jsfiddle.net/leonguyen/g2gZs/
![Page 140: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/140.jpg)
View.Chunky Calculator- Enter code: jsfiddle.net/leonguyen/cRgHA/
![Page 141: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/141.jpg)
View.Flip-down Clock- Enter code: jsfiddle.net/leonguyen/SwseL/
![Page 142: CSS Lab](https://reader034.fdocuments.us/reader034/viewer/2022042607/5557d4d7d8b42ab6258b4930/html5/thumbnails/142.jpg)
View.Ribbon- Enter code: jsfiddle.net/leonguyen/nzzp3/