Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
CSS Lab
Search
LeoNguyen.com
July 11, 2013
Programming
1
1.7k
CSS Lab
CSS Lab
http://leonguyen.com
LeoNguyen.com
July 11, 2013
Tweet
Share
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.9k
Design Resources
leonguyen
1
350
AE Resources
leonguyen
0
340
Other Decks in Programming
See All in Programming
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
10
6.7k
Devoxx BE - Local Development in the AI Era
kdubois
0
130
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
830
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
ioquatix
4
2.1k
Leading Effective Engineering Teams in the AI Era
addyosmani
3
350
TFLintカスタムプラグインで始める Terraformコード品質管理
bells17
2
160
ALL CODE BASE ARE BELONG TO STUDY
uzulla
17
2.7k
Six and a half ridiculous things to do with Quarkus
hollycummins
0
170
技術的負債の正体を知って向き合う / Facing Technical Debt
irof
0
170
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
3.6k
Swift Concurrency - 状態監視の罠
objectiveaudio
2
520
アメ車でサンノゼを走ってきたよ!
s_shimotori
0
220
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Thoughts on Productivity
jonyablonski
70
4.9k
Building Applications with DynamoDB
mza
96
6.7k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Making Projects Easy
brettharned
119
6.4k
Designing for Performance
lara
610
69k
Docker and Python
trallard
46
3.6k
Transcript
LeoNguyen.com
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
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/