Your SlideShare is downloading. ×
0
LeoNguyen.com
Outline
- References (css3.leonguyen.
com/references.html)
- Bootstrap references
(css3.leonguyen.com/bootstrap.html)
01. ...
01. Pattern
Noise Texture
- www.cssmatic.com/noise-texture
Ultimate CSS Gradient Generator
- http://www.colorzilla.com/gradient-editor/
SVGenerator
- svgeneration.com
Pattern.CSS3 Pattern
- Enter code: jsfiddle.net/leonguyen/PmXHY/
02. Text
Text Shadow
- www.themeshock.com
CSS Type Set
- www.csstypeset.com
Type Tester
- www.typetester.org
Icon Builder
- http://livetools.uiparade.com/icon-builder.html
Text.Text-Shadow
- Enter code: jsfiddle.net/leonguyen/uCL5g/
03.UI Framework
Outline
- Compatibility
- Reset
- Boilerplate
- Framework
Compatibility
IE version
- jsfiddle.net/leonguyen/UERWV/
Reset
Eric Meyer’s “Reset CSS”
- http://bit.ly/1bxTgRl
Normalize.css
- http://necolas.github.com/normalize.css
Others
- HTML5 Doctor CSS Reset (www.html5doctor.com)
- Yahoo! (YUI 3) Reset CSS (bit.ly/1bQc2Sk)
- CSS Reset (www.cssrese...
Boilerplate
HTML5 Boilerplate
- www.html5boilerplate.com
Initializr
- www.initializr.com
Shibui
- projects.craftedpixelz.co.uk/shibui/
CSSFlow
- www.cssflow.com
CSS Layout Generator
- csslayoutgenerator.com
Faux Width CSS Layouts
- faux-width-css-layouts
Fixed Width CSS Layouts
- fixed-width-css-layouts
Framework
Twitter Bootstrap
- getbootstrap.com
- startbootstrap.com
Twitter Bootstrap - Template
- TemplateVamp (bit.ly/1bqpnEk)
Foundation
- foundation.zurb.com
Semantic UI
- semantic-ui.com
UIkit
- getuikit.com
Others
- Topcoat (topcoat.io)
- Gumby (gumbyframework.com)
- HTML KickStart (www.99lime.com)
- MaxmertKit (http://maxmert....
jQuery UI
jQuery UI
- www.jqueryui.com
jKit
- jquery-jkit.com
04.Navigation
HozNav.Top Bar
- Enter code: jsfiddle.net/leonguyen/ybwSm/
HozNav.Dark Navigation
- Enter code: jsfiddle.net/leonguyen/fZDwP/
HozNav.Tabbed Navigation
- Enter code: jsfiddle.net/leonguyen/zFpXm/
HozNav.Graphite Navigation
- Enter code: jsfiddle.net/leonguyen/yaqXn/
HozNav.Light Horizontal Navigation
- Enter code: jsfiddle.net/leonguyen/EJFaZ/
HozNav.Dark Horizontal Navigation
- Enter code: jsfiddle.net/leonguyen/8j7xS/
HozNav.Menu Notification Badges
- Enter code: jsfiddle.net/leonguyen/scShN/
HozNav.Sky Mega Menu
- Enter code: jsfiddle.net/leonguyen/AMKAV/
HozNav.App Navigation with Notification Badges
- Enter code:
VetNav.Inset Side Navigation
- Enter code: jsfiddle.net/leonguyen/K3Mg7/
Accordion
Accordion.Vertical Navigation Menu
- Enter code: jsfiddle.net/leonguyen/9ATK5/
Popover
Popover.Animated Profile Popover
- Enter code: jsfiddle.net/leonguyen/q5gGr/
Popover.iOS Style Popover
- Enter code: jsfiddle.net/leonguyen/QWg9G/
DropList.Search Dropdown
- Enter code: jsfiddle.net/leonguyen/Pscfr/
Form
Form Builder
- http://livetools.uiparade.com/form-builder.html
Form.Login Form
- Enter code: jsfiddle.net/leonguyen/EC4zA/
Form.Login Form 2
- Enter code: jsfiddle.net/leonguyen/P33km/
Form.Login Form 3
- Enter code: jsfiddle.net/leonguyen/VEpjJ/
Form.Login Form 4
- Enter code: jsfiddle.net/leonguyen/PcLjA/
Form.Login Form 5
- Enter code: jsfiddle.net/leonguyen/aswUB/
Form.Login Form 6
- Enter code: jsfiddle.net/leonguyen/GBRsE/
Form.Facebook Login Form
- Enter code: jsfiddle.net/leonguyen/tExNq/
Form.Dark Login Form
- Enter code: jsfiddle.net/leonguyen/2EuU5/
Form.Login Form
- Enter code: jsfiddle.net/leonguyen/hSXQR/
Form.Sky Login Form
- Enter code: jsfiddle.net/leonguyen/qMSjp/
Form.Sign Up Form
- Enter code: jsfiddle.net/leonguyen/k92aH/
Form.Registration Form
- Enter code: jsfiddle.net/leonguyen/jyCpu/
Form.Modal Box Contact Form
- Enter code: jsfiddle.net/leonguyen/PWAvz/
Form.Newsletter Sign Up Form
- Enter code: jsfiddle.net/leonguyen/yX7Du/
Form.Checkout Form
- Enter code: jsfiddle.net/leonguyen/AfmYG/
Form.Settings Panel
- Enter code: jsfiddle.net/leonguyen/tPfKD/
Form.Medialoot CSS UI
- Enter code: jsfiddle.net/leonguyen/xzXDr/
Widget
Widget.File Download Widget
- Enter code: jsfiddle.net/leonguyen/VwFGP/
Widget.Simple To-do List
- Enter code: jsfiddle.net/leonguyen/WL7NB/
Widget.Task List
- Enter code: jsfiddle.net/leonguyen/Yy86v/
Widget.Tabbed Widget
- Enter code: jsfiddle.net/leonguyen/SP4Rn/
Widget.Shopping Cart Checkout Widget
- Enter code: jsfiddle.net/leonguyen/5QdsS/
Widget.Mini Social App
- Enter code: jsfiddle.net/leonguyen/jmAet/
Widget.OS X-style Transparent Window
- Enter code: jsfiddle.net/leonguyen/kCZrb/
05. Input
Button
CSS3 Button Generator
- www.css3buttongenerator.com
Button Maker
- www.css-tricks.com
Button Builder
- http://livetools.uiparade.com/button-builder.html
Button Download
- www.button-download.com
Button Essentials
- bit.ly/1dLygDf
Button.CSS Buttons
- Enter code: jsfiddle.net/leonguyen/uuqdu/
Button.Glossy Buttons
- Enter code: jsfiddle.net/leonguyen/uTgWS/
Button.Download Buttons
- Enter code: jsfiddle.net/leonguyen/98qRD/
Button.3D Buttons
- Enter code: jsfiddle.net/leonguyen/3Ru4S/
Button.Multi-colored Push Buttons
- Enter code: jsfiddle.net/leonguyen/Txtek/
Button.Social Buttons
- Enter code: jsfiddle.net/leonguyen/uT3Xy/
Button.Share Buttons
- Enter code: jsfiddle.net/leonguyen/dU3e7/
Checkbox
CSS Checkbox
- www.csscheckbox.com
Button.Check Buttons
- Enter code: jsfiddle.net/leonguyen/bkK57/
Button.Toggle Switches
- Enter code: jsfiddle.net/leonguyen/aRu6D/
Button.Simple Toggle Switch
- Enter code: jsfiddle.net/leonguyen/Xxfjz/
Button.Selection Widget
- Enter code: jsfiddle.net/leonguyen/ze4xy/
Dropdown List
DropList.Mini Dropdown Menu
- Enter code: jsfiddle.net/leonguyen/hRu6F/
Datepicker
Datepicker.Dark Datepicker
- Enter code: jsfiddle.net/leonguyen/CccK9/
Datepicker.Mini Calendar
- Enter code: jsfiddle.net/leonguyen/y5vNA/
Datepicker.Little Calendar
- Enter code: jsfiddle.net/leonguyen/Z3hNH/
Datepicker.Month Picker
- Enter code: jsfiddle.net/leonguyen/8AdTe/
Other
Ribbon
- http://livetools.uiparade.com/ribbon-builder.html
FESS
- www.fess.me
ProCSSor
- procssor.com
Layer Styles
- layerstyles.org
CSS3 PIE
- css3pie.com
Spritebox
- spritebox.net
Shorthand Cheat Sheet
- bit.ly/1b6yrb8
06. Display
Menu
CSS Menu Maker
- cssmenumaker.com
CSS3 Menu
- css3menu.com
Progress Bar
Progress.Multi-colored Progress Bar
- Enter code:
Progress.Animated Progress Bar
- Enter code:
Progress.Metal Progress Bar
- Enter code:
Notification
Notification.Growl Notification
- Enter code:
Notification.Notification Windows
- Enter code:
Tags
Notification.Sliding Tags
- Enter code:
Effect
Hover.css
- ianlunn.github.io/Hover/
Others
View.Notepaper Blockquote
- Enter code: jsfiddle.net/leonguyen/H8ybr/
View.Notepad
- Enter code: jsfiddle.net/leonguyen/VLPGj/
View.Pricing Table
- Enter code: jsfiddle.net/leonguyen/aBkBB/
View.Plans & Pricing Table
- Enter code: jsfiddle.net/leonguyen/WDHXF/
View.Analytics Widget
- Enter code: jsfiddle.net/leonguyen/g2gZs/
View.Chunky Calculator
- Enter code: jsfiddle.net/leonguyen/cRgHA/
View.Flip-down Clock
- Enter code: jsfiddle.net/leonguyen/SwseL/
View.Ribbon
- Enter code: jsfiddle.net/leonguyen/nzzp3/
Upcoming SlideShare
Loading in...5
×

CSS Lab

259

Published on

CSS Lab
http://leonguyen.com

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
259
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "CSS Lab"

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

    Clipping is a handy way to collect important slides you want to go back to later.

×