Hinzufügen einer Beschriftung des Fotos pop-up mit CSS3
Vorsicht
Dieser Artikel wurde mehr als vor einem Jahr veröffentlicht, Es gab Entwicklungen können.
Bitte berücksichtigen Sie dies.
In der heutigen Tutorial werden wir sehen, wie stellen Sie die Bilder von unserer Website, so dass es, um eine Beschriftung an der Unterseite des Fotos schweben mit Fade-In-Effekt scheint / Fade-Out.
Diese Technik nutzt einige der Funktionen in der Umsetzung CSS3, die neueste Version. Leider sind noch nicht alle Browser, die dieser Spezifikation angepasst, wissen, dass Je nach Browser möglicherweise nicht. Neuere Browser, die CSS3 sind Firefox 4, Safari 5, Mobile Safari und Opera 10. Entdecken purtroppo nicht unterstützt (anscheinend nicht einmal die nächste Version: IE9), aber aber wir werden versuchen, nicht zu vergessen, IE-Benutzer.
Eines der neuen Features in der dritten Version von CSS, die zu Beginn meine Aufmerksamkeit zu erregen wird implementiert sind die Übergänge. Die CSS-Übergänge permettono di “animieren” einige Elemente, ohne eine einzige Zeile JavaScript. Es kann vorkommen, dass Ihr Browser unterstützt nicht die Übergänge, Das Ergebnis wird ebenfalls erreicht werden ohne Animationen, sondern sofort Übergang von einem Zustand in den nächsten Erhaltung der Benutzbarkeit.
Um eine Vorstellung davon zu bekommen, was wir sind, zu erkennen, wir markieren die Demo-Seite.
Ich erkläre sofort, dass in diesem Tutorial werden wir einige der Verwendung neuen HTML5-Tags kommen “figure” und “figcaption“. Wenn wir alle bereit.
1. I mark-up basilari
Lassen Sie uns mit der Basis-Code starten:
<!DOCTYPE html>
<html lang ="sie">
<Leiter>
<Titel>Bildunterschriften auf Bildern mit CSS3 | Demo | TheJoe.it</Titel>
<wenn http-equiv ="Content-Type" content ="text / html;charset = UTF-8" />
</Leiter>
<Körper>
</Körper>
</html>
Dieser Teil ist allen bekannt. Wir schaffen “head” und “body“, erklären die Sprache verwendet, und die Codierung Zeichen.
2. Artikel
An dieser Stelle fügen wir den Artikel, enthalten Bilder.
<Beitrag> <h1>Lorem ipsum</h1> <h2>Das ist langweilig.</h2> <h3>Nullam von Convallis</h3> <h4>Vorwort</h4> <p>Es ist wichtig,, schreiben Sie einen Kommentar. Pellentesque imperdiet, augue vitae hendrerit rhoncus, eros consectetur Tellus urna, See-Lizenz-Prüfung ist das Informations-Plattform. Mauris ac Arcu in Condimentum feugiat Elite Masse ac. Keine Notwendigkeit für die industrielle Fischerei. Cras adipiscing porttitor kostenlos ut imperdiet. Suspendisse ultrices Augu Fördermotor vulputate ac Orks. Er arbeitet jetzt in Angst guten Wünsche nicht durch eine Vielzahl von wirtschaftlichen Abschwung veröffentlicht. Proin nicht ipsum Sie fragen, sed tincidunt odio. The CW großen, volutpat Schleier Elite Lehrplan Condimentum. Jeder von Hass Clients Gewinne eine Fußball-Liga. In den Nachrichten. Klassenzimmer, lacus tincidunt ultricies sagittis, ultrices leo sapien eros, eget posuere nisl nibh ac nisi. In molestie luctus Produkte, lacinia vitae risus in ultrices. Aber als Verbraucher, ich trinke nicht vergiftet Nachrichten. Nichts facilisi. Maecenas mollis, Sapient Haut Sodales euismod, tellus leo adipiscing nisi, EU regionalen Ängste über das Leben. </p> <Fußzeile>Entnommen aus <a href ="http://www.lipsum.com/">Lorem Ipsum Generator</a>.</Fußzeile> </Beitrag>
Ich habe ein Paar HTML5-Tag in diesem Teil des Codes: “article” zu enthalten Artikel, und “footer” für Text am Ende der Seite. Dadurch wird eine genaue Struktur auf unseren Artikel, und macht es mehr semantisch verständlich, auch für Grafiken.
3. Fotos hinzufügen
Jetzt können wir unsere Bilder hinzufügen. Der Einsatz zwischen dem Titel und dem Text.
<Abbildung style ="Breite: 500px; Höhe: 375px; schweben: links; margin-right: 20px;">
<img src ="img / cielo.jpg" alt="Der Himmel" />
<figcaption>
<h3>Der Himmel.</h3>
<p>Ein Blick nach oben aus dem Boden.</p>
</figcaption>
</Abbildung>
Für Bilder, die wir verwendet zwei andere Elemente HTML5: “figure” und “figcaption“. Dies ermöglicht es uns, ein Bild mit dem Titel einschließenden Elementen zu assoziieren “img” und “figcaption” bei einem alleinerziehenden Elternteil: “figure“.
4. Ein Staub’ Stil
Jetzt sind wir bereit, fügen Sie ein bisschen CSS.
/* Ränder und Farben */
Körper {
Marge: 30px;
font-family: "Georgia", serif;
line-height: 1.8in;
Farbe: #333;
}
/* Maße */
Beitrag {
Breite: 800px;
padding: 50px;
Marge: 0 auto;
Anzeige: blockieren;
font-size: 1.2in;
}
Artikel h2 {
line-height: 1.5in;
}
/* Stil für die Fußzeile */
Fußzeile {
font-style: kursiv;
font-size: .9in;
}
5. Der Stil für Bilder
Lassen Sie das Stilelement “figure“, das bereits “figcaption” und “img“.
/* Stil für Bilder */
Abbildung {
Position: relativen;
Anzeige: blockieren;
Grenze: 1px solid #333;
Marge: 5px 0 10px 0;
}
6. Bildunterschrift Stil
Hier kommt der Spaß. Die Beschriftung sollte auf das Bild auszulesenden, aber in der Unterseite des gleichen, und muss eine sfondo nicht deckend, aber durchscheinend, so können Sie auch weiterhin das Bild unten sehen. Es muss auch zunächst verborgen, so dass es nur auf dem Bild Schritt zeigen. Hier ist, wie:
/* Stil für Beschriftungen, versteckt sie standardmäßig */
figcaption {
Position: absolute;
links: 0;
Unterseite: 0;
Breite: 100%;
font-size: .7in;
Farbe: #fff;
Hintergrund-Farbe: rgba(0,0,0,.7);
Opazität: 0;
-webkit-Übergang: Opazität 0,5 s Leichtigkeit-in-out;
-moz-Übergang: Opazität 0,5 s Leichtigkeit-in-out;
-oder-Übergang: Opazität 0,5 s Leichtigkeit-in-out;
Übergang: Opazität 0,5 s Leichtigkeit-in-out;
}
Lassen Sie uns einen genaueren Blick auf die CSS:
- Legen Sie die Beschriftung
Lassen Sie uns Position in absoluter Weise das Elementfigure. - Impostare Breite, Schriftgröße und-farbe
Eine Breite des 100% Es wird sichergestellt, dass der Hintergrund der Legende mit der gleichen Breite des Mutterelements aufweist. Wir geben auch die Beschriftung Größe und Text farblich. - Legen Sie den Hintergrund transparent und blenden Sie die Beschriftung
Wir verwenden die Farbe Formatrgba()einen schwarzen Hintergrund mit Deckkraft angeben 70%. Dann setzen wir die gesamte Trübung der Beschriftung auf Null, und blenden Sie die Beschriftung. - Stellen Sie den Übergangseffekt
Dies ist das Herz dieses Tutorials, die Wirkung “Übergang”:transition: opacity .5s ease-in-outweist den Browser an die animierenopacitydieses Element in einer halben Sekunde.
Jetzt setzen wir die “Übergang“, für den Anschein erwecken, müssen wir hinzufügen, die Pseudo-Klasse “:hover” Element “figure“.
/* Zeigt caption bei Mouseover */
Abbildung:hover figcaption {
Opazität: 1;
}
Wir am Ende alles ein bisschen zu geben’ Stil Inhalt die Beschriftung.
/* In Polsterung und Marge auf dem Titel */
figcaption * {
padding: 0 10px;
Marge: 0;
}
figcaption *:first-child {
padding-top: 5px;
}
figcaption *:last-child {
padding-bottom: 5px;
}
/* Impostiamo i benutzerdefinierte Schriftart degli Header e caption */
figcaption, h1, h2, h3, h4 {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
7. Unterstützung für Internet Explorer
Wir sind fast fertig. Wie auch immer, wie bereits erwähnt, IE nicht unterstützt “Übergänge”. Und wenn Sie nicht essen bastasse, IE8 und früher gar nicht unterstützt “opacity” oder Farbformat “rgba()”.
Zwar gibt es nicht viel zu tun “Übergänge” (wenn sie nicht verlassen JavaScript), wir können immer noch einige spezifische Anweisungen CSS für IE, dass zumindest die Bildunterschriften werden bei Mouseover erscheint.
figcaption {
filtern: alpha(Deckkraft = 0);
}
Abbildung:hover figcaption {
filtern: progid:DXImageTransform.Microsoft.gradient(startColorstr = # aa000000, aa000000 endColorstr = #);
}
Wir gehen nicht mit IE getan. IE8 und früher nicht erkennen, die Elemente HTML5 kommen “article“, “figure” und “figcaption“. Dies kann kein Problem, es war nicht so, dass IE nicht erlauben, um Stile auf Elemente, die ihm unbekannt gelten.
Glücklicherweise ist die Lösung einfach. Und’ ausreichend, um die erforderlichen Elemente mit einem Bit zu erzeugen’ JavaScript, wobei das Verfahren “document.createElement()“. Lassen Sie uns diesen Code zwischen den Conditional Comments so dass nur IE8 und früher in der Lage sein, es zu sehen.
<!--
Hinzufügen von Unterstützung für HTML5-Elemente IE <= 8
-->
<!--[wenn lt IE 9]>
<script type ="text / javascript">
document.createElement("Artikel");
document.createElement('Figur');
document.createElement('Figcaption');
</script>
<![endif]-->
Jetzt sind die Bildunterschriften auch in IE8 und unteren, nicht über die Auswirkungen Fade-in und Fade-out, aber zumindest ausgelesen werden.
1 Kommentar
Gutschein · 13 Januar 2011 um 11:10 AM
niedliches Bild! 🙂