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
330
Other Decks in Programming
See All in Programming
ASP. NET CoreにおけるWebAPIの最新情報
tomokusaba
0
220
ISUCON14公式反省会LT: 社内ISUCONの話
astj
PRO
0
140
オニオンアーキテクチャを使って、 Unityと.NETでコードを共有する
soi013
0
390
定理証明プラットフォーム lapisla.net
abap34
1
670
JavaScriptツール群「UnJS」を5分で一気に駆け巡る!
k1tikurisu
8
1.3k
いりゃあせ、PHPカンファレンス名古屋2025 / Welcome to PHP Conference Nagoya 2025
ttskch
1
240
チームの立て直し施策をGoogleの 『効果的なチーム』と見比べてみた
maroon8021
0
280
[Fin-JAWS 第38回 ~re:Invent 2024 金融re:Cap~]FaultInjectionServiceアップデート@pre:Invent2024
shintaro_fukatsu
0
360
最近のVS Codeで気になるニュース 2025/01
74th
1
240
Terraform で作る Amazon ECS の CI/CD パイプライン
hiyanger
0
110
2025.01.17_Sansan × DMM.swift
riofujimon
2
670
Package Traits
ikesyo
2
230
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
460
33k
The World Runs on Bad Software
bkeepers
PRO
67
11k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2k
YesSQL, Process and Tooling at Scale
rocio
171
14k
How STYLIGHT went responsive
nonsquared
96
5.3k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Six Lessons from altMBA
skipperchong
27
3.6k
Adopting Sorbet at Scale
ufuk
74
9.2k
Making Projects Easy
brettharned
116
6k
Building Better People: How to give real-time feedback that sticks.
wjessup
366
19k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
990
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/