Share
Avez-vous déjà vu ces vignettes qui, lorsqu'elles sont survolées, révèlent une icône au centre suggérant ce qui va se passer? Vous êtes-vous déjà demandé comment l'effet est obtenu? Vous avez déjà essayé, mais vous n’avez pas réussi à obtenir le point mort, en particulier lorsque vos vignettes n’étaient pas de dimensions fixes? Alors ce petit conseil est pour vous…
Je parle de vignettes sur lesquelles vous pouvez cliquer pour déclencher une lightbox, ou peut-être d'une vignette qui renvoie à un élément du portefeuille. Dans tous les cas, il s'agit d'un excellent ajout à la convivialité de votre site si vous pouvez suggérer ce qui va se passer lorsque quelqu'un survole une vignette..
Ce petit conseil s'adresse à ceux d'entre vous qui ont une compréhension de CSS, qui ont plus ou moins compris ce qu'est le positionnement, et qui recherchent l'excuse idéale pour le mettre à profit…
Jetons rapidement quelques documents ensemble pour démontrer ce dont je parle. Tout d'abord, notre html:
Survolez la démo
Ensuite, nous commencerons notre fichier styles.css avec quelques règles de réinitialisation. Vous avez peut-être vos propres méthodes de réinitialisation préférées, mais pour le moment, j'ai utilisé Eric Meyer pour lancer notre fichier CSS:
/ * http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 Licence: none (domaine public) * / html, corps, div, span, applet, objet, iframe, h1, h2, h4, h4, h5, h6, p, bloc, citation, pre, a, abbr, acronyme, adresse, grand, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, petit, grève, fort, sous, sup, tt, var, b, u, i, centre, dl, dt, dd, ol, ul, li, fieldset, formulaire, étiquette, légende, tableau, légende, tbody, tfoot, pied, thead, tr, th, td, article, à part, toile, détails, intégrer, figure, figcaption, pied de page, en-tête, hgroup, menu, navigation, sortie, ruby, section, résumé, heure, marque, audio, vidéo margin: 0; rembourrage: 0; bordure: 0; taille de police: 100%; font: hériter; alignement vertical: ligne de base; / * Réinitialisation du rôle d'affichage HTML5 pour les anciens navigateurs * / article, à part, détails, figcaption, figure, pied de page, en-tête, hgroup, menu, navigation, section display: block; body line-height: 1; ol, ul list-style: none; blockquote, q quotes: none; blockquote: before, blockquote: after, q: before, q: after content: "; content: none; table border-collapse: collapse; border-spacing: 0;
Ensuite, pour donner à notre page un peu de structure de mise en page, voici trois colonnes, dans un conteneur:
Et maintenant, bien sûr, nous devons ajouter quelques styles pour qu’ils se comportent réellement comme des colonnes dans un wrapper flexible:
/ * nos styles de démonstration * / html, body background: # 29282e; .wrapper width: 90%; largeur maximale: 960px; marge: auto 30px; .col width: 27%; rembourrage: 0 3%; float: gauche;
Donc là nous les avons; trois colonnes, chacune 27% de large, avec un rembourrage à gauche et à droite de 3%, et toutes flottant parfaitement dans une rangée. Notre wrapper est bien flexible à 90% de la largeur de la fenêtre du navigateur (jusqu'à un maximum de 960 pixels). Nous avons également donné à notre corps et à notre code HTML une belle couleur de fond sombre.
Il est temps d'ajouter quelques images au mélange. J'ai utilisé des fonds d'écran de la collection de villes plutôt inspirantes de l'Atelier Olschinsky (récupérez-les sur kuvva.com pour votre bureau…)
Chaque image sera contenue dans un élément de la figure HTML5, mais entourée directement par une ancre afin de la lier à quelque chose (une version agrandie de la lightbox, ou un site externe, etc.):
Nous allons donc placer trois de nos figures, une pour chaque vignette, dans une colonne de sa propre.
Ces images étant trop grandes, pour les empêcher de sortir de leurs colonnes, donnons-leur une largeur maximale en appliquant une règle d'image fluide classique:
figure img max-width: 100%;
Un bon début. Nous avons notre disposition fluide avec trois colonnes, chacune contenant une image qui relie quelque part.
Expliquons clairement aux utilisateurs que cliquer sur les images fait quelque chose. Nous allons ajouter un état de survol, réduisant l'opacité de la vignette:
figure a: hover img opacité: 0,4; filtre: alpha (opacité = 40); / * IE6-IE8 * /
Maintenant pour l'icône tout important. Nous voulons qu'une icône, placée au centre de la vignette, devienne visible lorsque l'image est survolée. Ce peut être le symbole de votre choix, mais il devrait indiquer à l'utilisateur ce qui va se passer. Dans cette démonstration, par souci de facilité, je vais simplement utiliser un + signe pour suggérer qu'une version plus grande sera activée.
Nous l'ajouterons au mixage en utilisant le pseudo élément :avant:
a.enlarge: before content: "+"; bloc de visualisation; taille de la police: 40px; hauteur de ligne: 1em; hauteur: 1em; largeur: 1em; text-align: center; couleur: #fff; poids de police: gras; position: absolue; z-index: 100;
Nous avons placé notre + comme élément généré: before, une partie de l'ancre entourant l'image. Nous utilisons la classe "agrandir" pour identifier les ancres qui auront besoin de la +. Si nous avons besoin d'un autre symbole, nous pouvons utiliser un autre nom de classe.
Pour commencer, nous devons dicter le contenu (notre + caractère) et indiquez qu’il s’agit d’un élément de niveau bloc.
Important! Les règles suivantes déterminent ensuite les dimensions. Nous avons dit que la taille de la police est de 40 pixels. Ensuite, nous avons dit que la hauteur de ligne, la hauteur et la largeur sont toutes égales à 1em (donc 40px). Cela a créé un carré de 40x40px. En définissant l’alignement du texte sur le centre et la hauteur de la ligne sur 1em, nous garantie que le personnage est assis en plein dans le centre vertical et horizontal de notre carré.
Les prochaines règles importantes sont le positionnement absolu (0px, 0px par défaut) et le z-index qui détermine l'ordre d'empilement de nos éléments positionnés. En fixant cette valeur à 100, nous pouvons nous assurer que nos autres éléments s’y superposent. Faisons cela maintenant…
figure img max-width: 100%; position: relative; z-index: 900; figure une position: relative; bloc de visualisation; hauteur de ligne: 0px; texte-décoration: aucun;
Ici, nous nous sommes assurés que les balises img sont placées au-dessus du + Pour que cela prenne effet, nous devons indiquer un type de positionnement ("relatif" dans ce cas). Notre ancre a aussi position: relative ce qui signifie que + l'icône est maintenant absolument positionnée contre elle.
Vous remarquerez également quelques autres styles ajoutés à l'ancre. Nous l'avons fait afficher sous forme de bloc, supprimé toutes les décorations soulignées et lui avons attribué une hauteur de trait de 0px. La hauteur de ligne est importante et, si ce n’est pas le cas, reset peut se traduire par un remplissage supplémentaire au bas de l’élément. Nous nous sommes maintenant assurés que l'ancrage s'ajuste parfaitement autour de l'image..
Nos icônes sont effectivement toujours présentes, mais elles ne deviennent visibles que lorsque l’image qui les recouvre est survolée..
Pour le moment, nos icônes sont positionnées par défaut en haut à gauche de nos ancres. Nous en avons besoin au centre des vignettes, quelle que soit leur taille. Positionnons-les ensuite à 50% de la gauche et 50% du haut. Travail fait, droit?
a.enlarge: before content: "+"; bloc de visualisation; taille de la police: 40px; hauteur de ligne: 1em; hauteur: 1em; largeur: 1em; text-align: center; couleur: #fff; poids de police: gras; position: absolue; en haut: 50%; à gauche: 50%; z-index: 100;
Hmm. Pas vraiment. L'icône est loin du centre de la vignette… C'est parce que les éléments sont alignés par rapport à leur coin supérieur gauche. Regarde encore:
Pour compenser le positionnement, nous devons le décaler de la moitié de sa hauteur et de la moitié de sa largeur. Nous avions déjà utilisé ems pour déterminer les dimensions (1em = 40px). Nous allons donc utiliser 0.5em (la moitié de la largeur du carré) pour effectuer le déplacement. Ainsi, quelle que soit la taille de la police utilisée, toutes les mesures resteront proportionnelles. Merci à Gabri pour avoir signalé l'utilisation de ems!
a.enlarge: before content: "+"; bloc de visualisation; taille de la police: 40px; hauteur de ligne: 1em; hauteur: 1em; largeur: 1em; text-align: center; couleur: #fff; poids de police: gras; position: absolue; en haut: 50%; à gauche: 50%; z-index: 100; marge: -0,5em 0 0 -0,5em;
Pour ce faire, nous appliquons une marge négative. -0.5em en haut et à gauche fera le travail. Pensez-y comme ayant créé un vide dans lequel notre élément est aspiré.
Bingo! Notre + L'icône est parfaitement positionné au centre de notre vignette. Essayez de redimensionner le navigateur, il restera exactement au centre mort.
Il y a beaucoup de potentiel pour une technique comme celle-ci:
Pour les CSS expérimentés, il s'agit d'une astuce très simple, mais si vous n'avez jamais envisagé de vous positionner de la sorte, j'espère que cette astuce vous aura été utile..
Accentsconagua
