CSS3 Cheat Sheet

Selectors

El[att^="val"] El[att$="val"] El[att*="val"] El:not(s) El:nth-child(n) El:target

Match attribute values beginning w/ 'val' Match ending values Match substring values Element that is not 's'. Element that is n-th child of its parent Element that is target of referring URL

div#bar is a target for http://foo/#bar

Flexible Box Model create HBox and VBox

display: -webkit-box; -webkit-box-orient: horizontal | vertical; -webkit-box-flex: 1;

Box Sizing standard box vs.. padding/border inside

-webkit-box-sizing: content-box | border-box;

Multiple Columns newspaper-like columns of text

-webkit-columns: width count

-webkit-column-width: Width

-webkit-column-count:	Number
-webkit-column-gap:	Gutter width
-webkit-column-rule:	Vertical divider, style like border

RGBA red, greeen, blue and alpha transparency

rgba(0-255, 0-255, 0-255, 0-1)

color: rgba(255,255,255,0.8);

White with 80% opacity

Border Radius vendor prefix required for iOS <4.0

-webkit-border-radius: 4px;

-webkit-border-top-left-radius: 4px;

For single corners

Multiple Backgrounds takes full background params

background: url(image1) repeat, url(image2) no-repeat;

Marquee create scrolling text across the screen

-webkit-marquee: direction repetition style speed

overflow-x: -webkit-marquee;	Required
-webkit-marquee-direction:	left, right, reverse, etc.
-webkit-marquee-repetition:	Number or infinite;
-webkit-marquee-style:	scroll | alternate | none;
-webkit-marquee-speed:	fast | normal | slow;

Shadows box and text shadows use same syntax

box-shadow or text-shadow:

x-offset y-offset blur color

text-shadow: 0 1px 5px rgba(0,0,0,0.3);

Animations

-webkit-animation: name duration timing_function; -webkit-animation-name: Of @-webkit-keyframe -webkit-animation-duration: Time in seconds -webkit-animation-timing-function: ease-in, linear etc. -webkit-animation-delay: Time until start -webkit-animation-iteration-count: Count or infinite

@-webkit-keyframes "colorShift" { /* Give it a name */ 0% { background-color: red; } 100% { background-color: blue; } } /* Call the animation */ #myDiv { -webkit-animation: colorShift 10s linear; }

Transitions

-webkit-transition: opacity 1s linear;

-webkit-transition-property:	Property to change or all
-webkit-transition-duration:	Time in seconds
-webkit-transition-timing-function:	linear, ease-in, ease-out, ease-in-out, etc.

Gradients used in background-image

-webkit-gradient(	Linear or radial
type,
x-offset y-offset,	Starting position
x-offset y-offset,	Ending position
color-stop(0.0,color),	As many stops as you
color-stop(1.0,color)	want from 0 to 1
)

background-image: -webkit-gradient( linear, 0 0, 0 100%, from(red), color-stop(0.5, green), to(blue) )

Background Size -webkit-background-size: length_x length_y

Text Size Adjust -webkit-text-size-adjust: percentage | auto | none;

Text Overflow text-overflow: ellipsis; overflow: hidden; Required white-space: nowrap; Required

Font Face

@font-face { font-family: 'MyFont'; src: url('MyFont.file'); }