Ajouter une légende à la photo pop-up avec CSS3
Attention
Cet article a été publié il y a plus d'un an, il peut y avoir des développements été.
S'il vous plaît prendre en compte.
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 en préservant la facilité d'utilisation.
Pour avoir une idée de ce que nous devons réaliser que 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, nous ajoutons l'article qui contiendra 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” à contiennent 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 les éléments englobants de légende “img” et “figcaption” dans une famille monoparentale: “figure“.
4. Une poussière’ 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
Laissez 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 sur l'image à lire, mais dans le bas de la même, et doit avoir un sfondo pas opaque, mais translucide, vous pouvez continuer à voir l'image ci-dessous. Il doit également être initialement caché, afin qu'il puisse montrer qu'à l'étape 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:
- Placer la légende
Laissez la position d'une manière absolue l'élémentfigure. - Largeur Impostare, la taille et la couleur
Une largeur de l' 100% Il est garanti que l'arrière-plan du sous-titre a la même largeur de l'élément parent. Nous donnons également la taille des sous-titres et textes de couleur différente. - Réglez le translucide de fond et de cacher la légende
Nous utilisons le format de couleurrgba()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. - Définir l'effet de transition
C'est le cœur de ce tutoriel, l'effet “transition”:transition: opacity .5s ease-in-outindique au navigateur pour animer leopacityde 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 donner tout un peu’ 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 “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. Et’ suffisante pour créer les éléments requis à l'aide d'un bit’ 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.
1 Commentaire
bon · 13 Janvier 2011 à 11:10 UN M
mignon image! 🙂