6 coole Bildunterschriften mit CSS3

CSS3 ist wirklich mächtig. Früher brauchten wir Bilder oder eine Reihe von JavaScript-Codelines, um einen einfachen Übergangseffekt zu erzielen. Heutzutage können wir das nur mit CSS3 tun.

In diesem Lernprogramm zeigen wir Ihnen, wie Sie Bildunterschriften mit verschiedenen Übergängen erstellen, indem Sie einfach CSS3 verwenden.

Demo
Quelle herunterladen

Browser-Unterstützung

Diese Beschriftung hängt stark von Transformations- und Übergangseigenschaften ab, die relativ neue Funktionen sind. Daher ist es ratsam, die Browser-Unterstützung zu beachten, die für eine reibungslose Ausführung der Beschriftung erforderlich ist.

Die folgenden Browser unterstützen bereits Transformation und Übergang:

Internet Explorer 10+ (noch nicht veröffentlicht)
Firefox 6+
Chrome 13+
Safari 3.2+
Opera 11+

Beginnen wir nun mit dem Tutorial.

HTML-Struktur

Wir haben 6 Bilder; jedes Bild mit einem anderen Beschriftungsstil.

     Einfache Bildunterschrift
  
     Vollständige Bildunterschrift
 Lorem ipsum dolor sitzt amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  
     Bilduntertitel ausblenden
 Lorem ipsum dolor sitzt amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  
     Bildunterschrift
 Lorem ipsum dolor sitzt amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  
      Dies ist die Bildunterschrift
 Lorem ipsum dolor sitzt amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  
 
     Free Style Caption
 Lorem ipsum dolor sitzt amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Basic CSS

Bevor Sie ein Element gestalten, ist es immer ein guter Anfang, alle Eigenschaften mit diesem CSS-Reset zurückzusetzen und ihnen ihre Standardstilwerte zu geben, sodass alle Browser dasselbe Ergebnis darstellen (außer vielleicht IE6)..

Die Stile werden in der Datei style.css getrennt, sodass unsere HTML-Datei sauber aussieht. Vergessen Sie jedoch nicht, einen Link-Style innerhalb des Head-Tags hinzuzufügen, um die Stilregeln in der Datei anzuwenden.

OK, beginnen wir mit dem Gestalten des Elements, beginnend mit dem HTML-Tag und der Haupt-Wrapper-ID:

 html Hintergrundfarbe: #eaeaea;  #mainwrapper font: 10pt normal Arial, serifenlos; Höhe: Auto; Marge: 80px auto 0 auto; Text ausrichten: Mitte; Breite: 660px;

Image Box Style

In den Feldern mit den Bildern werden einige gängige Stile angewendet. Die Kästchen werden nebeneinander angezeigt. Beachten Sie, dass wir auch Überlauf hinzugefügt haben: hidden property; Dadurch werden alle Objekte, die sich im Div befinden, ausgeblendet.

Wir erklären auch die Übergangseigenschaft für jedes Bild innerhalb der Box, falls wir den Bildübergang später benötigen.

 #mainwrapper .box border: 5px solid #fff; Cursor: Zeiger; Höhe: 182px; Schwimmer: links; Marge: 5px; Position: relativ; Überlauf versteckt; Breite: 200px; -webkit-box-shadow: 1px 1px 1px 1px #ccc; -moz-box-shadow: 1px 1px 1px 1px #ccc; Box-Schatten: 1px 1px 1px 1px #ccc;  #mainwrapper .box img position: absolut; links: 0; -webkit-Übergang: alle 300ms Auslaufzeit; -Moz-Übergang: alle 300ms Auslaufzeit; -o-Übergang: alle 300ms Auslaufzeit; -ms-Übergang: alle 300ms Auslaufzeit; Übergang: alle 300ms Auslaufzeit;

Beschriftung Gemeinsamer Stil

Die Beschriftung wird einige allgemeine Stile und auch Übergangseigenschaften haben. Anstatt die Deckkraft zu verwenden, verwenden wir den RGBA-Farbmodus mit 0,8 für den Alphakanal, um die Beschriftung transparent zu machen, ohne den Text zu beeinflussen.

 #mainwrapper .box .caption Hintergrundfarbe: rgba (0,0,0,0,8); Position: absolut; Farbe: #fff; z-Index: 100; -webkit-Übergang: alle 300ms Auslaufzeit; -Moz-Übergang: alle 300ms Auslaufzeit; -o-Übergang: alle 300ms Auslaufzeit; -ms-Übergang: alle 300ms Auslaufzeit; Übergang: alle 300ms Auslaufzeit; links: 0;

Bildunterschrift 1

Die erste Beschriftung hat einen einfachen Übergangseffekt, der üblicherweise für eine Beschriftung verwendet wird. Die Bildunterschrift erscheint von unten, wenn wir über das Bild fahren. Um es zu adressieren, hat die Beschriftung eine feste Höhe von 30 Pixeln und wir verwenden ihre untere Position -30 Pixeln, um sie unter dem Bild auszublenden.

 #mainwrapper .box .simple-caption height: 30px; Breite: 200px; Bildschirmsperre; unten: -30px; Zeilenhöhe: 25pt; Text ausrichten: Mitte;

Bildunterschrift 2

Der zweite Typ hat die volle Breite und Höhe der Bild- / Box-Abmessung (200x200px) und der Übergang würde wie ein Schiebetüreffekt aussehen, nur dass er von oben nach unten gleitet.

 #mainwrapper .box. full-caption width: 170px; Höhe: 170px; oben: -200px; Text ausrichten: links; Polsterung: 15px;

Bildunterschrift 3

Die dritte Beschriftung wird ausgeblendet. Also haben wir Deckkraft: 0 für den Anfangszustand hinzugefügt.

 #mainwrapper .box .fade-caption, #mainwrapper .box .scale-caption Deckkraft: 0; Breite: 170px; Höhe: 170px; Text ausrichten: links; Polsterung: 15px;

Bildunterschrift 4

Die vierte Beschriftung wird von links nach rechts verschoben. Wir haben also 200px nach links (links: 200px) als Ausgangsposition festgelegt.

 ** Bildtext 4: Dia ** / #mainwrapper .box .slide-caption width: 170px; Höhe: 170px; Text ausrichten: links; Polsterung: 15px; links: 200px;

Bildunterschrift 5

Der fünfte Untertitel hat einen rotierenden Effekt. Nicht nur die Beschriftung wird rotieren, sondern auch das Bild. Es ist eher wie ein Positionswechsel durch Drehen.

Wir fügen also die Transformationseigenschaft mit einer Drehung um -180 Grad hinzu, es sei denn, Sie ziehen es vor, Ihren Monitor zu drehen, um die Bildunterschrift zu lesen.

 #mainwrapper # box-5.box .rotate-caption width: 170px; Höhe: 170px; Text ausrichten: links; Polsterung: 15px; oben: 200px; -Moz-Transformation: drehen (-180 Grad); -o-transform: drehen (-180deg); -webkit-transform: drehen (-180deg); transform: drehen (-180deg);  #mainwrapper .box .rotate width: 200px; Höhe: 400px; -webkit-Übergang: alle 300ms Auslaufzeit; -Moz-Übergang: alle 300ms Auslaufzeit; -o-Übergang: alle 300ms Auslaufzeit; -ms-Übergang: alle 300ms Auslaufzeit; Übergang: alle 300ms Auslaufzeit;

Bildunterschrift 6

Die letzte Beschriftung wird skaliert. In den vorherigen Beschriftungen wird der Text jedoch zusammen mit der .caption-Übergangsverschiebung angezeigt. In diesem Abschnitt werden wir es etwas anders machen.

Der Text wird angezeigt, nachdem die Übergangsverschiebung abgeschlossen ist. Also fügen wir dem Text eine Übergangsverzögerung hinzu, in diesem Fall die Tags h3 und p.

 #mainwrapper .box .scale-caption h3, #mainwrapper .box .scale-caption p position: relativ; links: -200px; Breite: 170px; -webkit-Übergang: alle 300ms Auslaufzeit; -Moz-Übergang: alle 300ms Auslaufzeit; -o-Übergang: alle 300ms Auslaufzeit; -ms-Übergang: alle 300ms Auslaufzeit; Übergang: alle 300ms Auslaufzeit;  #mainwrapper .box .scale-caption h3 -webkit-Übergangsverzögerung: 300ms; -Moz-Übergangsverzögerung: 300ms; -o-Übergangsverzögerung: 300ms; -ms-Übergangsverzögerung: 300ms; Übergangsverzögerung: 300ms;  #mainwrapper .box .scale-caption p -webkit-Übergangsverzögerung: 500ms; -Moz-Übergangsverzögerung: 500 ms; -o-Übergangsverzögerung: 500 ms; -ms-Übergangsverzögerung: 500ms; Übergangsverzögerung: 500ms;

Lass sie uns bewegen lassen

Im folgenden Abschnitt definieren wir das Verhalten der Beschriftung, wenn wir über die Bilder oder Boxen fahren.

Beschriftungsverhalten 1: Zeigen Sie sich.

Für die erste Beschriftung möchten wir, dass sie (von unten) angezeigt wird, wenn wir über die Box fahren. Um dieser Bewegung zu begegnen, verwenden wir die transform -Eigenschaft, und der unten stehende CSS-Code weist die Beschriftung an, 100% ihres Gewichts nach oben zu verschieben.

 #mainwrapper .box: hover .simple-caption -moz-transform: translateY (-100%); -o-transform: translateY (-100%); -webkit-transform: translateY (-100%); transform: translateY (-100%);

Wenn Sie keinen negativen Wert für translateY haben, sollten Sie zuerst dieses Tutorial lesen, um mehr Einblick zu erhalten.

Beschriftungsverhalten 2: Bewegen Sie es nach unten.

Umgekehrt wird die zweite Beschriftung von oben nach unten verschoben. Wir haben also einen positiven Wert für translateY.

 #mainwrapper .box: hover .full-caption -moz-transform: translateY (100%); -o-transform: translateY (100%); -webkit-transform: translateY (100%); transform: translateY (100%);

Bildtext 3: Einblenden.

Der dritte Titel ist eigentlich der einfachste. Wenn sich das Feld im Schwebeflug befindet, wird die Deckkraft der Untertitel auf 1 gesetzt, sodass sie sichtbar wird. Da die Übergangseigenschaft der Untertitelklasse hinzugefügt wurde, sollte der Übergang problemlos ausgeführt werden.

 #mainwrapper .box: hover .fade-caption Deckkraft: 1;

Beschriftungsverhalten 4: Schieben Sie es nach links.

Wie bereits erwähnt, wird diese Beschriftung von der linken Seite verschoben, das Bild wird jedoch auch nach rechts verschoben. Hier haben wir also 2 CSS-Deklarationen.

Der nachstehende CSS-Code zeigt an, dass die Beschriftung beim Bewegen über die Box um 100% nach links verschoben wird. Beachten Sie, dass wir translateX jetzt verwenden, da die Folie horizontal von rechts nach links verschoben werden soll.

 #mainwrapper .box: hover .slide-caption Hintergrundfarbe: rgba (0,0,0,1)! important; -moz-transform: translateX (-100%); -o-transform: translateX (-100%); -webkit-transform: translateX (-100%); Deckkraft: 1; transform: translateX (-100%);

Wenn wir über die Box fahren, wird das Bild nach links verschoben.

 #mainwrapper .box: hover img # image-4 -moz-transform: translateX (-100%); -o-transform: translateX (-100%); -webkit-transform: translateX (-100%); transform: translateX (-100%);

Beschriftungsverhalten 5: Drehen Sie es.

Diese Beschriftung unterscheidet sich vom Rest, da sie sich nicht von rechts oder links bewegt, sondern dreht. Wenn sich das Feld im Hover-Modus befindet, drehen sich das div, das das Bild und die Bildunterschrift enthält, um -180 gegen den Uhrzeigersinn, um das Bild auszublenden und die Bildunterschrift anzuzeigen.

 / ** Bildunterschrift drehen: Hover-Verhalten ** / #mainwrapper .box: hover .rotate Hintergrundfarbe: rgba (0,0,0,1)! Important; -Moz-Transformation: drehen (-180 Grad); -o-transform: drehen (-180deg); -webkit-transform: drehen (-180deg); transform: drehen (-180deg);

Beschriftungsverhalten 6: Vergrößern Sie es.

Diese Bildunterschrift kombiniert mehrere Transformationseffekte. Wenn sich die Box im Schwebeflug befindet, wird das Bild um 140% (1,4) von seiner ursprünglichen Größe vergrößert.

 #mainwrapper .box: hover # image-6 -moz-transform: scale (1.4); -o-transform: Maßstab (1.4); -webkit-transform: Maßstab (1.4); transform: Maßstab (1.4);

Und wenn Sie das CSS oben gesehen haben Bildunterschrift 6 Überschrift haben wir den Text um 200px nach links ausgeblendet. Der folgende CSS-Code weist den Text an, sich an seine Ausgangsposition zu bewegen. Der Text wird also gleichzeitig von links nach rechts verschoben.

 #mainwrapper .box: hover .scale-caption h3, #mainwrapper .box: hover .scale-caption p -moz-transform: translateX (200px); -o-transform: translateX (200px); -webkit-transform: translateX (200px); transform: translateX (200px);

Demo
Quelle herunterladen

Zusammenfassung

Diese CSS-Funktionen sind zwar cool, aber aufgrund der oben erwähnten Einschränkungen der Browserunterstützung noch nicht weit verbreitet. Experimentieren Sie jedoch weiterhin mit diesen neuen Funktionen, denn so gestalten wir zukünftig eine Webseite.

Credits

Die Miniaturansichten des Tutorials stammen von folgenden Websites (Screenshot):

Ein Buch getrennt
Archiduchesse
Vlog
Hongkiat
Die Grußfarm
Mark Ecko