Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

CSS Lab

323 views

Published on

CSS Lab
http://leonguyen.com

Published in: Technology, Art & Photos
  • Be the first to comment

  • Be the first to like this

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/

×