You are on page 1of 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