Vorheriger Artikel Nächster Artikel

HTML5 & CSS3: So kombinierst du Data-Attribute und Pseudoklassen

Wir haben schon darüber berichtet, wie du mit CSS3-Pseudoelementen mit purem verschiedenste Formen erzeugen kannst. Heute wollen wir dir zeigen, wie Pseudoelemente in Zusammenarbeit mit HTML5-Data-Attributen neue Wege für die Gestaltung von Webprojekten ermöglichen.

HTML5 & CSS3: So kombinierst du Data-Attribute und Pseudoklassen

Unser Ziel wird es sein, ein Bild mit einer Überschrift und einer Beschreibung zu versehen. Das Markup hierfür besteht aus einem Bild in einem Anchor-Element, gespickt mit einer Reihe von HTML5-Data-Attributen.

<a class="caption"
href="http://de.wikipedia.org/wiki/Hummeln"
data-title="Hummel"
data-description="Die Hummeln (Bombus) sind eine zu den Bienen [...]">
<img src="hummel.jpg" alt="Foto einer Hummel">
</a>

Mit data-title und data-description legen wir den Titel des Bildes und die dazugehörige Beschreibung fest. Die Werte dieser Attribute werden wir in den Pseudoelementen :before und :after verwenden können.

Wir fangen mit einer statischen Positionierung der Überschrift und Beschreibung an. Um den Titel und die Beschreibung direkt neben das Bild legen zu können, stylen wir zunächst das Anchor-Element.

.caption {
display: inline-block;
position: relative;
margin: 10px;
max-width:50%;
}
.caption img {
display:block;
max-width:100%;
}

Wir sorgen dafür, dass der Anchor und das darin liegende Bild maximal 50 Prozent des Bildschirms einnehmen und bereiten das Layout so für ein responsives Webdesign vor. Den Anchor positionieren wir relativ – das ist wichtig, da wir später die Überschrift und Beschreibung absolut und so relativ zum Anchor und nicht zum Body positioniert werden.

Als nächstes holen wir uns die Überschrift und Beschriftung aus den Data-Attributen heraus. Hierfür weisen wir den Content-Attributen der Pseudo-Elemente das jeweilige HTML5-Data-Attribut zu.

.caption:before {
content: attr(data-title);
}
.caption:after {
content: attr(data-description);
}

Titel und Beschreibung sollten nun ausgegeben werden. Für unser Beispiel können wir das Styling des Elements nochmal verfeinern, um sie neben dem Bild zu positionieren.

.caption::before,
.caption:after {
position: absolute;
left: 100%;
width: 90%;
margin: 0 0 0 10%;
font-weight: 300;
color: #89867e;
}
.caption:before {
content: attr(data-title);
top: 0;
height:20%;
font-size: 40px;
border-bottom: 1px solid rgba(0,0,0,0.1);
}
.caption:after {
content: attr(data-description);
top: 20%;
padding: 20px 10px 0px 0px;
font-size: 18px;
}

So sollte dann das Endergebnis aussehen:

Endergebnis aus Kombination von CSS3 und HTML5.
Endergebnis aus Kombination von CSS3 und HTML5.

CSS3-Pseudo-Elemente animieren

Einige Browser, wie beispielsweise Google Chrome in der aktuellen Version, unterstützen das Animieren von Pseudo-Elementen, sodass wir mit CSS-Transitions coole Effekte erzielen können.

.caption:hover::after,
.caption:hover::before{
opacity:1;
}
.caption:before,
.caption:after {
position: absolute;
left: 100%;
width: 90%;
margin: 0 0 0 10%;
font-weight: 300;
color: #89867e;
opacity:0;
transition: opacity 1000ms ease-out;
}

Hierfür ergänzten wir unser Stylesheet um einen Hover-Zustand für die Pseudoelemente der Caption-Klasse und setzen die Opacity der Pseudoelemente im zuvor definierten Block auf 0. Außerdem ergänzen wir die Pseudoelemente um eine CSS-Transition für die opacity.

Als Ergebnis erhalten wir nur das Bild, das beim Mouse-Over um den Titel und die Beschriftung ergänzt wird.

Mit dieser Technik ergeben sich viele verschiedene Einsatzmöglichkeiten für die Entwicklung von Webseiten. Semantisches Markup sollte bei der Entwicklung dennoch immer bevorzugt werden. Trotzdem: Die Kombination aus HTML5-Data-Attributen und ist ein zusätzlicher Weg, um interessante, interaktive Web-Projekte zu gestalten – und das ohne eine einzige Zeile JavaScript.

Weiterführende Links zum Thema „CSS3 und HTML5“

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
Vorheriger Artikel Zurück zur Startseite Nächster Artikel
9 Antworten
  1. von angelmedia am 15.07.2013 (09:09 Uhr)

    Nette Spielerei, Thema SEO bei Bildern aber verfehlt.

    Antworten Teilen
  2. von marc.tissler am 15.07.2013 (09:47 Uhr)

    Schleiße ich mich an. Nette spielerei aber CSS ist mehr für layout als für content gebracht, hab die einführung des content attributes nie verstanden. Man sollte layout am besten strickt vom rest trennen. Zumal frage ich mich wo der vorteil liegt ein IMG mit einem data-* attribute auszuliefern als das direkt in ein entsprechendes div o.ä. zu schreiben. Das macht nur dynamisch und damit in verbindung mit JS wirklich sinn.

    Antworten Teilen
  3. von Sven Wolfermann am 15.07.2013 (09:59 Uhr)

    Schlechtes Beispiel! Dafür gibt es in HTML5 und , das kann genauso gestaltet werden, ist semantisch korrekt und funktioniert (mit kleinen Hilfsmitteln) sogar in älteren Browsern.

    Antworten Teilen
  4. von Sven Wolfermann am 15.07.2013 (10:13 Uhr)

    oh die Tags wurden gelöscht... ich wollte sagen
    "Dafür gibt es in HTML5 figure und figcaption ... "

    Antworten Teilen
  5. von Lars am 15.07.2013 (10:51 Uhr)

    Ist da im vierten Code-Teil streng genommen nicht ein Doppelpunkt zuviel?

    .caption::before,
    .caption:after {

    Antworten Teilen
  6. von michsch am 15.07.2013 (11:52 Uhr)

    Wie sieht es bei diesem Beispiel denn mit der Barrierefreiheit aus? Soweit ich weiß ist diese hier eher nicht gegeben.
    Nur weil etwas funktioniert heißt das nicht, dass man es auch machen sollte. Und wie Sven schon geschrieben hat gibt es dafür einen besseren Weg.

    Antworten Teilen
  7. von marc.tissler am 15.07.2013 (13:50 Uhr)

    wird zeit das man Kommentare liken kann @mischsch ;)

    Antworten Teilen
  8. von michsch am 15.07.2013 (18:44 Uhr)

    Ich habe nichts gegen solche innovativen Techniken. Allerdings sollte hier eine fachmännische Bewertung solcher Techniken nicht fehlen, insbesondere auch hinsichtlich Barrierefreiheit.
    Auch viele dieser HTML5-Showcases oder "Ich kann ein Logo in CSS3 bauen" sind ziemlich pointless, zeigen aber die Möglichkeiten gut auf.
    Der letzte Satz dieses Artikels suggeriert aber eher, dass man eine solche Technik tatsächlich nutzen kann bzw. sollte. Dafür müsste euch euer interner Webkraut (David) auf den Tisch springen. ;-)
    Also: für mehr Qualität im Web!

    Antworten Teilen
  9. von Ilja Zaglov am 15.07.2013 (19:46 Uhr)

    Im letzten Teil weist der Artikel darauf hin, dass eine richtige Auszeichnung für wichtige Inhalte immer zu bevorzugen ist. In einem Einsatzszenario wie im Beispiel, mag die Technik aus SEO- und Barrierefreiheitsicht eher suboptimal sein. Für etwas, wie Tooltipps ist dieser Ansatz aber durchaus zu gebrauchen. Um herauszustellen, dass die Technik auch für spannendere Einsatzzwecke nutzbar ist, wurde dieses Beispiel gewählt. Soweit sehe ich kein Problem in den Einsatz dieser Technik – sofern man nicht übertreibt.

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema CSS3
CSS3: Coole Animationen für im Grid angeordnete Bilder
CSS3: Coole Animationen für im Grid angeordnete Bilder

Mit HTML5 und CSS3 stehen Webworkern viele Möglichkeiten zur Verfügung, um ihre Webseiten noch spannender und interaktiver zu machen. Wir stellen dir einige nette Effekte vor, mit denen du dein … » weiterlesen

Dropdown-Menüs: 20 Demos von simpel bis schick – inklusive Download und Tutorials
Dropdown-Menüs: 20 Demos von simpel bis schick – inklusive Download und Tutorials

HTML5 und CSS3 bilden die Standards, die Webseiten- und Mobile-Web-Entwicklung aktuell prägen. Es gibt unzählige Variationen von Dropdown-Menüs und Tutorials auf Basis dieser Technologien – vor … » weiterlesen

Kinderleicht zu CSS3-Animationen mit diesem Stylesheet
Kinderleicht zu CSS3-Animationen mit diesem Stylesheet

Mit dem CSS3 Animations Cheat Sheet, gibt es ein praktisches Stylesheet, mit dessen Hilfe ihr ohne großen Aufwand Seitenelemente animieren könnt. » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n-Newsletter t3n-Newsletter
Top-Themen der Woche für Web-Pioniere
Jetzt kostenlos
anmelden
Diesen Hinweis verbergen