Cookie

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:

  1. Legen Sie die Beschriftung
    Lassen Sie uns Position in absoluter Weise das Element figure.
  2. 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.
  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 Trübung 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 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.

Zu wenig?


TheJoe

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.

1 Kommentar

Gutschein · 13 Januar 2011 um 11:10 AM

niedliches Bild! 🙂

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.