TheJoe.it Dans le (ouvrir) Source

12Jan/111

Ajouter une légende à la photo pop-up avec CSS3

Aperçu

Dans le tutoriel d'aujourd'hui, nous voyons comment fixer les images de notre site afin qu'il semble planer une légende au bas de la photo avec effet de fondu / fade-out.

Cette technique permet l'utilisation de certaines fonctionnalités mises en œuvre dans le CSS3, la dernière version. Malheureusement, tous les navigateurs sont toujours conformes à cette spécification, savoir que selon le navigateur peut ne pas fonctionner. Les nouveaux navigateurs qui CSS3 de soutien sont Firefox 4, Safari 5, Safari Mobile et Opera 10. Explorer purtroppo ne supportent pas (apparemment même pas la prochaine version: IE9), mais cependant, nous allons essayer de ne pas oublier les utilisateurs d'IE.

Une des nouvelles fonctionnalités mises en œuvre dans la troisième version de CSS qui commence à attirer mon attention sont l' transitions. Le CSS transitions permettono di "animer" certains éléments, sans écrire une seule ligne de code JavaScript. Il peut arriver que votre navigateur ne supporte pas les transitions, le résultat sera atteint également sans animations, mais instantanément passer d'un état à l'autre préservant la convivialité.

Pour avoir une idée de ce que nous voulons réaliser, nous marquons la page de démonstration.

Je déclare immédiatement que, dans ce tutoriel, nous allons utiliser une partie de l' nouvelles balises HTML5 venir "figure" et "figcaption". Si nous sommes tous prêts.

1. I mark-up basilari

Commençons par le code de base:

<!DOCTYPE html>
<html lang ="cela">
  <tête>
    <titre>Les légendes sur des images avec CSS3 | Démo | TheJoe.it</titre>
    <lorsque http-equiv ="Content-Type" contenu ="text / html;charset = utf-8" />
  </tête>
  <corps>

  </corps>
</html>

Cette partie est connue de tous. Nous créons "head" et "body", déclarer la langue utilisé et l' encodage caractères.

2. Article

A ce stade, ajouter l'article qui contiendra le images.

<article>

  <h1>Lorem ipsum</h1>
  <h2>C'est ennuyeux.</h2>
  <h3>Nullam de Convallis</h3>
  <h4>Avant-propos</h4>

  <p>Il est important, déposer un commentaire. Imperdiet Pellentesque, augue vitae hendrerit rhoncus, eros tellus consectetur urna, L'examen du permis de lac est la plate-forme d'information. Mauris ac Arcu dans condimentum feugiat élite à la masse ac. Pas besoin de la pêche industrielle. Cras adipiscing porttitor libre ut imperdiet. Suspendisse ultrices Août Convey vulputate ac orcs. Il travaille maintenant dans la crainte de bonnes volontés pour ne pas être publié par une variété de ralentissement économique. Proin non ipsum vous demandez, sed odio tincidunt. La CW est génial, volutpat voile élite curriculum condimentum. Chacun des clients de la haine Remporter une ligue de football. Dans les Nouvelles. Classe, lacus tincidunt ultricies sagittis, ultrices leo sapien eros, eget posuere nisl nibh ac nisi. In molestie luctus dui, lacinias vitae risus dans ultrices. Mais en tant que consommateur, je ne bois pas de Nouvelles empoisonné. Rien facilisi. Mécène mollis, Sodales de la peau Sapient euismod, tellus leo adipiscing nisi, Craintes régionales de l'UE sur la vie. </p>

  <footer>Tiré de <a href ="http://www.lipsum.com/">Lorem Ipsum générateur</une>.</footer>

</article>

J'ai utilisé une paire de HTML5 tag dans cette partie du Code: "article" à contenir l'article, et "footer" pour Texte en bas de page. Cela ajoute une structure précise à notre article, et en fait sémantiquement plus compréhensible, également pour les graphiques.

3. Ajouter des photos

Maintenant, nous pouvons ajouter nos images. L'insert entre le titre et le texte.

  <style = chiffre"largeur: 500px; hauteur: 375px; flotter: à gauche; margin-right: 20px;">
    <img src ="img / cielo.jpg" alt ="Le ciel" />
    <figcaption>
      <h3>Le ciel.</h3>
      <p>Une vue vers le haut à partir du sol.</p>
    </figcaption>
  </comprendre>

Pour les images, nous avons utilisé deux autres éléments HTML5: "figure" et "figcaption". Cela nous permet d'associer une image avec des éléments entourant de légende "img" et "figcaption" dans une famille monoparentale: "figure".

4. Un peu de «style

Maintenant, nous sommes prêts à ajouter un peu de CSS.

/* Marges et Couleurs */
      corps {
        marge: 30px;
        font-family: "Géorgie", serif;
        line-height: 1.8à;
        couleur: #333;
      }
/* dimensions de l'article */
      article {
        largeur: 800px;
        rembourrage: 50px;
        marge: 0 auto;
        afficher: bloquer;
        font-size: 1.2à;
      }
      article h2 {
        line-height: 1.5à;
      }
/* Style pour le pied de page */
      footer {
        font-style: italique;
        font-size: .9à;
      }

5. Le style des images

Soit l'élément de style "figure", qui contient déjà "figcaption" et "img".

/* Style pour les images */
      comprendre {
        poste: par rapport;
        afficher: bloquer;
        frontière: 1px solide #333;
        marge: 5px 0 10px 0;
      }

6. Style de légende

Voici le fun. La légende doit être image ci-dessus à lire, mais dans le bas de la même, et doit avoir un sfondo pas opaque, mais translucide afin que vous puissiez continuer à voir l'image ci-dessous. Il doit également être initialement caché, de sorte qu'il ne peut apparaître que sur la souris sur l'image. Voici comment faire:

/* Le style des sous-titres, les cacher par défaut */
      figcaption {
        poste: absolue;
        à gauche: 0;
        inférieur: 0;
        largeur: 100%;
        font-size: .7à;
        couleur: #fff;
        background-color: rgba(0,0,0,.7);
        opacité: 0;
        -webkit-transition: opacité .5 s facilité d'in-out;
        -moz-transition: opacité .5 s facilité d'in-out;
        -ou-transition: opacité .5 s facilité d'in-out;
        transition: opacité .5 s facilité d'in-out;
      }

Regardons de plus près le CSS:

  1. Placer la légende
    Posizioniamo d'une manière absolue l'élément figure.
  2. Largeur Impostare, la taille et la couleur
    Une largeur de l' 100% en sorte que le fond de la légende est identique à la largeur de l'élément parent. Nous donnons également la taille des sous-titres et textes de couleur différente.
  3. Réglez le translucide de fond et de cacher la légende
    Nous utilisons le format de couleur rgba() pour spécifier un fond noir avec une opacité 70%. Ensuite, nous avons mis l'opacité globale de la légende à zéro, et cacher la légende.
  4. Définir l'effet de transition
    C'est le cœur de ce tutoriel, l'effet "transition": transition: opacity .5s ease-in-out indique au navigateur pour animer le opacity de cet élément dans une seconde moitié.

Maintenant, nous avons mis l' "transition", pour le faire apparaître, il faut ajouter l' pseudo classe ":hover" élément "figure".

/* Affiche légende passage de la souris */
      comprendre:hover figcaption {
        opacité: 1;
      }

Nous finissons par abandonner le tout un peu de style à contenu la légende.

/* Ajouter rembourrage et la marge de la légende */
      figcaption * {
        rembourrage: 0 10px;
        marge: 0;
      }
      figcaption *:premier enfant {
        padding-top: 5px;
      }
      figcaption *:last-child {
        padding-bottom: 5px;
      }
/* Impostiamo police i coutume degli-têtes d'e légende */
      figcaption, h1, h2, h3, h4 {
        font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
      }

7. Soutien pour Internet Explorer

Nous avons presque terminé. Quoi qu'il en soit, comme déjà mentionné, IE ne supporte pas les "transitions". Et si vous ne mangez pas bastasse, IE8 et plus tôt ne supportent pas encore "opacity" ou le format de couleur "rgba()".

Bien qu'il n'y ait pas grand chose à voir avec le "transitions" (si elles ne reposent pas sur JavaScript), nous pouvons toujours utiliser quelques instructions CSS spécifique pour IE, qu'au moins les sous-titres apparaîtront sur mouseover.

figcaption {
  filtrer: alpha(opacité = 0);
}

comprendre:hover figcaption {
  filtrer: progid:DXImageTransform.Microsoft.gradient(startColorstr = # aa000000, aa000000 endColorstr = #);
}

Nous n'en avons pas fini avec IE. IE8 et plus tôt ne reconnaissent pas le HTML5 éléments venir "article", "figure" et "figcaption". Cela peut ne pas être un problème, ce n'était pas si IE ne permet pas d'appliquer des styles à des éléments inconnus de lui.

Heureusement, la solution est simple. E 'assez pour créer les éléments nécessaires en utilisant un peu de JavaScript, le procédé "document.createElement()". Mettons ce code entre les Des commentaires conditionnels de sorte que seul IE8 et plus tôt sera capable de voir.

<!--
  Ajout du support de HTML5 éléments IE <= 8
-->

<!--[if lt IE 9]>
<Type de script ="text / javascript">
document.createElement(«Article»);
document.createElement(«Figure»);
document.createElement(«Figcaption ');
</Script>
<![endif]-->

Maintenant, les légendes travaillent également dans IE8 et inférieur, pas l'impact fade-in et fade-out, mais au moins on peut le lire.

Content de cet article?

Inscrivez vous à notre fil rss!

Sur

Je garde ce blog comme un hobby par 2009. Je suis passionné de graphisme, la technologie, logiciel Open Source. Parmi mes articles ne sera pas difficile de trouver de la musique, et quelques réflexions personnelles, mais je préfère la ligne directe du blog principalement à la technologie. Pour plus d'informations me contacter.

Commentaires (1) Trackbacks (0)
  1. mignon image! :)


Laisser un commentaire

Aucun trackbacks pour l'instant