CSS Lab http://leonguyen.com

1. LeoNguyen.com

2. Outline
- References (css3.leonguyen.
com/references.html)
- Bootstrap references
(css3.leonguyen.com/bootstrap.html)
01. Pattern
02. Text
03. UI Framework
04. Navigation:
- Horizontal Navigation
- Vertical Navigation
- Accordion
- Popover
05. Input:
- Button
- Dropdow List
- Datepicker
- Form
- Widget
06. Display:
- Progress Bar
- Notification
- Tags
- Effect
- Others

3. 01. Pattern

4. Noise Texture
- www.cssmatic.com/noise-texture

5. Ultimate CSS Gradient Generator
- http://www.colorzilla.com/gradient-editor/

6. SVGenerator
- svgeneration.com

7. Pattern.CSS3 Pattern
- Enter code: jsfiddle.net/leonguyen/PmXHY/

8. 02. Text

9. Text Shadow
- www.themeshock.com

10. CSS Type Set
- www.csstypeset.com

11. Type Tester
- www.typetester.org

12. Icon Builder
- http://livetools.uiparade.com/icon-builder.html

13. Text.Text-Shadow
- Enter code: jsfiddle.net/leonguyen/uCL5g/

14. 03.UI Framework

15. Outline
- Compatibility
- Reset
- Boilerplate
- Framework

16. Compatibility

17. IE version
- jsfiddle.net/leonguyen/UERWV/

18. Reset

19. Eric Meyer’s “Reset CSS”
- http://bit.ly/1bxTgRl

20. Normalize.css
- http://necolas.github.com/normalize.css

21. 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)

22. Boilerplate

23. HTML5 Boilerplate
- www.html5boilerplate.com

24. Initializr
- www.initializr.com

25. Shibui
- projects.craftedpixelz.co.uk/shibui/

26. CSSFlow
- www.cssflow.com

27. CSS Layout Generator
- csslayoutgenerator.com

28. Faux Width CSS Layouts
- faux-width-css-layouts

29. Fixed Width CSS Layouts
- fixed-width-css-layouts

30. Framework

31. Twitter Bootstrap
- getbootstrap.com
- startbootstrap.com

32. Twitter Bootstrap - Template
- TemplateVamp (bit.ly/1bqpnEk)

33. Foundation
- foundation.zurb.com

34. Semantic UI
- semantic-ui.com

35. UIkit
- getuikit.com

36. 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)

37. jQuery UI

38. jQuery UI
- www.jqueryui.com

39. jKit
- jquery-jkit.com

40. 04.Navigation

41. HozNav.Top Bar
- Enter code: jsfiddle.net/leonguyen/ybwSm/

42. HozNav.Dark Navigation
- Enter code: jsfiddle.net/leonguyen/fZDwP/

43. HozNav.Tabbed Navigation
- Enter code: jsfiddle.net/leonguyen/zFpXm/

44. HozNav.Graphite Navigation
- Enter code: jsfiddle.net/leonguyen/yaqXn/

45. HozNav.Light Horizontal Navigation
- Enter code: jsfiddle.net/leonguyen/EJFaZ/

46. HozNav.Dark Horizontal Navigation
- Enter code: jsfiddle.net/leonguyen/8j7xS/

47. HozNav.Menu Notification Badges
- Enter code: jsfiddle.net/leonguyen/scShN/

48. HozNav.Sky Mega Menu
- Enter code: jsfiddle.net/leonguyen/AMKAV/

49. HozNav.App Navigation with Notification Badges
- Enter code:

50. VetNav.Inset Side Navigation
- Enter code: jsfiddle.net/leonguyen/K3Mg7/

51. Accordion

52. Accordion.Vertical Navigation Menu
- Enter code: jsfiddle.net/leonguyen/9ATK5/

53. Popover

54. Popover.Animated Profile Popover
- Enter code: jsfiddle.net/leonguyen/q5gGr/

55. Popover.iOS Style Popover
- Enter code: jsfiddle.net/leonguyen/QWg9G/

56. DropList.Search Dropdown
- Enter code: jsfiddle.net/leonguyen/Pscfr/

57. Form

58. Form Builder
- http://livetools.uiparade.com/form-builder.html

59. Form.Login Form
- Enter code: jsfiddle.net/leonguyen/EC4zA/

60. Form.Login Form 2
- Enter code: jsfiddle.net/leonguyen/P33km/

61. Form.Login Form 3
- Enter code: jsfiddle.net/leonguyen/VEpjJ/

62. Form.Login Form 4
- Enter code: jsfiddle.net/leonguyen/PcLjA/

63. Form.Login Form 5
- Enter code: jsfiddle.net/leonguyen/aswUB/

64. Form.Login Form 6
- Enter code: jsfiddle.net/leonguyen/GBRsE/

65. Form.Facebook Login Form
- Enter code: jsfiddle.net/leonguyen/tExNq/

66. Form.Dark Login Form
- Enter code: jsfiddle.net/leonguyen/2EuU5/

67. Form.Login Form
- Enter code: jsfiddle.net/leonguyen/hSXQR/

68. Form.Sky Login Form
- Enter code: jsfiddle.net/leonguyen/qMSjp/

69. Form.Sign Up Form
- Enter code: jsfiddle.net/leonguyen/k92aH/

70. Form.Registration Form
- Enter code: jsfiddle.net/leonguyen/jyCpu/

71. Form.Modal Box Contact Form
- Enter code: jsfiddle.net/leonguyen/PWAvz/

72. Form.Newsletter Sign Up Form
- Enter code: jsfiddle.net/leonguyen/yX7Du/

73. Form.Checkout Form
- Enter code: jsfiddle.net/leonguyen/AfmYG/

74. Form.Settings Panel
- Enter code: jsfiddle.net/leonguyen/tPfKD/

75. Form.Medialoot CSS UI
- Enter code: jsfiddle.net/leonguyen/xzXDr/

76. Widget

77. Widget.File Download Widget
- Enter code: jsfiddle.net/leonguyen/VwFGP/

78. Widget.Simple To-do List
- Enter code: jsfiddle.net/leonguyen/WL7NB/

79. Widget.Task List
- Enter code: jsfiddle.net/leonguyen/Yy86v/

80. Widget.Tabbed Widget
- Enter code: jsfiddle.net/leonguyen/SP4Rn/

81. Widget.Shopping Cart Checkout Widget
- Enter code: jsfiddle.net/leonguyen/5QdsS/

82. Widget.Mini Social App
- Enter code: jsfiddle.net/leonguyen/jmAet/

83. Widget.OS X-style Transparent Window
- Enter code: jsfiddle.net/leonguyen/kCZrb/

84. 05. Input

85. Button

86. CSS3 Button Generator
- www.css3buttongenerator.com

87. Button Maker
- www.css-tricks.com

88. Button Builder
- http://livetools.uiparade.com/button-builder.html

89. Button Download
- www.button-download.com

90. Button Essentials
- bit.ly/1dLygDf

91. Button.CSS Buttons
- Enter code: jsfiddle.net/leonguyen/uuqdu/

92. Button.Glossy Buttons
- Enter code: jsfiddle.net/leonguyen/uTgWS/

93. Button.Download Buttons
- Enter code: jsfiddle.net/leonguyen/98qRD/

94. Button.3D Buttons
- Enter code: jsfiddle.net/leonguyen/3Ru4S/

95. Button.Multi-colored Push Buttons
- Enter code: jsfiddle.net/leonguyen/Txtek/

96. Button.Social Buttons
- Enter code: jsfiddle.net/leonguyen/uT3Xy/

97. Button.Share Buttons
- Enter code: jsfiddle.net/leonguyen/dU3e7/

98. Checkbox

99. CSS Checkbox
- www.csscheckbox.com

100. Button.Check Buttons
- Enter code: jsfiddle.net/leonguyen/bkK57/

101. Button.Toggle Switches
- Enter code: jsfiddle.net/leonguyen/aRu6D/

102. Button.Simple Toggle Switch
- Enter code: jsfiddle.net/leonguyen/Xxfjz/

103. Button.Selection Widget
- Enter code: jsfiddle.net/leonguyen/ze4xy/

104. Dropdown List

105. DropList.Mini Dropdown Menu
- Enter code: jsfiddle.net/leonguyen/hRu6F/

106. Datepicker

107. Datepicker.Dark Datepicker
- Enter code: jsfiddle.net/leonguyen/CccK9/

108. Datepicker.Mini Calendar
- Enter code: jsfiddle.net/leonguyen/y5vNA/

109. Datepicker.Little Calendar
- Enter code: jsfiddle.net/leonguyen/Z3hNH/

110. Datepicker.Month Picker
- Enter code: jsfiddle.net/leonguyen/8AdTe/

111. Other

112. Ribbon
- http://livetools.uiparade.com/ribbon-builder.html

113. FESS
- www.fess.me

114. ProCSSor
- procssor.com

115. Layer Styles
- layerstyles.org

116. CSS3 PIE
- css3pie.com

117. Spritebox
- spritebox.net

118. Shorthand Cheat Sheet
- bit.ly/1b6yrb8

119. 06. Display

120. Menu

121. CSS Menu Maker
- cssmenumaker.com

122. CSS3 Menu
- css3menu.com

123. Progress Bar

124. Progress.Multi-colored Progress Bar
- Enter code:

125. Progress.Animated Progress Bar
- Enter code:

126. Progress.Metal Progress Bar
- Enter code:

127. Notification

128. Notification.Growl Notification
- Enter code:

129. Notification.Notification Windows
- Enter code:

130. Tags

131. Notification.Sliding Tags
- Enter code:

132. Effect

133. Hover.css
- ianlunn.github.io/Hover/

134. Others

135. View.Notepaper Blockquote
- Enter code: jsfiddle.net/leonguyen/H8ybr/

136. View.Notepad
- Enter code: jsfiddle.net/leonguyen/VLPGj/

137. View.Pricing Table
- Enter code: jsfiddle.net/leonguyen/aBkBB/

138. View.Plans & Pricing Table
- Enter code: jsfiddle.net/leonguyen/WDHXF/

139. View.Analytics Widget
- Enter code: jsfiddle.net/leonguyen/g2gZs/

140. View.Chunky Calculator
- Enter code: jsfiddle.net/leonguyen/cRgHA/

141. View.Flip-down Clock
- Enter code: jsfiddle.net/leonguyen/SwseL/

142. View.Ribbon
- Enter code: jsfiddle.net/leonguyen/nzzp3/