CSS 3 Help Cheat Sheet

Download CSS 3 Help Cheat Sheet

Post on 27-Apr-2015




2 download


We created the original CSS Help Sheet because we spent ages staring at ugly cheat sheets while designing beautiful sites. So we thought wed make a Help Sheet that didnt hurt the eyes of anyone who tried to use it. The past year, weve 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.Weve 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


<p>GoSquaredEqually Rounded Corners-webkit-border-radius -moz-border-radius border-radius Webkit Firefox Standard</p> <p>CSS3 Help Sheet</p> <p>Text Shadowtext-shadow</p> <p>Box Resizeresize both vertical horizontal</p> <p>Syntax5px 5px 5px #000000 x-o set, y-o set, blur, color lter: dropshadow( )</p> <p>min-height min-width over ow: auto</p> <p>Individually Rounded CornersWebkit-webkit-border-top-left-radius -webkit-border-top-right-radius -webkit-border-bottom-left-radius -webkit-border-bottom-right-radius</p> <p>Syntax(color=#000000, o x=5, o y=5) color, x-o set, y-o set</p> <p>OutlineoutlineSyntax</p> <p>Firefox-moz-border-radius-topleft -moz-border-radius-topright -moz-border-radius-bottomleft -moz-border-radius-bottomright</p> <p>RGBAbackground-color: rgba(R, G, B, A) color: rgba(R, G, B, A)</p> <p>5px dashed #000000 thickness, style, color</p> <p>Gradients-webkit-gradientSyntax</p> <p>Syntax250, 250, 250, 100 Red, Green, Blue, Opacity (0-250, 0-250, 0-250, 0-100)</p> <p>Standardborder-top-left-radius border-top-right-radius border-bottom-left-radius border-bottom-right-radius</p> <p>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</p> <p>Box Shadow-webkit-box-shadow -moz-box-shadow box-shadow Webkit Firefox Standard</p> <p>linear type of gradient left bottom right bottom left top right top position of start &amp; end color-stop(0.5, rgb(R,G,B)) position &amp; color of stops -moz-linear-gradientSyntax</p> <p>Syntax5px 5px 5px #000000 x-o set, y-o set, blur, color</p> <p>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;</p> <p>Multiple ColumnsWebkit-webkit-column-count -webkit-column-gap</p> <p>left right top bottom position of start &amp; end rgb(R, G, B) 50% position &amp; color of stops</p> <p>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.</p> <p>Firefox-moz-column-count -moz-column-gap</p> <p>Syntaxcontent-box acts like a standard box-model element border-box padding and border render inside the box</p> <p>Standardcolumn-count column-gap</p> <p>Download this Help Sheet now at gosquared.com/liquidicity Put it on your wall</p> <p> 2010 Go Squared Ltd.</p>


View more >