CSS Lab

Transcript of CSS Lab

LeoNguyen.com

http://www.google.com/url?q=http%3A%2F%2Fleonguyen.com%2F&sa=D&sntz=1&usg=AFQjCNHtCj6ZNAa_g951TNyXw_j2wtzbRQ

OutlineReferences (bit.ly/1jdFrJA)01. Pattern02. Text03. UI Framework04. Navigation:- Horizontal Navigation- Vertical Navigation- Accordion- Popover05. Input:- Button- Dropdow List- Datepicker

- Form- Widget06. Display:- Progress Bar- Notification- Tags- Effect- Others

http://www.google.com/url?q=http%3A%2F%2Fbit.ly%2F1jdFrJA&sa=D&sntz=1&usg=AFQjCNHvrPGtN2OgWp51reoR-BuIEl9Hyw

01. Pattern

Noise Texture

- www.cssmatic.com/noise-texture

http://www.google.com/url?q=http%3A%2F%2Fwww.cssmatic.com%2Fnoise-texture&sa=D&sntz=1&usg=AFQjCNHuEIM1yb8QK7C3ayPLkCu_34ZtIg

Ultimate CSS Gradient Generator

- http://www.colorzilla.com/gradient-editor/

http://www.google.com/url?q=http%3A%2F%2Fwww.colorzilla.com%2Fgradient-editor%2F&sa=D&sntz=1&usg=AFQjCNH0XJVgaGtw4GQe8LTKUXiU9FhFeA

SVGenerator

- svgeneration.com

http://www.google.com/url?q=http%3A%2F%2Fsvgeneration.com%2F&sa=D&sntz=1&usg=AFQjCNFfR_uUJaKwWtrVZhmFmVdwK8Njbg

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

http://www.google.com/url?q=http%3A%2F%2Fjsfiddle.net%2Fleonguyen%2FPmXHY%2F&sa=D&sntz=1&usg=AFQjCNH1hclimneFsWXwfBYq1UaMFwtX1Q

02. Text

Text Shadow

- www.themeshock.com

http://www.google.com/url?q=http%3A%2F%2Fwww.themeshock.com%2Fcss-text-shadow%2F&sa=D&sntz=1&usg=AFQjCNEIkkDj6fGdtUJ4zxakGTK3J0GhIw

CSS Type Set

- www.csstypeset.com

http://www.google.com/url?q=http%3A%2F%2Fcsstypeset.com&sa=D&sntz=1&usg=AFQjCNG-Dd-knD7QhopKVd56y3AvfMSbvQ

Type Tester

- www.typetester.org

http://www.google.com/url?q=http%3A%2F%2Fwww.typetester.org&sa=D&sntz=1&usg=AFQjCNGARib74jgHf6mSoZmNEglWAGwJ4g

Icon Builder

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

http://www.google.com/url?q=http%3A%2F%2Flivetools.uiparade.com%2Ficon-builder.html&sa=D&sntz=1&usg=AFQjCNFJSMFZq2xNk4OjKiaKf-8uFMjQxA

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

http://www.google.com/url?q=http%3A%2F%2Fjsfiddle.net%2Fleonguyen%2FuCL5g%2F&sa=D&sntz=1&usg=AFQjCNF_lrtbqxtfv3_nW1QhbynEbic2SQ

03.UI Framework

Outline

- Compatibility- Reset- Boilerplate- Framework

Compatibility

IE version- jsfiddle.net/leonguyen/UERWV/

http://www.google.com/url?q=http%3A%2F%2Fjsfiddle.net%2Fleonguyen%2FUERWV%2F&sa=D&sntz=1&usg=AFQjCNF__XF0utP18ASreF1Voloekyro4w

Reset

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

http://www.google.com/url?q=http%3A%2F%2Fbit.ly%2F1bxTgRl&sa=D&sntz=1&usg=AFQjCNHu7LGbVcSBQuW5T139HwukE9w0Hg

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

http://www.google.com/url?q=http%3A%2F%2Fnecolas.github.com%2Fnormalize.css&sa=D&sntz=1&usg=AFQjCNFXAmVNzgDfdPn1397rlQARmHBC1g

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)

http://www.google.com/url?q=http%3A%2F%2Fhtml5doctor.com%2F&sa=D&sntz=1&usg=AFQjCNFs1cK4G7iG8NnPjMMuTzhTCHqPjw

http://www.google.com/url?q=http%3A%2F%2Fbit.ly%2F1bQc2Sk&sa=D&sntz=1&usg=AFQjCNEsyERgiWLQjh3Xm7AB3cV8ClBXWA

http://www.google.com/url?q=http%3A%2F%2Fwww.cssreset.com%2F&sa=D&sntz=1&usg=AFQjCNF0MomMDYzCk6IY_D4LP6_PHY78Ew

http://www.google.com/url?q=http%3A%2F%2Fselectivizr.com&sa=D&sntz=1&usg=AFQjCNHfzIK7kvhUJGe1oGcpSe26KmAMVA

Boilerplate

HTML5 Boilerplate- www.html5boilerplate.com

http://www.google.com/url?q=http%3A%2F%2Fhtml5boilerplate.com&sa=D&sntz=1&usg=AFQjCNEjYLota0aKl0JmOvKHlsj6RKB6wA

Initializr- www.initializr.com

http://www.google.com/url?q=http%3A%2F%2Fwww.initializr.com%2F&sa=D&sntz=1&usg=AFQjCNFbNGPg0rFCaAEI6O-UwrHymbU--A

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

http://www.google.com/url?q=http%3A%2F%2Fprojects.craftedpixelz.co.uk%2Fshibui%2F&sa=D&sntz=1&usg=AFQjCNGE78ZDWLGr8Rce44tgyS1-MVzltw

CSSFlow

- www.cssflow.com

http://www.google.com/url?q=http%3A%2F%2Fwww.cssflow.com%2F&sa=D&sntz=1&usg=AFQjCNFl1J-5OD7SnYFCdTqlwtpGCMLpCA

CSS Layout Generator

- csslayoutgenerator.com

http://www.google.com/url?q=http%3A%2F%2Fcsslayoutgenerator.com&sa=D&sntz=1&usg=AFQjCNE6-vD3IzpFZy3K2q_RzGyy8L1B6w

Faux Width CSS Layouts

- faux-width-css-layouts

http://www.google.com/url?q=http%3A%2F%2Fwww.code-sucks.com%2Fcss%2520layouts%2Ffaux-css-layouts%2F&sa=D&sntz=1&usg=AFQjCNFvMFdX8JfghxM-C0QEL_RSKKl0oQ

Fixed Width CSS Layouts

- fixed-width-css-layouts

http://www.google.com/url?q=http%3A%2F%2Fwww.code-sucks.com%2Fcss%2520layouts%2Ffixed-width-css-layouts%2F&sa=D&sntz=1&usg=AFQjCNH0AykiBo5n3Y7VTKtVaABLOp-GCw

Framework

Twitter Bootstrap- getbootstrap.com- startbootstrap.com

http://www.google.com/url?q=http%3A%2F%2Fgetbootstrap.com%2F&sa=D&sntz=1&usg=AFQjCNFcuWE7kcMSjG0AtLf81JzsTheXPQ

http://www.google.com/url?q=http%3A%2F%2Fstartbootstrap.com%2F&sa=D&sntz=1&usg=AFQjCNH_-k6Pjv1CbstbEWsx32YlWazR9A

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

http://www.google.com/url?q=http%3A%2F%2Fbit.ly%2F1bqpnEk&sa=D&sntz=1&usg=AFQjCNESkZSUL2L40EeN_nxQvsTbuHAW6w

Foundation- foundation.zurb.com

http://www.google.com/url?q=http%3A%2F%2Ffoundation.zurb.com%2F&sa=D&sntz=1&usg=AFQjCNEipyMoIZhel81Cp6VWAJArLeYptw

Semantic UI- semantic-ui.com

http://www.google.com/url?q=http%3A%2F%2Fsemantic-ui.com%2F&sa=D&sntz=1&usg=AFQjCNG3UuF4AVoYKNuE99xevf1HGDcFtA

UIkit- getuikit.com

http://www.google.com/url?q=http%3A%2F%2Fgetuikit.com%2F&sa=D&sntz=1&usg=AFQjCNG3FJhTx62-opLaUBcoGlF84T52sA

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)

http://www.google.com/url?q=http%3A%2F%2Ftopcoat.io%2F&sa=D&sntz=1&usg=AFQjCNHmKi7MIxb1McHhL524lZA2b3CjLg

http://www.google.com/url?q=http%3A%2F%2Fgumbyframework.com%2F&sa=D&sntz=1&usg=AFQjCNFTN60rQkcjc90VZea5zD6eNF4tgw

http://www.google.com/url?q=http%3A%2F%2Fwww.99lime.com%2F&sa=D&sntz=1&usg=AFQjCNF9A4h8Wevggr52Kh3HaiUdCyMJpw

http://www.google.com/url?q=http%3A%2F%2Fmaxmert.com&sa=D&sntz=1&usg=AFQjCNF56MteChD4sv9T2gHd9vdT6ysk8Q

http://www.google.com/url?q=http%3A%2F%2Fmetroui.org.ua&sa=D&sntz=1&usg=AFQjCNE45uIZpBQPAMMd5VyGKSDRXPOi7A

http://www.google.com/url?q=http%3A%2F%2Fwww.responsivewebcss.com%2F&sa=D&sntz=1&usg=AFQjCNGcBGOOxBW1-sgfkvUDxXr0FM-IEg

http://www.google.com/url?q=http%3A%2F%2Fmaker.github.com%2Fratchet&sa=D&sntz=1&usg=AFQjCNG1pp-Cx02IwXj08RrrDvr3I4tkcw

http://www.google.com/url?q=http%3A%2F%2Fwww.chocolatechip-ui.com%2F&sa=D&sntz=1&usg=AFQjCNGlu-naiiC9eIYU763Uzdb1kD1ZDw

jQuery UI

jQuery UI- www.jqueryui.com

http://www.google.com/url?q=http%3A%2F%2Fjqueryui.com%2F&sa=D&sntz=1&usg=AFQjCNG8_K9Mut21nWJbSnCiU7gMXBMo-A

jKit- jquery-jkit.com

http://www.google.com/url?q=http%3A%2F%2Fjquery-jkit.com%2F&sa=D&sntz=1&usg=AFQjCNH53yXFhrhxtOZPdrT0RQQjb04bxg

04.Navigation

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

http://www.google.com/url?q=http%3A%2F%2Fjsfiddle.net%2Fleonguyen%2FybwSm%2F&sa=D&sntz=1&usg=AFQjCNGHuQf0NhB5X--XtXyk745kA_CCqw

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

http://www.google.com/url?q=http%3A%2F%2Fjsfiddle.net%2Fleonguyen%2FfZDwP%2F&sa=D&sntz=1&usg=AFQjCNGYMoI4MTVHT3oa1jGNnO8g8wEo3w

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

http://www.google.com/url?q=http%3A%2F%2Fjsfiddle.net%2Fleonguyen%2FzFpXm%2F&sa=D&sntz=1&usg=AFQjCNGz52AIsgZMmTcR6ZWrH_BS5h9t4g

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

http://www.google.com/url?q=http%3A%2F%2Fjsfiddle.net%2Fleonguyen%2FyaqXn%2F&sa=D&sntz=1&usg=AFQjCNF1EGObtaCRIelPMMp0IN3-6cf7tQ

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

http://www.google.com/url?q=http%3A%2F%2Fjsfiddle.net%2Fleonguyen%2FEJFaZ%2F&sa=D&sntz=1&usg=AFQjCNEkiBxORzjgNZZ3EnUpASGfOKfIzw

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

http://www.google.com/url?q=http%3A%2F%2Fjsfiddle.net%2Fleonguyen%2F8j7xS%2F&sa=D&sntz=1&usg=AFQjCNHeubAeP_tywReUZ9U36-C4Z5Kg5w

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

http://www.google.com/url?q=http%3A%2F%2Fjsfiddle.net%2Fleonguyen%2FscShN%2F&sa=D&sntz=1&usg=AFQjCNG2_yuP2jpxux-UdLKQZsKzWJrU9g

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

http://www.google.com/url?q=http%3A%2F%2Fjsfiddle.net%2Fleonguyen%2FAMKAV%2F&sa=D&sntz=1&usg=AFQjCNGWLaueDhaFFLMGFQYvqOd59QbV0g

HozNav.App Navigation with Notification Badges

- Enter code:

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

http://www.google.com/url?q=http%3A%2F%2Fjsfiddle.net%2Fleonguyen%2FK3Mg7%2F&sa=D&sntz=1&usg=AFQjCNGSUspnM31dZOxOuYlgVrgpUmWLUw

Accordion

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

http://www.google.com/url?q=http%3A%2F%2Fjsfiddle.net%2Fleonguyen%2F9ATK5%2F&sa=D&sntz=1&usg=AFQjCNEz22nW6dJ0OGzIMWyeTLP6ah9OTA

Popover

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

http://www.google.com/url?q=http%3A%2F%2Fjsfiddle.net%2Fleonguyen%2Fq5gGr%2F&sa=D&sntz=1&usg=AFQjCNG03oqhJzUW2diMA5aIVD_ue-DpgQ

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

http://www.google.com/url?q=http%3A%2F%2Fjsfiddle.net%2Fleonguyen%2FQWg9G%2F&sa=D&sntz=1&usg=AFQjCNEJVHmalThRpwOPUDwj14Yf5K-vPw

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

http://www.google.com/url?q=http%3A%2F%2Fjsfiddle.net%2Fleonguyen%2FPscfr%2F&sa=D&sntz=1&usg=AFQjCNFS--TB62rxcdSHJPNeGAS-95bN5w

Form

Form Builder

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

http://www.google.com/url?q=http%3A%2F%2Flivetools.uiparade.com%2Fform-builder.html&sa=D&sntz=1&usg=AFQjCNGBz6uJ8MpXKDjJd69BH4neFOgo9w

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

http://www.google.com/url?q=http%3A%2F%2Fjsfiddle.net%2Fleonguyen%2FEC4zA%2F&sa=D&sntz=1&usg=AFQjCNHSwP3dA32FgGX1lnfLHkBXu_Lt7Q

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

http://www.google.com/url?q=http%3A%2F%2Fjsfiddle.net%2Fleonguyen%2FP33km%2F&sa=D&sntz=1&usg=AFQjCNG-61YtVCv5Xjo39fiikx7WBLW9BA

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

http://www.google.com/url?q=http%3A%2F%2Fjsfiddle.net%2Fleonguyen%2FVEpjJ%2F&sa=D&sntz=1&usg=AFQjCNHAlruADUpsGc2rQpFBfNX1qOSVcg

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

http://www.google.com/url?q=http%3A%2F%2Fjsfiddle.net%2Fleonguyen%2FPcLjA%2F&sa=D&sntz=1&usg=AFQjCNEGUxCMGC72ChUeZA3a80xDqCxeLA

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

http://www.google.com/url?q=http%3A%2F%2Fjsfiddle.net%2Fleonguyen%2FaswUB%2F&sa=D&sntz=1&usg=AFQjCNHdkhqIUug-2iEyXJusnfwy6axokg

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

http://www.google.com/url?q=http%3A%2F%2Fjsfiddle.net%2Fleonguyen%2FGBRsE%2F&sa=D&sntz=1&usg=AFQjCNEoRqfyXuHxnP5gXN4x99oDq-8l5A

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

http://www.google.com/url?q=http%3A%2F%2Fjsfiddle.net%2Fleonguyen%2FtExNq%2F&sa=D&sntz=1&usg=AFQjCNEr8w_f6XEbdExEFrx1YShzFLTZ5g

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

http://www.google.com/url?q=http%3A%2F%2Fjsfiddle.net%2Fleonguyen%2F2EuU5%2F&sa=D&sntz=1&usg=AFQjCNGtjU8t5s9qthdWK90Ius1CjTWEbA

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

http://www.google.com/url?q=http%3A%2F%2Fjsfiddle.net%2Fleonguyen%2FhSXQR%2F&sa=D&sntz=1&usg=AFQjCNEny49gtWzpUocguAAXZyPTjBLYkw

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

http://www.google.com/url?q=http%3A%2F%2Fjsfiddle.net%2Fleonguyen%2FqMSjp%2F&sa=D&sntz=1&usg=AFQjCNHm1NCIXta7Df_cTXVBEuaPSSG7Vg

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

http://www.google.com/url?q=http%3A%2F%2Fjsfiddle.net%2Fleonguyen%2Fk92aH%2F&sa=D&sntz=1&usg=AFQjCNGD24-Z6dlt9rYHK0eI8U7bUx6KQQ

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

http://www.google.com/url?q=http%3A%2F%2Fjsfiddle.net%2Fleonguyen%2FjyCpu%2F&sa=D&sntz=1&usg=AFQjCNEzv6ADUvRSd4ob6HFBpperztR_nA

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

http://www.google.com/url?q=http%3A%2F%2Fjsfiddle.net%2Fleonguyen%2FPWAvz%2F&sa=D&sntz=1&usg=AFQjCNGzLIoVPo74xWQrJzx4-l6heRHbSg

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

http://www.google.com/url?q=http%3A%2F%2Fjsfiddle.net%2Fleonguyen%2FyX7Du%2F&sa=D&sntz=1&usg=AFQjCNGd-nH6eCckrCLBYFaRFYHhr4yD-w

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

http://www.google.com/url?q=http%3A%2F%2Fjsfiddle.net%2Fleonguyen%2FAfmYG%2F&sa=D&sntz=1&usg=AFQjCNHoMn7J972yc1VHlFrK1XyJvLcu7g

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

http://www.google.com/url?q=http%3A%2F%2Fjsfiddle.net%2Fleonguyen%2FtPfKD%2F&sa=D&sntz=1&usg=AFQjCNEy2H-uX2hh5_RIKzDL4C9fshhjmQ

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

http://www.google.com/url?q=http%3A%2F%2Fjsfiddle.net%2Fleonguyen%2FxzXDr%2F&sa=D&sntz=1&usg=AFQjCNHzF3NNegcOnQuvsv6nKNaveVHEOA

Widget

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

http://www.google.com/url?q=http%3A%2F%2Fjsfiddle.net%2Fleonguyen%2FVwFGP%2F&sa=D&sntz=1&usg=AFQjCNHDdly5P1aARlXEA5YJj_J6qGrhKg

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

http://www.google.com/url?q=http%3A%2F%2Fjsfiddle.net%2Fleonguyen%2FWL7NB%2F&sa=D&sntz=1&usg=AFQjCNEPnODwKqM31W_FsQVxeYADKfDfyw

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

http://www.google.com/url?q=http%3A%2F%2Fjsfiddle.net%2Fleonguyen%2FYy86v%2F&sa=D&sntz=1&usg=AFQjCNF-f-Xn6scHnZ1Du5_dVKi-8A92QQ

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

http://www.google.com/url?q=http%3A%2F%2Fjsfiddle.net%2Fleonguyen%2FSP4Rn%2F&sa=D&sntz=1&usg=AFQjCNHLsJAoasR4nTfYllZGUYyZvwHL6A

Widget.Shopping Cart Checkout Widget

- Enter code: jsfiddle.net/leonguyen/5QdsS/

http://www.google.com/url?q=http%3A%2F%2Fjsfiddle.net%2Fleonguyen%2F5QdsS%2F&sa=D&sntz=1&usg=AFQjCNGRJp3Yt36sV6Ty5tbJwfXBSXdoSA

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

http://www.google.com/url?q=http%3A%2F%2Fjsfiddle.net%2Fleonguyen%2FjmAet%2F&sa=D&sntz=1&usg=AFQjCNHSvf7SaMTqnXIC43FcUlF9-0EwEw

Widget.OS X-style Transparent Window

- Enter code: jsfiddle.net/leonguyen/kCZrb/

http://www.google.com/url?q=http%3A%2F%2Fjsfiddle.net%2Fleonguyen%2FkCZrb%2F&sa=D&sntz=1&usg=AFQjCNGHzsZu9_lD9cRkWaSyuMFbuJiQng

05. Input

Button

CSS3 Button Generator

- www.css3buttongenerator.com

http://www.google.com/url?q=http%3A%2F%2Fcss3buttongenerator.com%2F&sa=D&sntz=1&usg=AFQjCNEqo_VqkZBf2owH04yGO8eoS_QhxA

Button Maker

- www.css-tricks.com

http://www.google.com/url?q=http%3A%2F%2Fcss-tricks.com%2Fexamples%2FButtonMaker%2F&sa=D&sntz=1&usg=AFQjCNEXuFjQDBjk9L4poRxyGC-LZrwBNQ

Button Builder

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

http://www.google.com/url?q=http%3A%2F%2Flivetools.uiparade.com%2Fbutton-builder.html&sa=D&sntz=1&usg=AFQjCNGSLbDsrRn9IJOo2zkaUp2qan-mmg

Button Download

- www.button-download.com

http://www.google.com/url?q=http%3A%2F%2Fwww.button-download.com%2F&sa=D&sntz=1&usg=AFQjCNFtydzBveQhQdtdJkOgypFC9RRrBA

Button Essentials

- bit.ly/1dLygDf

http://www.google.com/url?q=http%3A%2F%2Fbit.ly%2F1dLygDf&sa=D&sntz=1&usg=AFQjCNFLC-DwqqeYtQnNWstCkT9ND-I1LQ

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

http://www.google.com/url?q=http%3A%2F%2Fjsfiddle.net%2Fleonguyen%2Fuuqdu%2F&sa=D&sntz=1&usg=AFQjCNHrk4uCJKVeI77BkVjc2HSTZc3TfQ

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

http://www.google.com/url?q=http%3A%2F%2Fjsfiddle.net%2Fleonguyen%2FuTgWS%2F&sa=D&sntz=1&usg=AFQjCNECjuhsJcsB8vxxpH-m_3FZGKpeuQ

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

http://www.google.com/url?q=http%3A%2F%2Fjsfiddle.net%2Fleonguyen%2F98qRD%2F&sa=D&sntz=1&usg=AFQjCNHlh3HBBiUykwQgHLDBeQWr2gJvmg

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

http://www.google.com/url?q=http%3A%2F%2Fjsfiddle.net%2Fleonguyen%2F3Ru4S%2F&sa=D&sntz=1&usg=AFQjCNEnR3QaUb9sqtVcc33kX8HAAvLTSA

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

http://www.google.com/url?q=http%3A%2F%2Fjsfiddle.net%2Fleonguyen%2FTxtek%2F&sa=D&sntz=1&usg=AFQjCNE5iUJcWr2LgePBgsEkl4dM1Q9ymQ

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

http://www.google.com/url?q=http%3A%2F%2Fjsfiddle.net%2Fleonguyen%2FuT3Xy%2F&sa=D&sntz=1&usg=AFQjCNF37F7RkkQ3MHfWsRRlxQ9wBEuoIQ

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

http://www.google.com/url?q=http%3A%2F%2Fjsfiddle.net%2Fleonguyen%2FdU3e7%2F&sa=D&sntz=1&usg=AFQjCNFHQqkXoZ3tugx1gpmLy9fYNNp3TQ

Checkbox

CSS Checkbox

- www.csscheckbox.com

http://www.google.com/url?q=http%3A%2F%2Fcsscheckbox.com%2F&sa=D&sntz=1&usg=AFQjCNEX1Zk5LbzaDORPR6GOxjQCmYeT9Q

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

http://www.google.com/url?q=http%3A%2F%2Fjsfiddle.net%2Fleonguyen%2FbkK57%2F&sa=D&sntz=1&usg=AFQjCNGP8q3L8gDd07if7BQPf5VkBjZg2w

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

http://www.google.com/url?q=http%3A%2F%2Fjsfiddle.net%2Fleonguyen%2FaRu6D%2F&sa=D&sntz=1&usg=AFQjCNGSsqRWr7Un0BVS63mrpkY8t9rEKA

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

http://www.google.com/url?q=http%3A%2F%2Fjsfiddle.net%2Fleonguyen%2FXxfjz%2F&sa=D&sntz=1&usg=AFQjCNG3ZLUnk2rhKbIgk3grvL6_5Ut6RA

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

http://www.google.com/url?q=http%3A%2F%2Fjsfiddle.net%2Fleonguyen%2Fze4xy%2F&sa=D&sntz=1&usg=AFQjCNGr8LvmoMrxysc-UBJbma56ydL6pg

Dropdown List

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

http://www.google.com/url?q=http%3A%2F%2Fjsfiddle.net%2Fleonguyen%2FhRu6F%2F&sa=D&sntz=1&usg=AFQjCNG4dM8T1whJyAa0mK6OBqU996uXRg

Datepicker

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

http://www.google.com/url?q=http%3A%2F%2Fjsfiddle.net%2Fleonguyen%2FCccK9%2F&sa=D&sntz=1&usg=AFQjCNEiSpp7TfneIXOg3j1U9eJ4EwVhig

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

http://www.google.com/url?q=http%3A%2F%2Fjsfiddle.net%2Fleonguyen%2Fy5vNA%2F&sa=D&sntz=1&usg=AFQjCNH1abHNtb3urFpkP4vZ5bqjYZOhRg

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

http://www.google.com/url?q=http%3A%2F%2Fjsfiddle.net%2Fleonguyen%2FZ3hNH%2F&sa=D&sntz=1&usg=AFQjCNEt-eAlZ4MUA4Qy_gv96LONs6ajXQ

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

http://www.google.com/url?q=http%3A%2F%2Fjsfiddle.net%2Fleonguyen%2F8AdTe%2F&sa=D&sntz=1&usg=AFQjCNHtLusW4XrhBSTijgsOQ3Vozytxow

Other

Ribbon

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

http://www.google.com/url?q=http%3A%2F%2Flivetools.uiparade.com%2Fribbon-builder.html&sa=D&sntz=1&usg=AFQjCNEpZoLDXqEbMJfpxICvhNByUvEM9Q

FESS

- www.fess.me

http://www.google.com/url?q=http%3A%2F%2Fwww.fess.me%2F&sa=D&sntz=1&usg=AFQjCNGpK-sQzXcty5W2k-zevqeOGqCURg

ProCSSor

- procssor.com

http://www.google.com/url?q=http%3A%2F%2Fprocssor.com%2F&sa=D&sntz=1&usg=AFQjCNHJHsu9JnzIEr5081eXDz5JyWHptA

Layer Styles

- layerstyles.org

http://www.google.com/url?q=http%3A%2F%2Flayerstyles.org%2Fbuilder.html&sa=D&sntz=1&usg=AFQjCNFeEx5Kd3V_1L1DgvJpiOi_vbmNow

CSS3 PIE

- css3pie.com

http://www.google.com/url?q=http%3A%2F%2Fcss3pie.com%2F&sa=D&sntz=1&usg=AFQjCNFur2PtX6IsWpfjMBq8xNUqQm5c4Q

Spritebox

- spritebox.net

http://www.google.com/url?q=http%3A%2F%2Fwww.spritebox.net&sa=D&sntz=1&usg=AFQjCNG12Vry_4E621jzcMpv12_jQ1wAcw

Shorthand Cheat Sheet

- bit.ly/1b6yrb8

http://www.google.com/url?q=http%3A%2F%2Fbit.ly%2F1b6yrb8&sa=D&sntz=1&usg=AFQjCNEy3ujLxv12NcmOLTvGI5C4sn-Ggw

06. Display

Menu

CSS Menu Maker

- cssmenumaker.com

http://www.google.com/url?q=http%3A%2F%2Fcssmenumaker.com%2F&sa=D&sntz=1&usg=AFQjCNEoeMWhQITg8C_4tPFeLjHKvKtiAA

CSS3 Menu

- css3menu.com

http://www.google.com/url?q=http%3A%2F%2Fcss3menu.com%2F&sa=D&sntz=1&usg=AFQjCNH4q5ZtEjZIBBj2zJR026Xxow9pnA

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:

CSS Lab

Technology

Transcript of CSS Lab

CSS Styling Introduction - ucg.ac.me › skladiste › blog_4051 › objava...CSS Styling Introduction About the Course CSS Styling 1. CSS Overview 2. CSS Presentation 3. CSS Display

CSS Hat vs Photoshop's Copy CSS

CSS Day: CSS Grid Layout

Cascading Style Sheets (CSS) 1. What is CSS? Why CSS? How to write a CSS? 2.

IO Lab: More HTML/CSS Version Control with Gitcourses.ischool.berkeley.edu/i290-iol/f13/_files/INFO290TA-lecture-0… · More HTML/CSS Version Control with Git Info 290TA (Information

Lab#6 font css html

CSS Awesomeness: CSS for beginners

Cascading Style Sheets - CSS basics. CSS use in html Internally css Externally.

CSS Cheatsheet - CSS-3-Cheatsheet

Chapter 1: Web Content and HTML Unit 2 - Web Development · Chapter 2: Styling and CSS Week 5 Lesson 10: Styling Text with CSS Web Lab This lesson introduces CSS as a way to style

Web Workshop: CSS Objectives: - “What is CSS?” - Structure of CSS - How to use CSS in your webpage.

Lab 02 CSS - Cascade Style Sheet - folk.uio.no · Lab 02 CSS - Cascade Style Sheet Version: 0.1 ... When you use external files, give to the file name like basic_stylesheet.css and

Control System Studio (CSS) - Jefferson Lab · PCaPAC October 2006 PCaPAC Jefferson Lab Control System Studio (CSS) The next Generation of OPI PCaPAC Jefferson Lab 27. October 2006

CSS JS CSS JavaScript Components

CSS Hadas Kahsay. Overview What is CSS Basic syntax of CSS Rules How to link CSS style to html documents Browsers and CSS Advantages of CSS.

LAB 3 CSS: Posizionamento e Box Model · 01QYAPD - SOCIAL NETWORKING: TECHNOLOGIES AND APPLICATIONS CSS: posizionamento e box model Fabio Ballati (fabio.ballati@polito.it) LAB 3 –

INTERNAL CSS Casey Ames Different types of CSS There are three different types of CSS: ◦ External CSS ◦ Internal CSS ◦ Inline CSS In this presentation.

CSS, CSS Selectors, CSS Box Model

HTML5 Features on Tizen...HTML5 Forms, Selectors API, Media Queries, CSS Transforms, CSS Animati ons, CSS Transitions, CSS Color, CSS Background and Borders, CSS Flexib le Box Layout,

Lab#7 CSS Box Model