CSS3 Visual Effects

Written September 2012- specs and browser support will change!

Text Effects

hyphens: auto | none | manual. Hyphens is prefixed (-webkit-, -moz-, -ms-). NB: Chrome has no localized dictionaries, so cannot hyphenate properly.
Older syntax for breaking at any character: word-break: break-all;
MDN Hyphens
MSDN

This property controls whether hyphenation is allowed to create more soft wrap opportunities within a line of text. Values have the following meanings: ‘none’ Words are not hyphenated, even if characters inside the word explicitly define hyphenation opportunities. ‘manual’ Words are only hyphenated where there are characters inside the word that explicitly suggest hyphenation opportunities (). ‘auto’ Words may be broken at appropriate hyphenation points either as determined by hyphenation characters inside the word or as determined automatically by a language-appropriate hyphenation resource. Conditional hyphenation characters inside a word, if present, take priority over automatic resources when determining hyphenation opportunities within the word.

/* break according to localized dictionaries */
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;

Text-shadow is like box-shadow, a color and three lengths: Xoffset Yoffset blur (optional)
You can comma delimit multiple shadows.

text-shadow: #333 0.5em 0.5em 0.8em;

Gradients

On background-image.
MDN
MSDN
"to" syntax is not supported by Chrome (there is an obsolete "from" syntax)

background: linear-gradient(to bottom right, orange, white);

background-image: linear-gradient( 120deg, orange, white);
background: linear-gradient(to bottom right, orange, white);

background: radial-gradient(yellow, red);

/* 
shape: [circle] | ellipse
*at* origin: [center] | position eg 10% 40% 
size:  [farthest-corner] | farthest-side etc (see docs)
color-stops
*/
background: radial-gradient(orange, white);
background-image: radial-gradient(farthest-corner circle at center orange, white);

Transitions

Firefox, IE10 not prefixed; Chrome/Safari has -webkit-.
MDN
MSDN
Can obvious be used for :hover animations, but also when changing css classes through javascript.

transition: background-color 1s, color 1s, width 3s 1s;
Click or hover

transition-property: color;
transition-duration: 5s;
transition-delay: 1s;
transition-timing-function: linear; /*ease*/

Animations

MDN
MSDN
Uses @keyframes (as %: 0%=from 100%=to)

.animated {
animation-name: moveIt;
animation-duration: 3s;
animation-direction: alternate;
animation-iteration-count: infinite;
}
@keyframes moveIt {
  from {  margin-left: 0%;  }
  to {    margin-left: 60%; }
}

Transforms

Chrome/Safari/IE9 are prefixed, Firefox and IE10 are not prefixed
MDN
MSDN
The different transforms (and perspective for 3D) are complex, so use a generator.

transform: rotate(15deg); transform-origin: bottom right;

transform: rotate(15deg);
transform-origin: bottom right;

static void