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
【PHP】破壊的バージョンアップと戦った話〜決断と説得
satoshi256kbyte
0
120
Grafana Cloudとソラカメ
devoc
0
140
sappoRo.R #12 初心者セッション
kosugitti
0
230
最近のVS Codeで気になるニュース 2025/01
74th
1
250
Software Architecture
hschwentner
6
2.1k
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
120
Honoをフロントエンドで使う 3つのやり方
yusukebe
4
2.1k
バックエンドのためのアプリ内課金入門 (サブスク編)
qnighy
8
1.7k
ペアーズでの、Langfuseを中心とした評価ドリブンなリリースサイクルのご紹介
fukubaka0825
2
300
Conform を推す - Advocating for Conform
mizoguchicoji
3
680
ASP. NET CoreにおけるWebAPIの最新情報
tomokusaba
0
360
SpringBoot3.4の構造化ログ #kanjava
irof
2
970
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Raft: Consensus for Rubyists
vanstee
137
6.8k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
8
270
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
20
2.4k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.2k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
What's in a price? How to price your products and services
michaelherold
244
12k
Fireside Chat
paigeccino
34
3.2k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
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/