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 */
}

Geschrieben von:

Jonas Hellwig

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing