Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS Lab

CSS Lab

LeoNguyen.com

July 11, 2013
Tweet

More Decks by LeoNguyen.com

Other Decks in Programming

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/