Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS Grid Layout
Webdesign

Créez une galerie d'images utilisant CSS Grid (avec des Blur effets et Media Queries d'interaction)

by
Difficulty:IntermediateLength:MediumLanguages:

French (Français) translation by Pembelight (you can also view the original English article)

Dans cette leçon, nous allons prendre quelques links de thumbnail et les transformer en une grille CSS adaptative avec un effet flou lors de hover attribute. Nous utilisons également l'excellent CSS pour permettre aux utilisateurs de l'écran tactile de voir cet effet!

Voici ce que nous allons créer:

Quelques mots qui ne sont pas sur le sujet

Récemment, la développeur Rachel McCollin a écrit un article expliquant comment intégrer une galerie avec des links vers des thumbnails dans WordPress.

Les links servent de navigation pour les pages enfants de la page sur laquelle se trouve l'utilisateur (ou la page que vous avez spécifiée). En conséquence, le plugin fait voir quelque chose comme:

wordpress thumbnail links to child pages
Obtenez le plugin et les fichiers de theme du référentiel sur Github.

En utilisant le markup généré par le plugin Rachel, nous allons faire cela:

  • On va organiser les miniatures à l'aide de CSS Grid pour avoir une galerie adaptative.
  • On va créer un effet de hover à l'aide du filtre et de transition CSS.
  • On va utiliser CSS media query sophistiqué pour que les utilisateurs de gadgets dotés d’un écran tactile puissent voir chaque titre de thumbnail, bien qu’il n’ait pas d’effet de hover.

1. Changer le markup (un peu)

Examinons brièvement le code de Rachel. Après le nettoyage, le code semble plus soigné:

Nous avons un élément parent <div> contenant des éléments <h2> et plusieurs éléments <article>. Lorsque nous utilisons CSS Grid, nous définissons d’abord le grid container. Dans ce cas, nous pourrions utiliser le parent <div>, mais cela ferait un élément de grille du chaque élément d'enfant direct, y compris un <h2>, donc nous le devons modifier un peu.

Nous allons couvrir tous les éléments <article> par un autre élément <div> (vous pouvez utiliser n'importe quel élément que vous croyez le plus convenable) et nous lui attribuerons une classe de grid-container. Utilisez ce code sur CodePen comme base.

2. Grille CSS adaptative sur trois lignes

Avec quelques propriétés, nous transformons nos thumbnails en une grille:

Les propriétés les plus simples ici sont display: grid; (convertit tous les éléments enfants en éléments de grille et les pose) et grid-gap: 1em; (qui détermine la distance entre les colonnes).

Une petite difficulté est due à l'affectation de la propriété grid-template-columns qui définit nos colonnes. Habituellement, vous attendez à voir quelque chose comme repeat (3, 200px), ce qui nous donnera trois colonnes de 200px. Dans ce cas, nous avons utilisé le mot clé auto-fill pour repeat(), puis quelques valeurs. Nous avons tellement de colonnes avec une largeur minimum de 300 px et un maximum de 1fr, combien peuvent contenir un grid container.

Changez la dimension de la fenêtre de votre navigateur et voyez comment se comporte la grille!

Un autre détail que vous devez ajouter:

Cela garantira que les images remplissent complètement leurs containers (particulièrement nécessaire pour une utilisation avec la démonstration Rachel, car nous devons écraser les propriétés width et height inscrits par WordPress).

3. L'effet hover

Nous allons montrer les titres lors hover comme overlay pour les thumbnails. Nous allons également donner à l'image cachée un effet rouge et un léger flou pour améliorer la visibilité du texte superposé.

On ajoute un titre

Pour imposer un titre, nous devons le positionner, écrivons donc pour le tag <article> position: relative; mais pour le titre position: absolute. Nous allons également lui assigner un fond rouge et lui faire remplir tout l'espace disponible:

Bon début!

thumbs step 1

Voici quelques éléments à corriger, notamment l’espace supplémentaire ci-dessous (le titre est légèrement plus grand que thumbnail). Cela peut être résolu en supprimant line-height dans le container avec les images:

Stylisez le titre

Certaines styles typographiques peuvent améliorer l'apparence de notre titre et trois lignes de flexbox les posent au centre:

C'est plus mieux:

Cachez le titre

Cachons maintenant le titre pour que nous ne puissions voir l'opacité que lorsque vous passez le curseur de la souris sur le thumbnail. Il y a quelques autres propriétés à ajouter à .location-title:

Ici, nous prescrivons également transition, de sorte que l'opacité soit restaurée progressivement (avec un délai de 0,5 seconde), plutôt qu'immédiatement. Et maintenant nous allons assigner:

Magnifique! Maintenant, notre titre réapparaît avec un effet de survol:

title back on hover

Lignes avec blur effet

Nous avons déjà créé un effet de survol, mais nous allons faire un autre pas en avant, on commence? Ajoutons un filtre de flou à l'image. Nous allons régler blur filter sur l'image dans son état habituel, ce qui augmentera notre effet sur la transition. Ensuite, nous écrivons la dimension de blur de 2 pixels pendant hover effet (vous pouvez augmenter ce nombre autant de fois que vous le voulez, mais je pense que vous avez besoin de 2 pixels):

Voici ce que vous aurez:

Quelques choses à noter:

  1. Le titre disparaît car le navigateur fait voir maintenant l'image floue.
  2. L'effet de flou semble bon, mais les bords de l'image sont également flous (nous pouvons le réparer).

Afficher un titre masqué est si simple en ajoutant z-index: 1; à .location-title.

La fixation des bords flous sera un peu plus compliquée. Pour commencer, nous redimensionnons l'image pour la rendre un peu plus grande, puis installons overflow: hidden; dans le container d'images (.location-listing), de sorte que lorsque l'image est floue, les bords de l'image sont effectivement coupés. Voici les propriétés toutes faites pour les deux éléments considérés:

Transform: scale (1.1); met notre image dans toutes les directions à 1.1 (où 1.0 tiendra l'image à une dimension donnée). Voici un résultat intéressant:

no more blurred lines

4. Problème avec les écrans tactiles

Donc voila! Grille avec des images floues avec hover effet. La seule chose à faire est que les titres ne sont pas visibles pour ceux qui ne peuvent pas passer la souris sur l’image (un grand nombre de tablettes et de smartphones ne reflète pas l’effet de survol d’un long "clic"), ce qui n’est pas très accessible.

Heureusement, CSS a quelques media query interactives très utiles qui peuvent nous aider (et utilisent également un support de navigateur assez décent). Ces media query détermineront le mécanisme de traitement du navigateur - la fonctionnalité de pointage en flèche, la capacité de pointer et quelques autres définitions spéciales - afin que nous puissions savoir si nos miniatures sont entièrement visualisées sur un périphérique à écran tactile.

Prenez media query, par exemple (cela fait exactement ce à quoi nous aspirons):

Dans ces accolades, nous mettons tous les styles que nous voulons appliquer à un navigateur qui ne peut pas gérer :hover. Faisons ceci - nous dirons que pour les appareils où il est impossible ou du moins gênant de geler, l'image grisée sera toujours floue et le titre sera toujours visible:

Jetez un coup d'oeil:

Remarque: comme il était déjà mentionné, le support pour cette demande de média est important, mais les discussions concernant sa mise en œuvre sont toujours en cours. Il existe une forte probabilité que cette spécification change ou que certains détails soient supprimés.

Conclusion

C'est tout! Merci pour votre attention et j'espère que vous avez appris quelques astuces utiles pour rougir en CSS (qui ne l'aime pas?). Enfin, ceci est une démonstration - ajoutez ce code au modèle Rachel original que nous avons mentionné au début!

Plus d'articles sur ce sujet

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.