Einblick in CSS3

von

Kurzer Einblick in CSS3

CSS3 Effekte

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

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

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

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

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* :)

Die hier könnten dich auch interessieren…

5 Kommentare RSS

Alex

Opera 10 kann wohl schon direkt was mit dem CSS3 Befehl anfangen?

Norman: ich hab mir mal erlaubt das zu ändern

Norman

Die aktuelle Beta der 10 soll alles oben genannte unterstützen. Hab sie leider selber noch nicht getestet. Da sie aber schon im Beta-Status ist, dauert es ja nicht mehr lange bis zum Release und dann werden wir sehen, was Opera 10 so alles an CSS3 versteht und was nicht. :)

Norman

OK ich hab mir mal die Beta geholt und muss wohl etwas zurückrudern.. tatsächlich ist es so, dass auch in der jetzigen Beta nur text-shadow unterstützt wird. Allerdings macht Opera 10 in anderen CSS3 Bereichen Fortschritte, z.B. bei den neuen Farbformaten RGBA und HSLA (A steht hier für Alpha Channel = Transparenz) sowie Webfonts und Selektoren.

Ich glaube aber kaum, dass Opera auf box-shadow und border-radius ganz verzichten kann, will es weiterhin konkurrenzfähig bleiben.

WP Themes

Good brief and this fill someone in on helped me alot in my college assignement. Say thank you you as your information.

Jannis Gerlinger

Sehr schön erklärt was alles möglich ist. Leider finde ich die erstellten ecken über border-radius nicht ganz so schön als wenn man das ganze grafisch macht.

Kommentieren