Kurzer Einblick in CSS3

CSS3 Effekte

Hallo Leute, dieser Artikel wird ein kleines Tutorial darüber, wie man schon jetzt einige der neuen CSS3 Features in modernen Browsern nutzen kann.

Als Versuchsobjekt wird uns ein Link in Form eines Buttons dienen.

Dazu erstmal der XHTML Code:

1

<a href="#">CSS3 Button</a>

und der CSS Code:

1
2
3
4
5
6
7
8
9

a {
	background-color:#e9e9e9;
	border:1px solid #828282;
	color:#828282;
	font:bold 26px arial,sans-serif;
	padding:10px 15px;
	text-decoration:none;
	text-transform:uppercase;
}

So sieht das Ganze dann mit CSS2 Features aus:

Button mit CSS2

Border-Radius

Das sieht natürlich alles noch sehr eckig und langweilig aus. CSS3 und die demnächst erscheinenden neuen Browser (Firefox 3.5, Opera 10 (teilweise) und – neulich erst released – Safari 4) erlauben es uns aber, durch einige nette Effekte, alles etwas aufzupeppen.

Beginnen wir am besten mit abgerundeten Ecken. Die Property border-radius wird derzeit noch von keinem Browser richtig unterstützt, einige haben aber damit begonnen, sie selbstständig zu implementieren. Firefox3 kennt die Eigenschaft als -moz-border-radius, während man unter Safari -webkit-border-radius benutzen muss.

Damit also in möglichst vielen Browsern die runden Ecken zu sehen sind, müssen wir gleiche mehrere Zeilen CSS Code zu unserem obigen Beispiel hinzufügen:

1
2
3

-moz-border-radius:25px; /* Mozilla alte Syntax */
-webkit-border-radius:25px; /* Safari alte Syntax */
border-radius:25px; /* W3C Standard */

Für den Internet Explorer (<9) gibt es derzeit keine Lösung.

Das Ergebnis sieht folgendermaßen aus:

border-radius

Text-Shadow

Als nächstes wollen wir versuchen, dem Text einen Schatten zu geben. Aber nicht irgendeinen, sondern etwas, das in die richtung “Emboss” geht, eine Art Präge-Effekt. Dafür gibt es text-shadow, das es uns möglicht macht, einen oder mehr verschiedengroße und -farbige Schatten auf den Text anzuwenden.

Für den gewünschten Emboss-Effekt brauchen wir zwei Schatten, einen dunklen oben und einen hellen unten, damit der Eindruck entsteht, von oben käme Licht:

1

text-shadow:0 1px 0 #fff,0 -1px 0 #404040;

Die Schatten werden durch ein Komma getrennt, Parameter sind [color] [x-offset]px [y-offset]px [blur/size]px. Negative Werte für Offsets sind erlaubt, die Reihenfolge der Schatten spielt hierbei keine Rolle.

Auch hier spielt der Internet Explorer nicht mit.

text-shadow

Box-Shadow

So sieht unser Button doch schon wesentlich angenehmer aus. Was jetzt noch fehlt ist ein Schlagschatten für den gesamten Button. Hierfür gibt es box-shadow, das wir wieder über Brwoserspezifische Präfixe einbinden müssen:

1
2
3

-moz-box-shadow:#ccc 0 0 10px; /* Mozilla alte Syntax */
-webkit-box-shadow:#cc 0 0 10px; /* Safari alte Syntax */
box-shadow:#ccc 0 0 10px; /* W3C Standard */

Fehlanzeige im Internet Explorer (<9).

Damit ist unser Button schon fertig:

box-shadow

Wie ihr seht, bringt CSS3 einige coole Neuerungen mit sich, die unsere Arbeit wesentlich erleichtern werden. (Natürlich sind die obigen drei nicht alles, was CSS3 zu bieten hat, sehr interessant werden z.B. auch die neuen Selektoren sein.) Denkt nur mal an box-shadow, ich weiß gar nicht, wie oft ich schon Vorlagen aus der Designabteilung bekommen habe, in denen jede Box irgendeinen soften Schlagschatten hatte und wir dann immer abwägen mussten ob sich der Aufwand lohnt dafür extra Grafiken zu machen. Auch bei Seitenrändern mit Schlagschatten mussten immer Grafiken zurecht geschnitten und mühevoll mit CSS an die richtige Stelle geschubst werden. Ebenfalls entfällt das Rendern für Überschriften mit Schatten, denn dafür gibt es jetzt ja text-shadow und Runde Ecken sind je eh ein Kapitel für sich…

Mit CSS3 spart man also Zeit, Geld und Traffic! *froi*