Einführung in CSS 3
Auf die offizielle Veröffentlichung von CSS 3 darf die Webdesign-Gemeinde wohl noch etwas warten. Kein Grund jedoch sich nicht einige der neuen Funktionen etwas genauer anzuschauen:
In diesem Artikel zeige ich anhand simpler Beispiele die CSS 3-Funktionen “rounded courners”, “multiple backgrounds”, “box-shadow”, “text-shadow” und “multi-column-layout”.
Safari 3+ User können (dank Safaris CSS 3-Interpretation) alle Beispiele im Browser sehen, Firefox 2+ User können einige Beispiele sehen. Internet Explorer User können (wen wundert’s?) an den neuen Features leider nicht teilhaben. Weitere Browser stehen mir aktuell nicht für Testzwecke zur Verfügung. Alle Beispiele habe ich zur Veranschaulichung jedoch bebildert.
Abgerundete Ecken (rounded courners) mit CSS 3
Mit CSS3 wird es endlich möglich sein auch ohne lästige DIV-Verschachtelungen und diverse Hintergrundgrafiken abgerundete Ecken zu erzeugen.
Benutzer von Firefox und Safari werden beim folgenden Absatz um 5 Pixel abgerundete Ecken erkennen können.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Für diesen grafischen Effekt ist lediglich folgender CSS-Code von Nöten:
p { background: #c2bdb2; border: 1px solid #a29a8d; -moz-border-radius: 5px; /* with mozilla prefix */ -webkit-border-radius: 5px; /* with safari prefix */ padding: 15px; }
Mehrere Hintergründe (multiple backgrounds) mit CSS 3
Mit CSS3 wird es möglich sein einem Element mehrere Hintergrundgrafiken zuzuweisen. Dem gewöhnlichen Hintergrund werden einfach mit Komma getrennte Hintergründe zugewiesen und im Element positioniert.
Safari-User werden beim folgenden Absatz einen interessanten Effekt beabachten können.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Wie beschrieben reicht folgender CSS-Code:
p { height:100px; padding:90px 15px 15px 15px; background: url(../bild-oben.jpg) top center no-repeat, url(../bild-unten.jpg) bottom center no-repeat, url(../bild-mitte.jpg) center repeat-y; }
Schlagschatten für Block-Elemente (box-shadow) mit CSS 3
CSS3 erleichtert zudem die grafische Aufwertung von Blockelementen. Mit der Funktion “box-shadow” kann Elementen ein Schlagschatten hinzugefügt werden. Die Eigenschaft besteht aus vier Werten: der horizontalen- sowie vertikalen Position des Schattens zum Ausgangselement, dem Weichzeichnungsgrad und der Schattenfarbe.
Der folgende Absatz wirft bei Safari-Usern einen netten Schlagschatten.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Der Code ist wie bereits zu erwarten sehr schlicht gehalten:
p { -webkit-box-shadow: 2px 2px 3px #000; /* with safari prefix */ padding: 15px; background:#fbfaf6" }
Schlagschatten für Texte (text-shadow) mit CSS 3
Wie Blockelementen kann auch Texten ein Schlagschatten zugewiesen werden. Soweit ich informiert bin existiert diese Möglichkeit bereits seit CSS 2, wird jedoch bisher nur von Firefox 3.1a und Safari interpretiert. Mit ein wenig Experimentierfreude lassen sich so erstaunliche Effekte erzielen …
Der folgende Text scheint förmlich zu glühen! Geil oder? (Passt übrigens gut zum Sunset-Theme ;)
Lorem ipsum!
Für das Beispiel wurde folgender Code verwendet:
p { text-shadow: 0 0 5px #ff6600; /* hor., vert., blur, color */ color:#ffba00; font-size:50px; font-weight:bold; background:black; padding:30px; }
Mehrspaltiger Text (multi-column-layout) mit CSS 3
Mehrspaltiger Text ist mit aktuellem CSS und dynamischen Content ein echter Krampf. CSS3 schafft hier Abhilfe und fügt die Eigenschaft “multi-column-layout” ein. Nun kann auch im Web der Text in mehreren Spalten dargestellt werden.
Die Funktion beinhaltet erneut mehrere Eigenschaften: Es kann die Spaltenbreite (column-width), der Spaltenabstand (column-gap) und die Spaltenzahl (column-count) angegeben werden. Ebenso kann zwischen den Spalten eine Linie (column-rule) definiert werden.
Benutzer von Firefox und Safari können den Effekt beim folgenden Beispiel erkennen:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Für diesen dreispaltigen Absatz habe ich folgenden Code verwendet:
p { -moz-column-count: 3; /* mozilla prefix */ -webkit-column-count: 3; /* safari prefix */ -moz-column-gap: 15px; /* mozilla prefix */ -webkit-column-gap: 15px; /* safari prefix */ -moz-column-rule: 1px solid #aea898; /* mozilla prefix */ -webkit-column-rule: 1px solid #aea898; /* safari prefix */ }
Themenverwandte Artikel:
Folgende Beiträge könnten dich ebenfalls interessieren.
Welcome to Kulturbanause, the private blog & portfolio of
17. Juli 2008, 22:44 Uhr
Super klasse! Danke dafür. Wieder was gelernt :)
17. Juli 2008, 22:56 Uhr
Absolut geil, ich kann’s kaum abwarten.
Echt toller Artikel, Jonas!
18. Juli 2008, 02:09 Uhr
Schön … ich freu mich. Und wieder etwas, wo Microsoft hinterherhinken wird. Aber naja … der Vorsprung der Guten muss ja gewahrt werden. :)
18. Juli 2008, 09:50 Uhr
Hallo Jonas,
so ein Zufall! Einen ähnlichen Artikel hatte ich fürs Wochenende geplant. Schön, dass Du es schon getan hast! Hier noch einige Tipps, die ich auf meiner Liste hatte:
1. Wenn man bei border-radius noch -khtml-border-radius hinzunimmt, hat man fast alle Browser mit diesem Feature abgedeckt (außer dem IE natürlich).
2. Mit border-radius-[topleft][topright][bottomleft][bottomright] können mit dem Firefox gezielt die einzelnen Ecken angesprochen werden
3. Mehrspaltige Layouts haben mich auch fasziniert, aber da ist schon noch Entwicklungsarbeit gefragt. Probiere mal, ein Bild einzufügen, welches über die Spaltenbreite hinausgeht. Das sieht grausam aus! ;-)
4. Was auch schon im FF funktioniert: separate Farben für jede Seite festlegen mit -moz-border-[top][right][bottom][left]-color, so können z.B. 3D-Effekte für buttons simuliert werden.
5. Es empfiehlt sich, diese Anweisungen in eine separate CSS-Datei auszulagern, so bleibt die Hauptdatei W3C-konform.
6. Eine schöne Übersicht für den Firefox, wenn auch noch nicht komplett dokumentiert, findet man auf http://developer.mozilla.org/en/docs/CSS_Reference:Mozilla_Extensions
Ansonsten ist das ein toller Artikel, werde den gerne weiterempfehlen!
LG,
Jens
18. Juli 2008, 09:55 Uhr
@ Jens: Danke für den Tip mit KHTML, wusste ich bisher nicht. Was die fehlerhafte Darstellung des multi-column-layout angeht so passieren da auch mit Text pur wirklich unschöne Sachen.
Was Details wie einzelne Ecken etc. angeht so wollte ich bei diesem Einführungsartikel nicht weiter darauf eingehen. Ich habe auf jeden Fall Fortsetzungen in Planung.
18. Juli 2008, 10:52 Uhr
Hallo Jonas,
bei Punkt 4 habe ich etwas total durcheinander gebracht, sorry! Ich wollte auf die neue Funktion border-outline hinweisen. Das ist ein Attribut, was zusätzlich zum normalen Rand (border) noch eine Umrandung um ein Element zeichnet und individuell gestaltet werden kann. Mehr dazu erfährt man auf der im oberen Kommentar verlinkten Seite bei Mozilla. Das erwähnte Attribut gibt es ja schon “ewig” und das kann sogar der IE ;-)
Sorry, nochmals!
Gruß,
Jens
18. Juli 2008, 11:55 Uhr
[...] Jonas Helwig hat in seinem außergewöhlich schön und originell gestaltetem Blog, mit dem ebenso originellen Namen “Kulturbanause.de” einige CSS-Elemente unter die Lupe genommen. [anschauen] [...]
18. Juli 2008, 11:55 Uhr
[...] Jonas Helwig hat in seinem außergewöhlich schön und originell gestaltetem Blog, mit dem ebenso originellen Namen “Kulturbanause.de” einige CSS-Elemente unter die Lupe genommen. [anschauen] [...]
19. Juli 2008, 01:31 Uhr
[...] bin grad über einen Beitrag des Kulturbanausen gestolpert, der eine kleine Einführung in CSS 3 mit Codebeispielen bereit hält. Ich kenne diese Dinge zwar schon, aber ich möchte sie euch nicht [...]
20. Juli 2008, 12:44 Uhr
Hey super, mal schauen ob ich von css3 was verwenden will. :D
Bitte mehr! :D ;)
26. Juli 2008, 20:04 Uhr
Als Ergänzung sollte vielleicht erwähnt werden, das die
-moz-*
-webkit-*
Erweiterungen der Browserhersteller sind und nach einer Validierung mit dem W3C Validatoren als fehlerhaft markiert werden. Sie entsprechen zwar in den meisten Fällen den W3C CSS 3 Elemente, sind aber Browserabhängig und nicht offiziell.
1. August 2008, 11:48 Uhr
Einiges von CSS 3 wurde in Firefox bereits gut implementiert.
Wenn eine Webseite einen hohen Anteil an Besuchern mit Firefox hat, dann lohnt es sich CSS 3 schon jetzt zu verwenden.
5. August 2008, 21:11 Uhr
Finde ich richtig gut in Firefox implementiert. Aber ich habe ca. 60 % Internetexplorer-Besucher und der Rest Firefox – es hält sich also die Waage. Eine Zwischenlösung muss her..
3. September 2008, 23:13 Uhr
[...] Die gute Nachricht zu Beginn: Neben dem Apple Browser Safari nutzt auch Google Chrome die Open Source Bibliothek “Webkit“. Webkit eröffnet umfangreiche Möglichkeiten wie beispielsweise CSS3 Unterstützung, sofern man die entsprechenden Befehle kennt. In meinem Artikel zu CSS3 könnt Ihr Euch einige davon anschauen. [...]
4. September 2008, 11:47 Uhr
Danke für den guten Artikel! Wann kann man den mit einer offiziellen Veröffentlichung von CSS3 rechnen? Und macht es denn jetzt schon Sinn CSS3 mit in die Stylesheets zu schreiben?
4. September 2008, 15:15 Uhr
@Jan: Die offizielle Veröffentlichung kann leider keiner auch nur annähernd erahnen. Das W3C ist da bekanntermaßen etwas .. langsam.
Wenn CSS3 bereits jetzt eingesetzt wird, dann sinnvollerweise als i-Tüpfelchen für eine Seite. Die Seite sollte in jedem Fall auch ohne CSS3 optimal dargestellt werden.
4. Oktober 2008, 19:12 Uhr
Hab dich mal auf http://www.tobiaskoelligan.de/html-und-css/einfuehrung-in-css-3/ verlinkt :)
14. Dezember 2008, 16:29 Uhr
[...] Zum Zeitvertreib für Zwischendurch und zum Träumen bietet sich der Artikel des Kulturbanausen an: Einführung in CSS3 [...]
16. Januar 2009, 16:57 Uhr
hi was für eine tolle seite mir ist beim anblick kalt geworden .
hast du ein link wo css befhele steen die chrom ander ferstet
Gruss Heuler
26. Mai 2009, 18:29 Uhr
Danke für den Kurzeinblick.
Ich surfe gerade mit Google Chrome und kann auch alle CSS3-Features sehen!
Grüsse!
7. September 2009, 19:29 Uhr
He, dein Design haut mich ja von den Socken (das musste ig gleich ma loswerden).
Jetz les ich erstmal deinen Artikel ;-)
26. Oktober 2009, 20:27 Uhr
[...] einiger Zeit habe ich ja bereits ein paar CSS3-Features vorgestellt. Nichts desto trotz möchte ich Euch diesen kurzen Artikel vorstellen der ausschließlich die [...]
17. April 2010, 14:45 Uhr
Nun bin ich nur noch gespannt wann sich auch ie an solche Standards hält…
2. Mai 2010, 11:25 Uhr
[...] ist zurecht in aller Munde und ich habe bereits vor einiger Zeit die neuen Möglichkeiten von CSS3 aufgegriffen. In letzter Zeit haben sich jedoch die allgemeinen Blog-Posts zum Thema CSS3 Buttons [...]
3. Juni 2010, 10:22 Uhr
[...] Einführung in CSS3 Alles was man wissen muss. [...]