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
Swift Updates - Learn Languages 2025
koher
2
470
アプリの "かわいい" を支えるアニメーションツールRiveについて
uetyo
0
210
開発チーム・開発組織の設計改善スキルの向上
masuda220
PRO
19
11k
テストカバレッジ100%を10年続けて得られた学びと品質
mottyzzz
2
510
Ruby Parser progress report 2025
yui_knk
1
420
JSONataを使ってみよう Step Functionsが楽しくなる実践テクニック #devio2025
dafujii
1
510
Compose Multiplatform × AI で作る、次世代アプリ開発支援ツールの設計と実装
thagikura
0
120
Namespace and Its Future
tagomoris
6
700
基礎から学ぶ大画面対応(Learning Large-Screen Support from the Ground Up)
tomoya0x00
0
400
ProxyによるWindow間RPC機構の構築
syumai
3
1.1k
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
310
FindyにおけるTakumi活用と脆弱性管理のこれから
rvirus0817
0
480
Featured
See All Featured
It's Worth the Effort
3n
187
28k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
The Power of CSS Pseudo Elements
geoffreycrofte
77
6k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Documentation Writing (for coders)
carmenintech
74
5k
A designer walks into a library…
pauljervisheath
207
24k
Making Projects Easy
brettharned
117
6.4k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Building Adaptive Systems
keathley
43
2.7k
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/