Sicherheit & Internet:Internet:Web-Entwicklung

Teil 5: CSS Tricks: Bilder mit Pep

Bild und Beschriftung stehen innerhalb eines umfassenden Elements, die Bildbeschriftung selbst in einem span-Element:

<div class="beschriftung"><img src="blumen.jpg" alt=
"Blumen" /><span>rote Blumen</span></div>

Der Container muss dieselbe Größe wie das Bild haben. Rasch realisieren lässt sich das wiederum durch Floaten des Containers. Damit er als Bezugspunkt für die Positionierung der Bildbeschriftung dient, erhält er außerdem position: relative.

.beschriftung {
position: relative;
float: left;
}

Das Bild selbst muss zum Blockelement werden:

.beschriftung img {
display: block;
}

Nun zu den Formatierungen der Bildbeschriftung. Diese wird absolut positioniert - Bezugspunkt ist die umgebende Box, bei der ja position: relative definiert ist und die so groß ist wie das Bild. Die Beschriftung wird 0px von unten und von links positioniert. Da absolut positionierte Elemente nur so groß werden, wie sie wirklich Platz benötigen, brauchen sie außerdem eine explizite Breite.

.beschriftung span {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}

Damit ist die Bildunterschrift an Ort und Stelle, es fehlt aber noch das optische Feintuning. Der Bildbeschriftung wird eine Hintergrundfarbe und die Transparenz zugewiesen.

Zusätzlich ist im Beispiel eine Rahmenlinie oben und unten zur Begrenzung der Bildbeschriftung eingefügt. Außerdem wird eine explizite Höhe festgelegt und die Bildunterschrift in diesem Bereich über line-height vertikal zentriert:

.beschriftung span {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: #222;
-ms-filter: "progid:
DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter: progid:DXImageTransform.
Microsoft.Alpha(Opacity=60);
opacity: 0.6;
color: #fff;
text-align: center;
height: 2em;
line-height: 2em;
border-top: 1px solid #999;
border-bottom: 1px solid #999;
}

Das Beispiel lässt sich problemlos variieren. Sie können Farben und Transparenzen nach Belieben anpassen oder die Beschriftung auch etwas weiter nach oben setzen.

Am Beispiel der Transparenz zeigt sich deutlich, wie sich auch fortgeschrittene CSS3-Eigenschaften heute schon einsetzen lassen - wenn auch mit einigem Aufwand für die Extrawürste des Microsoft Internet Explorers.

Mehr lesen

Chronologische Liste und Netflix-Links -

Neuerscheinungen in der Übersicht -

Vorschau auf Film- und Serien-Highlights -

Mehr zum Thema

Webdesign

Adobe Illustrator wird im Webdesign immer beliebter. Wie Sie das Tool richtig einsetzen, erfahren Sie hier.
Facebook

Was sind die Implikationen für Unternehmen und Endanwender bei Facebooks neuer Suche Graph Search?
Online-Recht

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.
Online-Recht in der Cloud

Dateien werden immer häufiger in der Cloud bereitgestellt. Rechtlich ist das jedoch durchaus problematisch. Wir klären über das Urheberrecht in der…
E-Commerce-Logistik

Für den Erfolg eines Online-Shops sind zahlreiche Faktoren verantwortlich. Neben Produktvielfalt und Darstellung der Waren gehört auch die Logistik.