CSS3 Beispiele

CSS3 bietet einige neue Möglichkeiten für eine einfachere Umsetzung von Gestaltungen ohne Hintergrundbilder. Noch unterstützen leider nicht alle Browser CSS3 vollständig, aber mit einigen Hacks lassen sich die neuen CSS3 Eigenschaften schon heute in den gängigen Browsern nutzen.

Download "ie-css3.htc"

runde Ecken
-webkit-border-radius: 8px; /* Safari, Chrome */ -moz-border-radius: 8px; /* Firefox */ border-radius: 8px; /* CSS3-Standard */ behavior: url(ie-css3.htc); /* IE6+ Hack*/
Boxschatten
-moz-box-shadow: 1px 1px 1px #666; /* Firefox */ -webkit-box-shadow: 1px 1px 1px #666; /* Safari, Chrome */ box-shadow: 1px 1px 1px #666; /* CSS3-Standard */ behavior: url(ie-css3.htc); /* IE6+ Hack*/
Textschatten
text-shadow: #000 5px 5px 3px; /* CSS3-Standard */ filter: glow(color=#ffff00,strength=3); /*IE*/ filter: dropshadow(color=#ffff00,offX=5,offY=5); /*IE*/
Verlauf-Gradient
background-image: -moz-linear-gradient(top, #4477a1, #81a8cb); /* FF3.6 */ background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #4477a1),color-stop(1, #81a8cb)); /* Saf4+, Chrome */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4477a1', endColorstr='#81a8cb'); /* IE6,IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#4477a1', endColorstr='#81a8cb')"; /* IE8