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 zum Thema

HTML5: Quick Reference Guide
Ratgeber: "HTML5"

Die wichtigsten Tags auf einen Blick: In unserem praktischen Arbeitsblatt finden Sie einen wertvollen Begleiter für die Umstellung Ihrer Webprojekte…
internet, webdesign, google, content, ranking, seo, suchmaschine
Ratgeber: Urheberrecht

Einzigartige Inhalte bieten Lesern Mehrwert und sind ein wichtiges Qualitätsmerkmal. Ärgerlich, wenn sich jemand durch Kopieren an fremden Ergebnissen…
Die besten HTML5-Tipps
Neue Tipps & Tricks für blitz.io

Wer die Leistung einer Applikation ermitteln möchte, braucht keine Skripte zu schreiben, sondern kann einen der zahlreichen Online-Dienste einspannen.…
image.jpg
Ratgeber: Webentwicklung

Die clientseitige Javascript-Entwicklung bietet fast keine Entwicklungsumgebungen und auch keine vernünftigen Werkzeuge zur Fehlersuche. Eine der…
internet, webdesign, meteor, webapplikationen
Ratgeber

Mit Meteor sollen Entwickler in kurzer Zeit Umgebungen für Webapplikationen erstellen können, ohne sich um lästige Details kümmern zu müssen. Wir…