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

CSS Lab

LeoNguyen.com
July 11, 2013
Programming
1
1.7k

CSS Lab

CSS Lab
http://leonguyen.com

LeoNguyen.com

July 11, 2013
Tweet

More Decks by LeoNguyen.com

See All by LeoNguyen.com
Node.js Lab
leonguyen
1
1.5k
PhoneGap Lab
leonguyen
0
1.5k
jQuery Plugin
leonguyen
0
1.6k
JS Plugin
leonguyen
0
2.5k
HTML5 Lab
leonguyen
0
1.6k
PHP Lab
leonguyen
0
1.7k
Laravel Lab
leonguyen
0
1.8k
Design Resources
leonguyen
1
330
AE Resources
leonguyen
0
310

Other Decks in Programming

See All in Programming
子育てとEMと転職と
_atsushisakai
1
400
Milestoner
bkuhlmann
1
240
Step Functions Distributed Map を使ってみた
codemountains
0
100
監視せなあかんし、五大紙だけにオオカミってな🐺🐺🐺🐺🐺
sadnessojisan
2
1.5k
ちょうぜつ改め21世紀ふつうのソフトウェア設計
tanakahisateru
7
6.4k
SwiftPMのPlugin入門 / introduction_to_swiftpm_plugin
uhooi
2
100
NGK2023S - OCaml最高! スマホ開発にも使えちゃう?!
haochenxie
0
120
tidy_rpart
bk_18
0
590
まだ日本国内で利用できないAppActionsにトライしてみた / MoT TechTalk #15
mot_techtalk
0
110
Findy - エンジニア向け会社紹介 / Findy Letter for Engineers
findyinc
2
42k
(新米)エンジニアリングマネージャーのしごと #RSGT2023
murabayashi
9
5.7k
Amazon QuickSightのアップデート -re:Invent 2022の復習&2022年ハイライト-
shogo452
0
220

Featured

See All Featured
The Language of Interfaces
destraynor
149
21k
Rebuilding a faster, lazier Slack
samanthasiow
69
7.5k
Keith and Marios Guide to Fast Websites
keithpitt
407
21k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
13
5.4k
How to train your dragon (web standard)
notwaldorf
66
4.2k
Making Projects Easy
brettharned
102
4.8k
4 Signs Your Business is Dying
shpigford
171
20k
What’s in a name? Adding method to the madness
productmarketing
12
1.9k
How to name files
jennybc
47
73k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
44
14k
Robots, Beer and Maslow
schacon
154
7.3k
Streamline your AJAX requests with AmplifyJS and jQuery
dougneiner
128
8.8k

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/