HTML 5 und CSS 3 stehen in den Startlöchern und bieten einige sehr schöne Neuerungen die schon von vielen Browsern weitgehend unterstützt werden. Besonders interessant sind dabei die CSS3-Eigenschaften “box-shadow” und “border-radius” und “transform” die viele Design-Spielereien die derzeit noch mit aufwendigen Hintergrundbildern und verschachtelten Divs gelöst werden mit simplem CSS ermöglicht. Auch Microsoft wird sich mit dem Internet Explorer 9 an HTML 5 und CSS 3 heran wagen.

Hier einige Beispiele der Möglichkeiten. Zur korrekten Darstellung sollte ein aktueller Firefox verwendet werden.
Box Schatten
Hier ist keine Bilddatei im Spiel sondern lediglich ein Div und CSS3. Die Farbe des Schattens lässt sich über einen Hexwert festlegen, kann also jede beliebige Farbe haben.

<style type="text/css" media="screen">
#demo_shadowbox {
	width: 200px;
	height: 100px;
	background-color: #CCC;
	-moz-box-shadow: 3px 5px 15px #333;
	margin: 10px 0;
}
</style>
<div id="demo_shadowbox"></div>

Text Schatten
Auch Text kann mit Schatten versehen werden.

<style type="text/css" media="screen">
#demo_shadowtext {
	font-size: 20px;
	text-shadow: 2px 2px 2px #333;
	margin: 10px 0;
}
</style>
<div id="demo_shadowtext">Dieser Text wirft einen Schatten</div>

Abgerundete Ecken
Abgerundete Ecken setze ich schon einige Zeit ein, da sie bereits von vielen Browsern korrekt dargestellt werden, ihr Fehler allerdings keine wirklichen Probleme aufwirft.

<style type="text/css" media="screen">
#demo_roundcornerbox {
	width: 200px;
	height: 100px;
	background-color: #CCC;
	-moz-border-radius: 20px;
	-khtml-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
	margin: 10px 0;
}
</style>
<div id="demo_roundcornerbox"></div>

Transformieren
CSS 3 ermöglicht es auch Texte und Boxen zu transformieren, also beispielsweise zu drehen.

<style type="text/css" media="screen">
#demo_transformbox {
	font-size: 20px;
	width: 200px;
	height: 100px;
	background-color: #CCC;
	-webkit-transform: rotate(10deg);
	-moz-transform: rotate(10deg);
	margin: 10px 0;
}
</style>
<div id="demo_transformbox">Schieflage?</div>

Dies sind nur einige der nützlichen Neuerungen und die Tatsache, dass auch Microsoft mit dem Internet Explorer 9 auf den Zug modernen Webdesigns aufspringt lässt hoffen. Weiterhin wird es allerdings das Problem der Nutzer geben die an ihrem veralteten Browser festhalten, denn noch immer gibt es genug aktive IE6 Nutzer. Diese werden wohl aber in den sauren Apfel beissen müssen: Dank HTML 5 und CSS 3 werden sich viele Webdesigner künftig unnötige Arbeit für diese Gruppe sparen und die Nutzer von veralteten Browsern müssen mit gewaltigen optischen Abstrichen auf vielen Seiten leben müssen – oder einfach kostenlos einen anständigen Browser installieren. Ich werde künftig auf jeden Fall schon einmal hier und dort ein paar Gimmicks mit den neuen Möglichkeiten einbauen, auch wenn diese noch nicht vom W3C abgesegnet und standardisiert sind.

Weitere interessante Beispiele und Informationen rund um CSS 3 und HTML 5 gibt es bei Dr. Web:
HTML 5 & CSS 3: Tutorials, Tipps und Referenzen
HTML5- und CSS3-Templates und -Tutorials