CSS Lab

CSS Lab
http://leonguyen.com

Transcript

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/