static void

CSS3 Visual Effects

Written September 2012- specs and browser support will change!

Text Effects

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

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

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

.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

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