CSS Lab
142
LeoNguyen.com
-
Upload
leo-nguyen -
Category
Technology
-
view
256 -
download
0
description
CSS Lab http://leonguyen.com
Transcript of CSS Lab
LeoNguyen.com
OutlineReferences (bit.ly/1jdFrJA)01. Pattern02. Text03. UI Framework04. Navigation:- Horizontal Navigation- Vertical Navigation- Accordion- Popover05. Input:- Button- Dropdow List- Datepicker
- Form- Widget06. Display:- Progress Bar- Notification- Tags- Effect- Others
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.cssreset.com)- Selectivizr (www.selectivizr.com)
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.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)
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/
