css 3 help cheat sheet

Download CSS 3 Help Cheat Sheet

Post on 27-Apr-2015




2 download

Embed Size (px)


“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/1010


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


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


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.