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
uniqueパッケージの内部実装を支えるweak pointerの話
magavel
0
940
あなたの知らない「動画広告」の世界 - iOSDC Japan 2025
ukitaka
0
450
Web Components で実現する Hotwire とフロントエンドフレームワークの橋渡し / Bridging with Web Components
da1chi
3
2k
Pull-Requestの内容を1クリックで動作確認可能にするワークフロー
natmark
2
480
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
210
NetworkXとGNNで学ぶグラフデータ分析入門〜複雑な関係性を解き明かすPythonの力〜
mhrtech
3
1.2k
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
190
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
3.5k
高度なUI/UXこそHotwireで作ろう Kaigi on Rails 2025
naofumi
4
3.7k
CI_CD「健康診断」のススメ。現場でのボトルネック特定から、健康診断を通じた組織的な改善手法
teamlab
PRO
0
200
CSC509 Lecture 06
javiergs
PRO
0
260
Six and a half ridiculous things to do with Quarkus
hollycummins
0
140
Featured
See All Featured
Making Projects Easy
brettharned
119
6.4k
KATA
mclloyd
32
15k
Unsuck your backbone
ammeep
671
58k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Documentation Writing (for coders)
carmenintech
75
5k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
A Tale of Four Properties
chriscoyier
160
23k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
2.6k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Designing Experiences People Love
moore
142
24k
Embracing the Ebb and Flow
colly
88
4.8k
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/