CSS3 - Quick Reference Cheat Sheet

Quick Reference Cheat Sheet for CSS3 elements

Transcript

1. © 2010 Go Squared Ltd. Equally Rounded Corners Equally Rounded Corners GoSquared GoSquared Download this Help Sheet now at gosquared.com/liquidicity Put it on your wall -webkit-border-radius Webkit Firefox Standard CSS3 is not yet supported in all browsers. Graceful degradation in older browsers such as IE6 (arghh) is highly recommended. -moz-border-radius border-radius Text Shadow Text Shadow text-shadow Box Shadow Box Shadow -webkit-box-shadow Webkit x-o set, y-o set, blur, color Firefox Standard -moz-box-shadow box-shadow 5px 5px 5px #000000 Individually Rounded Corners Individually Rounded Corners -webkit-border-top-left-radius -webkit-border-top-right-radius -webkit-border-bottom-left-radius -webkit-border-bottom-right-radius CSS3 Help Sheet CSS3 Help Sheet Webkit -moz-border-radius-topleft -moz-border-radius-topright -moz-border-radius-bottomleft -moz-border-radius-bottomright Firefox Box Sizing Box Sizing box-sizing: content-box -moz-box-sizing: content-box -webkit-box-sizing: content-box -ms-box-sizing: content-box -o-box-sizing: content-box; -icab-box-sizing: content-box; -khtml-box-sizing: content-box; border-top-left-radius border-top-right-radius border-bottom-left-radius border-bottom-right-radius Standard Syntax acts like a standard box-model element content-box padding and border render inside the box border-box Syntax Multiple Columns Multiple Columns -webkit-column-count -webkit-column-gap x-o set, y-o set, blur, color 5px 5px 5px #000000 Syntax lter: dropshadow( ) color, x-o set, y-o set (color=#000000, o x=5, o y=5) Syntax RGBA RGBA background-color: rgba(R, G, B, A) color: rgba(R, G, B, A) Red, Green, Blue, Opacity (0-255, 0-255, 0-255, 0-1) 255, 255, 255, 1 Syntax Font Face Font Face @font-face font-family: ‘ ’; src: url(’ url_of_font_ le‘); src: local(’ ‘), url(’ url_of_font.wo ‘) format(’wo ‘), url(’url_of_font.ttf’) format(’truetype’); More info by Paul Irish: http://bit.ly/cC76RC Webkit -moz-column-count -moz-column-gap Firefox column-count column-gap Standard Box Resize Box Resize resize min-height min-width over ow: auto both vertical horizontal Outline Outline outline 5px dashed #000000 thickness, style, color Gradients Gradients Selectors Selectors Incredibly powerful, but we couldn’t possibly t them on this sheet. Info at 456 Berea Street: http://bit.ly/cKO24D -webkit-gradient -moz-linear-gradient Syntax Syntax Syntax linear left bottom right bottom left top right top color-stop(0.5, rgb(R,G,B)) type of gradient position of start & end left right top bottom position of start & end position & color of stops rgb(R, G, B) 50% position & color of stops