TheJoe.it Into the (öffnen) Quelle

12Jan_Januar_abbreviation/111

Hinzufügen einer Beschriftung des Fotos pop-up mit CSS3

Vorschau

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 von dem, was wir sind zu erkennen, markieren wir bekommen 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. Beitrag

An diesem Punkt fügen das Element, das die enthalten wird 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 die 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 Beschriftung umschließenden Elemente verknüpfen "img" und "figcaption" bei einem alleinerziehenden Elternteil: "figure".

4. Ein wenig "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 Bild oben auszulesenden, aber in der Unterseite des gleichen, und muss eine sfondo nicht deckend, aber durchscheinend, so dass Sie auch weiterhin die Abbildung unten sehen. Es muss auch zunächst verborgen, so dass sie nur auf der Maus auf das Bild erscheinen. 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:

  1. Legen Sie die Beschriftung
    Posizioniamo in absoluter Weise das Element figure.
  2. Impostare Breite, Schriftgröße und-farbe
    Eine Breite des 100% sorgt dafür, dass der Hintergrund der Beschriftung die gleiche Breite des übergeordneten Elements ist. Wir geben auch die Beschriftung Größe und Text farblich.
  3. Legen Sie den Hintergrund transparent und blenden Sie die Beschriftung
    Wir verwenden die Farbe Format rgba() einen schwarzen Hintergrund mit Deckkraft angeben 70%. Dann setzen wir die gesamte Opazität der Beschriftung auf Null, und blenden Sie die Beschriftung.
  4. Stellen Sie den Übergangseffekt
    Dies ist das Herz dieses Tutorials, die Wirkung "Übergang": transition: opacity .5s ease-in-out weist den Browser an die animieren opacity dieses 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 landen geben dem Ganzen ein wenig "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 mit der "Ü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. E 'genug, um die erforderlichen Elemente mit ein wenig zu schaffen' 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.

hat dir dieser Artikel gefallen?

Dann abonniere doch diesen Blog per RSS Feed!

Über

Ich halte diesen Blog als ein Hobby von 2009. Ich bin begeistert von Grafik, Technologie, Open Source Software. Unter meinen Artikel wird nicht schwierig sein, über die Musik finden, und einige persönliche Reflexionen, aber ich bevorzuge die direkte Linie des Blogs vor allem auf Technologie. Weitere Informationen Kontaktieren Sie mich.

Kommentare (1) Trackbacks (0)
  1. niedliches Bild! :)


Hinterlasse einen Kommentar

Noch keine Trackbacks.