6 légendes d'images cool avec CSS3
CSS3 est vraiment puissant. Auparavant, nous avions besoin d'images ou d'un ensemble de lignes de code JavaScript pour créer un simple effet de transition. De nos jours, nous pouvons faire la même chose avec seulement CSS3.
Dans ce tutoriel, nous allons vous montrer comment créer des légendes d’images avec diverses transitions en utilisant simplement CSS3..
- Démo
- Source de téléchargement
Prise en charge du navigateur
Cette légende dépendra beaucoup des propriétés de transformation et de transition, qui sont des fonctionnalités relativement nouvelles. Par conséquent, il serait sage de prendre note de la prise en charge du navigateur nécessaire pour exécuter la légende en douceur..
Les navigateurs suivants prennent déjà en charge la transformation et la transition:
- Internet Explorer 10+ (pas encore publié)
- Firefox 6+
- Chrome 13+
- Safari 3.2+
- Opera 11+
Maintenant, commençons le tutoriel.
Structure HTML
Nous avons 6 images; chaque image avec un style de légende différent.
Simple Légende
Légende Complète
Lorem ipsum dolor sit amet, consectetuer elit adipiscing, sed diam nonummy euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Fade Caption
Lorem ipsum dolor sit amet, consectetuer elit adipiscing, sed diam nonummy euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Slide Légende
Lorem ipsum dolor sit amet, consectetuer elit adipiscing, sed diam nonummy euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ceci est une légende de rotation
Lorem ipsum dolor sit amet, consectetuer elit adipiscing, sed diam nonummy euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Légende de style libre
Lorem ipsum dolor sit amet, consectetuer elit adipiscing, sed diam nonummy euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
CSS de base
Avant de styliser un élément, il est toujours bon de réinitialiser toutes les propriétés à l'aide de cette réinitialisation CSS et de leur attribuer leurs valeurs de style par défaut, afin que tous les navigateurs affichent le même résultat (sauf peut-être IE6)..
Les styles seront séparés dans le fichier style.css, ainsi notre fichier HTML sera soigné. Cependant, n'oubliez pas d'ajouter un style de lien dans la balise head pour appliquer les règles de style dans le fichier..
OK, commençons à styler l'élément en partant de la balise html et de l'id du wrapper principal:
html background-color: #eaeaea; #mainwrapper font: 10pt normal Arial, sans-serif; hauteur: auto; marge: 80px auto 0 auto; text-align: center; largeur: 660px;
Style de boîte d'image
Nous appliquons certains styles courants dans les zones contenant les images. Les cases seront affichées côte à côte en utilisant float left. Notez que nous avons également ajouté overflow: hidden property; cela fera que tous les objets à l'intérieur qui passent à travers la div soient cachés.
Nous déclarons également la propriété de transition sur chaque image dans la boîte, au cas où nous aurions besoin de la transition d’image plus tard..
#mainwrapper .box border: 5px solid #fff; curseur: pointeur; hauteur: 182px; float: gauche; marge: 5px; position: relative; débordement caché; largeur: 200px; -webkit-box-shadow: 1px 1px 1px 1px #ccc; -moz-box-shadow: 1px 1px 1px 1px #ccc; box-shadow: 1px 1px 1px 1px #ccc; #mainwrapper .box img position: absolute; gauche: 0; -webkit-transition: toutes les 300 ms d'allégement; -moz-transition: toutes les 300 ms d'allégement; -o-transition: toutes les 300 ms d'allégement; -ms-transition: toutes les 300 ms d'allégement; transition: tous les 300 ms de détente;
Légende Style Commun
La légende aura des styles communs et une propriété de transition. Plutôt que d'utiliser la propriété d'opacité, nous utilisons le mode de couleur RGBA avec 0.8 pour le canal alpha afin de rendre la légende un peu transparente sans affecter le texte à l'intérieur..
#mainwrapper .box .caption background-color: rgba (0,0,0,0,8); position: absolue; couleur: #fff; z-index: 100; -webkit-transition: toutes les 300 ms d'allégement; -moz-transition: toutes les 300 ms d'allégement; -o-transition: toutes les 300 ms d'allégement; -ms-transition: toutes les 300 ms d'allégement; transition: tous les 300 ms de détente; gauche: 0;
Légende 1
La première légende aura un effet de transition simple qui est couramment utilisé pour une légende. La légende apparaîtra du bas lorsque nous survolons l'image. Pour y remédier, la légende aura une hauteur fixe de 30px et nous appliquerons sa position la plus basse -30px pour la masquer sous l’image..
#mainwrapper .box .simple-caption height: 30px; largeur: 200px; bloc de visualisation; en bas: -30px; hauteur de ligne: 25 pt; text-align: center;
Légende 2
Le second type a toute la largeur et la hauteur de la dimension image / zone (200x200px) et la transition ressemblerait à un effet de porte coulissante uniquement si elle glissait de haut en bas..
#mainwrapper .box .full-caption width: 170px; hauteur: 170px; en haut: -200px; text-align: left; rembourrage: 15px;
Légende 3
La troisième légende aura un effet de fondu. Nous avons donc ajouté l'opacité: 0 pour son état initial.
#mainwrapper .box .fade-caption, #mainwrapper .box .scale-caption opacity: 0; largeur: 170px; hauteur: 170px; text-align: left; rembourrage: 15px;
Légende 4
La quatrième légende glissant de gauche à droite, nous avons donc fixé 200 pixels à gauche (à gauche: 200 pixels) comme position initiale..
** Légende 4: Diapositive ** / #mainwrapper .box .slide-caption width: 170px; hauteur: 170px; text-align: left; rembourrage: 15px; à gauche: 200px;
Légende 5
La cinquième légende aura un effet de rotation. Ce n'est pas seulement la légende qui va pivoter, mais aussi l'image. Cela ressemble plus au changement de position par rotation.
Nous ajoutons donc une propriété de transformation avec une rotation de -180 degrés, sauf si vous préférez faire pivoter votre moniteur pour lire la légende..
#mainwrapper # box-5.box .rotate-caption width: 170px; hauteur: 170px; text-align: left; rembourrage: 15px; en haut: 200px; -moz-transform: rotation (-180deg); -o-transformer: rotation (-180deg); -webkit-transform: rotation (-180deg); transformer: faire pivoter (-180deg); #mainwrapper .box .rotate width: 200px; hauteur: 400px; -webkit-transition: toutes les 300 ms d'allégement; -moz-transition: toutes les 300 ms d'allégement; -o-transition: toutes les 300 ms d'allégement; -ms-transition: toutes les 300 ms d'allégement; transition: tous les 300 ms de détente;
Légende 6
La dernière légende aura une transformation d'échelle. Cependant, dans les légendes précédentes, le texte qu'il contient apparaîtra avec le décalage de transition .caption. Dans cette section, nous allons le rendre un peu différent.
Le texte apparaîtra après la transition. Donc, nous ajoutons transition-delay sur le texte, dans ce cas les balises h3 et p.
#mainwrapper .box .scale-caption h3, #mainwrapper .box .scale-caption p position: relative; à gauche: -200px; largeur: 170px; -webkit-transition: toutes les 300 ms d'allégement; -moz-transition: toutes les 300 ms d'allégement; -o-transition: toutes les 300 ms d'allégement; -ms-transition: toutes les 300 ms d'allégement; transition: tous les 300 ms de détente; #mainwrapper .box .scale-caption h3 -webkit-transition-delay: 300ms; -moz-transition-delay: 300ms; -o-transition-delay: 300ms; -ms-transition-delay: 300 ms; temps de transition: 300 ms; #mainwrapper .box .scale-caption p -webkit-transition-delay: 500ms; -moz-transition-delay: 500ms; -o-transition-delay: 500ms; -ms-transition-delay: 500 ms; temps de transition: 500 ms;
Faisons-les bouger
Dans la section suivante, nous définirons le comportement de la légende lorsque nous survolons les images ou les zones..
Légende Comportement 1: Afficher.
Pour la première légende, nous souhaitons qu’elle apparaisse (en partant du bas) lorsque nous survolons la boîte. Pour résoudre ce problème, nous utilisons la propriété transform et le code CSS ci-dessous indique à la légende de déplacer 100% de son poids vers le haut..
#mainwrapper .box: survolez .simple-caption -moz-transform: translateY (-100%); -o-transformer: translation (100%); -webkit-transform: translateY (-100%); transformer: traductionY (-100%);
Si vous n'obtenez pas le point d'avoir une valeur négative pour la traduction, vous voudrez peut-être lire ce tutoriel d'abord pour en savoir plus..
Comportement de la légende 2: déplacez-le vers le bas.
Inversement, la deuxième légende descendra du haut. Donc, nous aurons une valeur positive pour la traduction.
#mainwrapper .box: survolez. légende complète -moz-transform: translateY (100%); -o-transformer: translation (100%); -webkit-transform: translateY (100%); transformer: traduireY (100%);
Légende Comportement 3: Fondu.
La troisième légende est en réalité la plus facile. Lorsque la boîte est en survol, l'opacité de la légende passe à 1, ce qui la rend visible. Depuis que nous avons ajouté une propriété de transition à la classe Légende, la transition devrait se dérouler sans heurts..
#mainwrapper .box: survolez .fade-caption opacity: 1;
Légende Comportement 4: Faites-le glisser vers la gauche.
Comme nous l'avons mentionné précédemment, cette légende glisse à gauche, mais l'image glisse également à droite. Donc, ici nous avons 2 déclarations CSS.
Le code CSS ci-dessous indique que, lorsque nous la survolons, la légende glisse de 100% de sa largeur vers la gauche. Notez que nous utilisons maintenant translateX, car nous souhaitons que la diapositive se déplace horizontalement de droite à gauche..
#mainwrapper .box: survolez .slide-caption background-color: rgba (0,0,0,1)! important; -moz-transform: translateX (-100%); -o-transformer: translateX (-100%); -webkit-transform: translateX (-100%); opacité: 1; transformer: translateX (-100%);
Lorsque nous survolons la case, l'image glisse vers la gauche..
#mainwrapper .box: survoler img # image-4 -moz-transform: translateX (-100%); -o-transformer: translateX (-100%); -webkit-transform: translateX (-100%); transformer: translateX (-100%);
Légende Comportement 5: Faites-la pivoter.
Cette légende est différente du reste, car elle ne bougera pas de droite ou de gauche, mais tournera. Lorsque la boîte est en vol stationnaire, le div contenant l'image et la légende tournera à -180 dans le sens anti-horaire, masquant l'image et affichant la légende..
/ ** Faire pivoter la légende: hover Behavior ** / #mainwrapper .box: hover .rotate background-color: rgba (0,0,0,1)! Important; -moz-transform: rotation (-180deg); -o-transformer: rotation (-180deg); -webkit-transform: rotation (-180deg); transformer: faire pivoter (-180deg);
Comportement de la légende 6: Faites-le passer à l'échelle.
Cette légende combinera plusieurs effets de transformation. Lorsque la case est en survol, l'image sera redimensionnée de 140% (1,4) par rapport à sa dimension initiale..
#mainwrapper .box: survolez # image-6 -moz-transform: scale (1.4); -o-transformer: échelle (1,4); -webkit-transform: scale (1.4); transformer: échelle (1,4);
Et si vous avez vu le CSS ci-dessus sous Légende 6 rubrique, nous avons caché le texte à gauche de 200px. Ce code CSS ci-dessous indique au texte de se déplacer à sa position initiale. Ainsi, le texte glissera de gauche à droite simultanément.
#mainwrapper .box: survolez .scale-caption h3, #mainwrapper .box: survolez .scale-caption p -moz-transform: translateX (200px); -o-transformer: translateX (200px); -webkit-transform: translateX (200px); transformer: translateX (200px);
- Démo
- Source de téléchargement
Résumé
Bien que ces fonctionnalités CSS soient intéressantes, mais elles ne sont pas encore largement applicables, en raison des limitations de la prise en charge du navigateur mentionnées précédemment. Cependant, continuez à expérimenter avec ces nouvelles fonctionnalités, car c’est ainsi que nous façonnerons une page Web à l’avenir..
Crédits
Les images miniatures dans le didacticiel proviennent des sites Web suivants (capture d'écran):
- Un livre à part
- Archiduchesse
- Vlog
- Hongkiat
- La ferme d'accueil
- Mark Ecko
