Webtechnologie - CSS

Gradienteneditor
http://www.colorzilla.com/gradient-editor/

Lineare Gradienten
div .lin_grad { background :-moz-linear- gradient ( top, #fff , #adf ) ; /* Firefox */ background :-webkit- gradient ( linear, left top , left bottom , from ( #fff ) , to ( #adf ) ) ; /* Safari, Chrome */ background :-webkit-linear- gradient ( top, #fff , #adf ) ; /* Safari, Chrome - neue Syntax! */ background :-o-linear- gradient ( top, #fff , #adf ) ; /* Opera */ background :-ms-linear- gradient ( top, #fff , #adf ) ; /* IE */ background :linear- gradient ( top, #fff , #adf ) ; /* W3C Standard */ } http://www.normansblog.de/css3-im-detail-background-gradients/

Radiale Gradienten
div .rad_grad { background :-moz-radial- gradient ( center, #fff , #adf ) ; /* Firefox */ background :-webkit- gradient ( radial, center center , 80 , center center , 400 , from ( #fff ) , to ( #adf ) ) ; /* Safari, Chrome */ background :-webkit-radial- gradient ( center, #fff , #adf ) ; /* Safari, Chrome - neue Syntax! */ background :-o-radial- gradient ( center, #fff , #adf ) ; /* Opera, funktioniert noch nicht, aber sicherlich bald */ background :-ms-radial- gradient ( center, #fff , #adf ) ; /* IE */ background :radial- gradient ( center, #fff , #adf ) ; /* W3C Standard */ } http://www.normansblog.de/css3-im-detail-background-gradients/

Festes Seitenverhältnis div
http://lab.veille.jp/aspectratio/

Rotieren
Achtung: Wenn Element verschwindet, ist es wahrscheinlich sehr breit oder hoch und wurde um die Mitte gedreht und ist deswegen an einer unerwarteten Stelle gelandet. .rotate { -moz-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); }

Schriften einbetten
@font-face {/* Für den IE */ font-family:AgencyFB; src:url(fonts/agency-fb.eot); } @font-face {/* Für alle anderen Browser */ font-family:AgencyFB; src:url(fonts/agency-fb.ttf); } 	font-family:AgencyFB; }
 * 1) test{