Scribd
Upload
965 views

CSS 3 Help Cheat Sheet

“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

Uploaded by

Dmytro Shteflyuk
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
965 views

CSS 3 Help Cheat Sheet

“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

Uploaded by

Dmytro Shteflyuk
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 1

GoSquared CSS3 Help Sheet

Equally Rounded Corners Text Shadow Box Resize


-webkit-border-radius Webkit text-shadow resize both
-moz-border-radius Firefox vertical
Syntax horizontal
border-radius Standard
5px 5px 5px #000000 min-height
Individually Rounded Corners x-offset, y-offset, blur, color min-width
filter: dropshadow( )
Webkit overflow: auto
-webkit-border-top-left-radius Syntax
-webkit-border-top-right-radius Outline
(color=#000000, offx=5, offy=5)
-webkit-border-bottom-left-radius outline
color, x-offset, y-offset
-webkit-border-bottom-right-radius Syntax
Firefox RGBA 5px dashed #000000
-moz-border-radius-topleft thickness, style, color
background-color: rgba(R, G, B, A)
-moz-border-radius-topright
color: rgba(R, G, B, A) Gradients
-moz-border-radius-bottomleft
-moz-border-radius-bottomright Syntax -webkit-gradient
Standard 250, 250, 250, 100 Syntax

border-top-left-radius Red, Green, Blue, Opacity linear


border-top-right-radius (0-250, 0-250, 0-250, 0-100) type of gradient
left bottom
border-bottom-left-radius
right bottom
border-bottom-right-radius Font Face left top
@font-face right top
Box Shadow position of start & end
font-family: ‘ ’; color-stop(0.5, rgb(R,G,B))
-webkit-box-shadow Webkit src: url(’ url_of_font_file‘); position & color of stops
-moz-box-shadow Firefox src: local(’ ‘),
url(’ url_of_font.woff‘) format(’woff ‘), -moz-linear-gradient
box-shadow Standard
url(’url_of_font.ttf’) format(’truetype’); Syntax
Syntax left
More info by Paul Irish: http://bit.ly/cC76RC
5px 5px 5px #000000 right
top
x-offset, y-offset, blur, color Box Sizing bottom
box-sizing: content-box position of start & end
Multiple Columns rgb(R, G, B) 50%
-moz-box-sizing: content-box
position & color of stops
Webkit -webkit-box-sizing: content-box
-webkit-column-count -ms-box-sizing: content-box Selectors
-o-box-sizing: content-box;
-webkit-column-gap
-icab-box-sizing: content-box; Incredibly powerful,
Firefox but we couldn’t
-khtml-box-sizing: content-box; possibly fit them on
-moz-column-count
Syntax this sheet.
-moz-column-gap
content-box Info at 456 Berea Street:
Standard acts like a standard box-model element
http://bit.ly/cKO24D

column-count border-box CSS3 is not yet supported in


column-gap padding and border render inside the box all browsers. Graceful
degradation in older browsers
such as IE6 (arghh) is highly
recommended.

Download this Help Sheet now at gosquared.com/liquidicity


© 2010 Go Squared Ltd.
Put it on your wall

You might also like