Es ist schon beeindruckend, welche Möglichkeiten CSS inzwischen bietet.
Heute möchte ich euch zeigen, was bereits mit CSS 2.1 möglich ist, aber irgendwie noch nie so richtig zum Zuge gekommen ist. Die Rede ist von den Pseudo-Elementen :before und :after.

Diese Elemente sind dazu gedacht, einen bestimmten Inhalt vor oder nach einem HTML-Element zu platzieren. Zum Beispiel kann man so die vollständige URL hinter einem Link ausgeben, was bei Druckversionen einer Seite durchaus sinnvoll ist, da man auf Papier immer so schlecht klicken kann. Die Syntax sehe dabei so aus:

HTML-Syntax

<a href="http://emelpe.de">emelpe.de</a>

CSS-Syntax

a:after {
    content: "("attr(href)")";
}

Soviel zur ursprünglichen Idee, die dahinter steckt.

CSS ist nun aber bekanntlich eine Formatierungssprache und dazu gedacht HTML-Elemente so umzubauen, dass sie schön ausschauen. Dabei kann man sich auch der Option bedienen, einige Einsatzmöglichkeiten neu zu interpretieren. So auch bei den Pseudo-Elementen :before und :after.

Schauen wir uns doch mal den Aufbau dieser Elemente an. :before und :after werden als inline-Objekte interpretiert und quasi dem HTML-Element oben drauf gesetzt. Nicolas Gallagher hat das Ganze mal bildlich gestaltet und sehr anschaulich dargestellt.

CSS 2 multiple Hintergründe Model

Quelle: http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/

Auf diese Elemente kann man also voll über CSS zugreifen und sie entsprechend formatieren. Dabei ist lediglich zu beachten, dass sie die content:""; Deklaration benötigen, die aber, wie eben gezeigt, einfach leer gelassen werden kann.

Und jetzt kommt das Beste! ACHTUNG… festhalten! Das Ganze funktioniert auch im Internet Explorer!!!!!!! Nur der IE6 macht da noch Zicken, der ist aber eh zu vernachlässigen.

Dann lasst uns doch damit mal ein wenig rumspielen.

Ein sehr beliebtes Gestaltungselement in Webseiten sind die sogenannten Ribbons, die ein Band simulieren, das sich über irgend einen Bereich spannt. Bisher war das auch sehr gut über Grafiken zu lösen, die zuvor im Photoshop erstellt werden mussten. Mit CSS ist das auch umsetzbar. Zwar mag es im Photoshop ein wenig schneller gehen, aber hat man sich den CSS-Code erstmal zusammengebastelt, hat man ein schönes Snippet, welches sich in anderen Projekten anpassen lässt. Im Photoshop fängt man immer wieder von Vorne an.

Hier mal ein Bild, wie unser Ergebnis später aussehen soll.

CSS Ribbon

Ein Ribbon mit CSS

Der HTML-Code dafür ist schnell geschrieben und besteht aus folgenden Zeilen:

<section class="container">
    <h1>CSS-Ribbon</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</section>

Die H1 wollen wir jetzt so formatieren, dass sie unser Ribbon darstellt. Dazu werden über :before und :after zwei Pseudo-Elemente angehängt, die die umgeknickten Kanten des Ribbons darstellen. Der negative z-index sorgt dann dafür, dass sich die beiden auch im Hintergrund befinden. Hier der CSS-Code:

.container {
    position: relative;
    z-index: 1;
    width: 300px;
    padding: 20px;
    margin: 20px auto;
    background: #e5e5e5;
}
.container h1 {
    position: relative;
    padding: 10px 30px;
    margin: 0 -30px 20px;
    font-size: 28px;
    line-height: 32px;
    font-weight: bold;
    text-align: center;
    color: #fff;
    background: #87A800;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    zoom: 1;
}
.container h1:before,
.container h1:after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 100%;
    left: 0;
    border-width: 0 10px 10px 0;
    border-style: solid;
    border-color: transparent #647D01;
}
.container h1:after {
    left: auto;
    right: 0;
    border-width: 0 0 10px 10px;
}

Und schon haben wir unseren Ribbon-Effekt als Code-Snippet für andere Projekte.

Damit aber nicht genug!

Ebenfalls ein sehr cooler Effekt sind Schlagschatten, die nach oben geknickte Ecken simulieren. Auch ein Problem, was im Photoshop ziemlich simpel zu realisieren ist. Hier wieder der selbe Vorteil wie beim vorigen Beispiel. Mittels CSS kann man sich ein Snippet bauen, welches immer wieder einsetzbar ist und nur ein paar neue Parameter braucht.

Hier wieder ein Bild von unserem Ziel:

CSS Schatten

Schatten mit CSS

Der HTML-Code ist wie immer ziemlich simpel:

<section class="shadow">
    <h1>CSS Schatten</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</section>

Die Elemente :before und :after sind bei diesem Beispiel für den Schatten verantwortlich und werden mit Hilfe der CSS 3 Deklaration transform:rotate(); entsprechend gedreht, bis ein plastischer Effekt zu sehen ist. Ein box-shadow sorgt für den Schatteneffekt.

.shadow {
    position: relative;
    width: 340px;
    height: auto;
    margin: 35px auto;
    padding: 20px;
    border-top: 10px solid #87A800;
    -webkit-box-shadow: inset 0 3px 0 #ddd;
    -moz-box-shadow: inset 0 3px 0 #ddd;
    -ms-box-shadow: inset 0 3px 0 #ddd;
    -o-box-shadow: inset 0 3px 0 #ddd;
    box-shadow: inset 0 3px 0 #ddd;
    background: #fff;
}
.shadow:before,
.shadow:after {
    position: absolute;
    content: "";
    bottom: 15px;
    left: 10px;
    width: 50%;
    max-width: 175px;
    top: 20px;
    -webkit-box-shadow: 0 15px 15px rgba(0, 0, 0, 0.7);
    -moz-box-shadow: 0 15px 15px rgba(0, 0, 0, 0.7);
    -ms-box-shadow: 0 15px 15px rgba(0, 0, 0, 0.7);
    -o-box-shadow: 0 15px 15px rgba(0, 0, 0, 0.7);
    box-shadow: 0 15px 15px rgba(0, 0, 0, 0.7);
    -webkit-transform: rotate(-2deg);
    -moz-transform: rotate(-2deg);
    -ms-transform: rotate(-2deg);
    -o-transform: rotate(-2deg);
    transform: rotate(-2deg);
    z-index: -1;
}
.shadow:after {
    -webkit-transform: rotate(2deg);
    -moz-transform: rotate(2deg);
    -ms-transform: rotate(2deg);
    -o-transform: rotate(2deg);
    transform: rotate(2deg);
    right: 10px;
    left: auto;
}

Et voilà… unsere Schatten, die die Ecken „hochbiegen“.

Diese beiden Beispiele sind aber nur die Spitze des Eisberges, was mit den Pseudo-Elementen alles so möglich ist. Die folgenden Seiten und Artikel beschäftigen sich intensiv mit diesem Thema und ich kann sie euch nur ans Herz legen.