CSS Lab - Speaker Deck

Slide 1

Slide 1 text

LeoNguyen.com

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

01. Pattern

Slide 4

Slide 4 text

Noise Texture - www.cssmatic.com/noise-texture

Slide 5

Slide 5 text

Ultimate CSS Gradient Generator - http://www.colorzilla.com/gradient-editor/

Slide 6

Slide 6 text

SVGenerator - svgeneration.com

Slide 7

Slide 7 text

Pattern.CSS3 Pattern - Enter code: jsfiddle.net/leonguyen/PmXHY/

Slide 8

Slide 8 text

02. Text

Slide 9

Slide 9 text

Text Shadow - www.themeshock.com

Slide 10

Slide 10 text

CSS Type Set - www.csstypeset.com

Slide 11

Slide 11 text

Type Tester - www.typetester.org

Slide 12

Slide 12 text

Icon Builder - http://livetools.uiparade.com/icon-builder.html

Slide 13

Slide 13 text

Text.Text-Shadow - Enter code: jsfiddle.net/leonguyen/uCL5g/

Slide 14

Slide 14 text

03.UI Framework

Slide 15

Slide 15 text

Outline - Compatibility - Reset - Boilerplate - Framework

Slide 16

Slide 16 text

Compatibility

Slide 17

Slide 17 text

IE version - jsfiddle.net/leonguyen/UERWV/

Slide 18

Slide 18 text

Reset

Slide 19

Slide 19 text

Eric Meyer’s “Reset CSS” - http://bit.ly/1bxTgRl

Slide 20

Slide 20 text

Normalize.css - http://necolas.github.com/normalize.css

Slide 21

Slide 21 text

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)

Slide 22

Slide 22 text

Boilerplate

Slide 23

Slide 23 text

HTML5 Boilerplate - www.html5boilerplate.com

Slide 24

Slide 24 text

Initializr - www.initializr.com

Slide 25

Slide 25 text

Shibui - projects.craftedpixelz.co.uk/shibui/

Slide 26

Slide 26 text

CSSFlow - www.cssflow.com

Slide 27

Slide 27 text

CSS Layout Generator - csslayoutgenerator.com

Slide 28

Slide 28 text

Faux Width CSS Layouts - faux-width-css-layouts

Slide 29

Slide 29 text

Fixed Width CSS Layouts - fixed-width-css-layouts

Slide 30

Slide 30 text

Framework

Slide 31

Slide 31 text

Twitter Bootstrap - getbootstrap.com - startbootstrap.com

Slide 32

Slide 32 text

Twitter Bootstrap - Template - TemplateVamp (bit.ly/1bqpnEk)

Slide 33

Slide 33 text

Foundation - foundation.zurb.com

Slide 34

Slide 34 text

Semantic UI - semantic-ui.com

Slide 35

Slide 35 text

UIkit - getuikit.com

Slide 36

Slide 36 text

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)

Slide 37

Slide 37 text

jQuery UI

Slide 38

Slide 38 text

jQuery UI - www.jqueryui.com

Slide 39

Slide 39 text

jKit - jquery-jkit.com

Slide 40

Slide 40 text

04.Navigation

Slide 41

Slide 41 text

HozNav.Top Bar - Enter code: jsfiddle.net/leonguyen/ybwSm/

Slide 42

Slide 42 text

HozNav.Dark Navigation - Enter code: jsfiddle.net/leonguyen/fZDwP/

Slide 43

Slide 43 text

HozNav.Tabbed Navigation - Enter code: jsfiddle.net/leonguyen/zFpXm/

Slide 44

Slide 44 text

HozNav.Graphite Navigation - Enter code: jsfiddle.net/leonguyen/yaqXn/

Slide 45

Slide 45 text

HozNav.Light Horizontal Navigation - Enter code: jsfiddle.net/leonguyen/EJFaZ/

Slide 46

Slide 46 text

HozNav.Dark Horizontal Navigation - Enter code: jsfiddle.net/leonguyen/8j7xS/

Slide 47

Slide 47 text

HozNav.Menu Notification Badges - Enter code: jsfiddle.net/leonguyen/scShN/

Slide 48

Slide 48 text

HozNav.Sky Mega Menu - Enter code: jsfiddle.net/leonguyen/AMKAV/

Slide 49

Slide 49 text

HozNav.App Navigation with Notification Badges - Enter code:

Slide 50

Slide 50 text

VetNav.Inset Side Navigation - Enter code: jsfiddle.net/leonguyen/K3Mg7/

Slide 51

Slide 51 text

Accordion

Slide 52

Slide 52 text

Accordion.Vertical Navigation Menu - Enter code: jsfiddle.net/leonguyen/9ATK5/

Slide 53

Slide 53 text

Popover

Slide 54

Slide 54 text

Popover.Animated Profile Popover - Enter code: jsfiddle.net/leonguyen/q5gGr/

Slide 55

Slide 55 text

Popover.iOS Style Popover - Enter code: jsfiddle.net/leonguyen/QWg9G/

Slide 56

Slide 56 text

DropList.Search Dropdown - Enter code: jsfiddle.net/leonguyen/Pscfr/

Slide 57

Slide 57 text

Form

Slide 58

Slide 58 text

Form Builder - http://livetools.uiparade.com/form-builder.html

Slide 59

Slide 59 text

Form.Login Form - Enter code: jsfiddle.net/leonguyen/EC4zA/

Slide 60

Slide 60 text

Form.Login Form 2 - Enter code: jsfiddle.net/leonguyen/P33km/

Slide 61

Slide 61 text

Form.Login Form 3 - Enter code: jsfiddle.net/leonguyen/VEpjJ/

Slide 62

Slide 62 text

Form.Login Form 4 - Enter code: jsfiddle.net/leonguyen/PcLjA/

Slide 63

Slide 63 text

Form.Login Form 5 - Enter code: jsfiddle.net/leonguyen/aswUB/

Slide 64

Slide 64 text

Form.Login Form 6 - Enter code: jsfiddle.net/leonguyen/GBRsE/

Slide 65

Slide 65 text

Form.Facebook Login Form - Enter code: jsfiddle.net/leonguyen/tExNq/

Slide 66

Slide 66 text

Form.Dark Login Form - Enter code: jsfiddle.net/leonguyen/2EuU5/

Slide 67

Slide 67 text

Form.Login Form - Enter code: jsfiddle.net/leonguyen/hSXQR/

Slide 68

Slide 68 text

Form.Sky Login Form - Enter code: jsfiddle.net/leonguyen/qMSjp/

Slide 69

Slide 69 text

Form.Sign Up Form - Enter code: jsfiddle.net/leonguyen/k92aH/

Slide 70

Slide 70 text

Form.Registration Form - Enter code: jsfiddle.net/leonguyen/jyCpu/

Slide 71

Slide 71 text

Form.Modal Box Contact Form - Enter code: jsfiddle.net/leonguyen/PWAvz/

Slide 72

Slide 72 text

Form.Newsletter Sign Up Form - Enter code: jsfiddle.net/leonguyen/yX7Du/

Slide 73

Slide 73 text

Form.Checkout Form - Enter code: jsfiddle.net/leonguyen/AfmYG/

Slide 74

Slide 74 text

Form.Settings Panel - Enter code: jsfiddle.net/leonguyen/tPfKD/

Slide 75

Slide 75 text

Form.Medialoot CSS UI - Enter code: jsfiddle.net/leonguyen/xzXDr/

Slide 76

Slide 76 text

Widget

Slide 77

Slide 77 text

Widget.File Download Widget - Enter code: jsfiddle.net/leonguyen/VwFGP/

Slide 78

Slide 78 text

Widget.Simple To-do List - Enter code: jsfiddle.net/leonguyen/WL7NB/

Slide 79

Slide 79 text

Widget.Task List - Enter code: jsfiddle.net/leonguyen/Yy86v/

Slide 80

Slide 80 text

Widget.Tabbed Widget - Enter code: jsfiddle.net/leonguyen/SP4Rn/

Slide 81

Slide 81 text

Widget.Shopping Cart Checkout Widget - Enter code: jsfiddle.net/leonguyen/5QdsS/

Slide 82

Slide 82 text

Widget.Mini Social App - Enter code: jsfiddle.net/leonguyen/jmAet/

Slide 83

Slide 83 text

Widget.OS X-style Transparent Window - Enter code: jsfiddle.net/leonguyen/kCZrb/

Slide 84

Slide 84 text

05. Input

Slide 85

Slide 85 text

Button

Slide 86

Slide 86 text

CSS3 Button Generator - www.css3buttongenerator.com

Slide 87

Slide 87 text

Button Maker - www.css-tricks.com

Slide 88

Slide 88 text

Button Builder - http://livetools.uiparade.com/button-builder.html

Slide 89

Slide 89 text

Button Download - www.button-download.com

Slide 90

Slide 90 text

Button Essentials - bit.ly/1dLygDf

Slide 91

Slide 91 text

Button.CSS Buttons - Enter code: jsfiddle.net/leonguyen/uuqdu/

Slide 92

Slide 92 text

Button.Glossy Buttons - Enter code: jsfiddle.net/leonguyen/uTgWS/

Slide 93

Slide 93 text

Button.Download Buttons - Enter code: jsfiddle.net/leonguyen/98qRD/

Slide 94

Slide 94 text

Button.3D Buttons - Enter code: jsfiddle.net/leonguyen/3Ru4S/

Slide 95

Slide 95 text

Button.Multi-colored Push Buttons - Enter code: jsfiddle.net/leonguyen/Txtek/

Slide 96

Slide 96 text

Button.Social Buttons - Enter code: jsfiddle.net/leonguyen/uT3Xy/

Slide 97

Slide 97 text

Button.Share Buttons - Enter code: jsfiddle.net/leonguyen/dU3e7/

Slide 98

Slide 98 text

Checkbox

Slide 99

Slide 99 text

CSS Checkbox - www.csscheckbox.com

Slide 100

Slide 100 text

Button.Check Buttons - Enter code: jsfiddle.net/leonguyen/bkK57/

Slide 101

Slide 101 text

Button.Toggle Switches - Enter code: jsfiddle.net/leonguyen/aRu6D/

Slide 102

Slide 102 text

Button.Simple Toggle Switch - Enter code: jsfiddle.net/leonguyen/Xxfjz/

Slide 103

Slide 103 text

Button.Selection Widget - Enter code: jsfiddle.net/leonguyen/ze4xy/

Slide 104

Slide 104 text

Dropdown List

Slide 105

Slide 105 text

DropList.Mini Dropdown Menu - Enter code: jsfiddle.net/leonguyen/hRu6F/

Slide 106

Slide 106 text

Datepicker

Slide 107

Slide 107 text

Datepicker.Dark Datepicker - Enter code: jsfiddle.net/leonguyen/CccK9/

Slide 108

Slide 108 text

Datepicker.Mini Calendar - Enter code: jsfiddle.net/leonguyen/y5vNA/

Slide 109

Slide 109 text

Datepicker.Little Calendar - Enter code: jsfiddle.net/leonguyen/Z3hNH/

Slide 110

Slide 110 text

Datepicker.Month Picker - Enter code: jsfiddle.net/leonguyen/8AdTe/

Slide 111

Slide 111 text

Other

Slide 112

Slide 112 text

Ribbon - http://livetools.uiparade.com/ribbon-builder.html

Slide 113

Slide 113 text

FESS - www.fess.me

Slide 114

Slide 114 text

ProCSSor - procssor.com

Slide 115

Slide 115 text

Layer Styles - layerstyles.org

Slide 116

Slide 116 text

CSS3 PIE - css3pie.com

Slide 117

Slide 117 text

Spritebox - spritebox.net

Slide 118

Slide 118 text

Shorthand Cheat Sheet - bit.ly/1b6yrb8

Slide 119

Slide 119 text

06. Display

Slide 120

Slide 120 text

Slide 121

Slide 121 text

CSS Menu Maker - cssmenumaker.com

Slide 122

Slide 122 text

CSS3 Menu - css3menu.com

Slide 123

Slide 123 text

Progress Bar

Slide 124

Slide 124 text

Progress.Multi-colored Progress Bar - Enter code:

Slide 125

Slide 125 text

Progress.Animated Progress Bar - Enter code:

Slide 126

Slide 126 text

Progress.Metal Progress Bar - Enter code:

Slide 127

Slide 127 text

Notification

Slide 128

Slide 128 text

Notification.Growl Notification - Enter code:

Slide 129

Slide 129 text

Notification.Notification Windows - Enter code:

Slide 130

Slide 130 text

Slide 131

Slide 131 text

Notification.Sliding Tags - Enter code:

Slide 132

Slide 132 text

Effect

Slide 133

Slide 133 text

Hover.css - ianlunn.github.io/Hover/

Slide 134

Slide 134 text

Others

Slide 135

Slide 135 text

View.Notepaper Blockquote - Enter code: jsfiddle.net/leonguyen/H8ybr/

Slide 136

Slide 136 text

View.Notepad - Enter code: jsfiddle.net/leonguyen/VLPGj/

Slide 137

Slide 137 text

View.Pricing Table - Enter code: jsfiddle.net/leonguyen/aBkBB/

Slide 138

Slide 138 text

View.Plans & Pricing Table - Enter code: jsfiddle.net/leonguyen/WDHXF/

Slide 139

Slide 139 text

View.Analytics Widget - Enter code: jsfiddle.net/leonguyen/g2gZs/

Slide 140

Slide 140 text

View.Chunky Calculator - Enter code: jsfiddle.net/leonguyen/cRgHA/

Slide 141

Slide 141 text

View.Flip-down Clock - Enter code: jsfiddle.net/leonguyen/SwseL/

Slide 142

Slide 142 text

View.Ribbon - Enter code: jsfiddle.net/leonguyen/nzzp3/