css 3 help cheat sheet
If you can't read please download the document
DESCRIPTION
“We created the original CSS Help Sheet because we spent ages staring at ugly cheat sheets while designing beautiful sites. So we thought we’d make a Help Sheet that didn’t hurt the eyes of anyone who tried to use it. The past year, we’ve found ourselves using more and more CSS3 methods, and there was never much in the way of help out there until we decided to create a Help Sheet specifically for CSS3.We’ve kept CSS2 and CSS3 on separate Help Sheets for now as not everything in CSS3 is finalised, or works in all browsers (cough, IE).We hope you enjoy using them, and that they help you create even more memorable, usable, and stylish websites.http://www.gosquared.com/liquidicity/archives/1010TRANSCRIPT
GoSquaredEqually Rounded Corners-webkit-border-radius -moz-border-radius border-radius Webkit Firefox Standard
CSS3 Help Sheet
Text Shadowtext-shadow
Box Resizeresize both vertical horizontal
Syntax5px 5px 5px #000000 x-o set, y-o set, blur, color lter: dropshadow( )
min-height min-width over ow: auto
Individually Rounded CornersWebkit-webkit-border-top-left-radius -webkit-border-top-right-radius -webkit-border-bottom-left-radius -webkit-border-bottom-right-radius
Syntax(color=#000000, o x=5, o y=5) color, x-o set, y-o set
OutlineoutlineSyntax
Firefox-moz-border-radius-topleft -moz-border-radius-topright -moz-border-radius-bottomleft -moz-border-radius-bottomright
RGBAbackground-color: rgba(R, G, B, A) color: rgba(R, G, B, A)
5px dashed #000000 thickness, style, color
Gradients-webkit-gradientSyntax
Syntax250, 250, 250, 100 Red, Green, Blue, Opacity (0-250, 0-250, 0-250, 0-100)
Standardborder-top-left-radius border-top-right-radius border-bottom-left-radius border-bottom-right-radius
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
Box Shadow-webkit-box-shadow -moz-box-shadow box-shadow Webkit Firefox Standard
linear type of gradient left bottom right bottom left top right top position of start & end color-stop(0.5, rgb(R,G,B)) position & color of stops -moz-linear-gradientSyntax
Syntax5px 5px 5px #000000 x-o set, y-o set, blur, color
Box Sizingbox-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;
Multiple ColumnsWebkit-webkit-column-count -webkit-column-gap
left right top bottom position of start & end rgb(R, G, B) 50% position & color of stops
SelectorsIncredibly powerful, but we couldnt possibly t them on this sheet.Info at 456 Berea Street: http://bit.ly/cKO24D CSS3 is not yet supported in all browsers. Graceful degradation in older browsers such as IE6 (arghh) is highly recommended.
Firefox-moz-column-count -moz-column-gap
Syntaxcontent-box acts like a standard box-model element border-box padding and border render inside the box
Standardcolumn-count column-gap
Download this Help Sheet now at gosquared.com/liquidicity Put it on your wall
2010 Go Squared Ltd.