hideout-lastation.com
Paradis Pour Les Concepteurs Et Les Développeurs


Comment créer un effet de zoom sur une image CSS pure

CSS n'a pas de pseudo-classe pour cibler les événements de clic, et cela constitue l'un des plus grands points de douleur des développeurs frontaux. La pseudo-classe la plus proche est :active qui code un élément pour la période de temps pendant laquelle un utilisateur appuie dessus.

Cet effet est cependant de courte durée: une fois que l'utilisateur relâche la souris, : :active ne fonctionne plus. Nous devons trouver un autre moyen d' émuler l'événement click en CSS .

Ce message a été écrit en réponse à une demande d'un lecteur, et il va expliquer comment cibler l'événement click avec du CSS pur dans un cas d'utilisation spécifique, le zoom d'image .

Vous pouvez voir le résultat final ci-dessous - une solution CSS uniquement pour le zoom d'image sur le clic .

Quand utiliser la solution CSS uniquement

Avant de continuer, je tiens à dire que pour le zoom d'image, je recommande la méthode CSS uniquement (qui change les dimensions de l'image), seulement quand vous voulez qu'un seul ou un groupe de quelques images aient la fonction de zoom.

Pour une galerie appropriée, JavaScript offre plus de flexibilité et d'efficacité.

Techniques frontales que nous utiliserons

Maintenant que vous avez été averti, examinons rapidement les trois techniques clés que nous allons utiliser:

  1. le Balise HTML permettant aux navigateurs de créer des zones pouvant être liées sur une image . En savoir plus sur le élément dans mon post précédent.
  2. L' attribut usemap du tag, qui relie l'image à la carte d'image.
  3. La pseudo-classe CSS :target qui représente un élément ciblé à l'aide de son sélecteur d'ID.
1. Créez la base HTML

D'abord, créons la base HTML. Dans le code ci-dessous, nous ajoutons une image à zoomer et agrandir et fermons les icônes des boutons pour zoomer et dézoomer.

Il est important d'avoir un identifiant sur l'image à zoomer, et le bouton Fermer doit être un lien qui a l' href="#", je vais vous expliquer pourquoi plus tard dans la publication.

2. Ajouter le CSS

Initialement, l'icône Fermer ne devrait pas être affichée . Les margin- position, de margin-, de left et de bottom placent les icônes Développer et Fermer à l' endroit souhaité - dans le coin supérieur droit de l'image.

Les pointer-events: none; La règle permet aux événements de souris de passer à travers l'icône Développer et d' atteindre l'image .

 .img {hauteur: 150px; largeur: 200px; } .close {background-image: url ("Close-icon.png"); background-repeat: pas de répétition; en bas: 418px; affichage: aucun; hauteur: 32px; à gauche: 462px; marge supérieure: -32px; position: relative; largeur: 32px; } .expand {bas: 125px; marge gauche: -32px; marge-droite: 16px; pointer-events: aucun; position: relative; } 
3. Ajouter la carte d'image

Sur la carte de l'image, la zone cliquable doit être dans le coin supérieur droit de l'image, juste en dessous de l'icône Développer, et à propos de sa taille. Placer le élément avant le premier tag dans le HTML. Nous lierons l'image à la carte à l'étape suivante.

Dans le bloc de code ci-dessus, le La balise définit la forme, la taille et l'URI d'une zone lisible à l' intérieur d'une image cliquable. Pour une forme rectangulaire, l'attribut shape prend la valeur rect, et les quatre valeurs de l'attribut coords représentent la distance en pixels entre:

  1. le bord gauche de l'image et le bord gauche de la zone de lien
  2. le bord supérieur de l'image et le bord supérieur de la zone de liaison
  3. le bord gauche de l'image et le bord droit de la zone de lien
  4. le bord supérieur de l'image et le bord inférieur de la zone de liaison

La valeur de l'attribut href doit être l' identifiant de hachage de l'image (c'est pourquoi l'image doit avoir un id ).

4. Liez l'image à la carte d'image

Ajoutez l'attribut usemap à l'image afin de le lier à l'image cliquable . Sa valeur doit être la représentation de hachage de l'attribut name du tag nous avons ajouté à l'étape 3.

 Comment fonctionne le bouton Fermer 

Lorsque le bouton Fermer a été ajouté en tant qu'image d'arrière-plan (étape 2) et qu'il s'agit en fait d'une balise avec l' href=# (étape 1), il est supprimé lorsque l'utilisateur clique sur l'identificateur de fragment à la fin de l'URI. Par conséquent, il supprime également la pseudo-classe :target de l'image, et l'image revient à sa taille précédente .

Maintenant, l'effet zoom-sur-clic CSS-only est fait, consultez la démo ci-dessous, ou lisez un peu plus sur la théorie derrière les images dans la section suivante.

Informations générales: pourquoi et pas?

À présent, vous comprenez certainement que la chose la plus importante pour que cette solution CSS fonctionne est de cibler l'image en utilisant l' href="#imgid", ce qui pourrait également être fait en utilisant la balise au lieu de l'image.

Cela peut être vrai, cependant quand il s'agit d'images, en utilisant le l'élément est plus approprié. Il est encore plus important que lorsque vous voulez que le zoom apparaisse en cliquant sur une plus grande zone de l'image plutôt que simplement sur l'icône Développer, vous donne une solution facile.

La valeur default de l'attribut shape crée une zone de lien rectangulaire qui couvre toute l'image . Si vous deviez l'utiliser à la place, vous devrez le coder pour couvrir l'image, et vous devrez peut-être aussi utiliser un élément wrapper dans le même but.

Pour parler également des mises en garde de cette solution, la propriété CSS pointer-events (utilisée à l'étape 2) est supportée par Internet Explorer uniquement à partir de la version 11 .

Pour prendre en charge les navigateurs IE avant cela, vous pouvez soit utiliser au lieu de ou faites zoomer l'image en cliquant n'importe où dessus (dans ce cas, l'icône Développer ne sera plus nécessaire).

Éléments d'infographie par vecteur ouvert Stock

Éléments d'infographie par vecteur ouvert Stock

Si vous avez trouvé beaucoup d'infographies en ligne, vous avez peut-être songé à libérer les vôtres. Il y a beaucoup d'outils pour vous aider à le faire assez facilement, mais votre design sera loin d'être unique en termes de design. Pour vous aider, nos amis de Vector Open Stock ont sorti un billet de faveur exclusivement pour les lecteurs de hongkiat.com.Vec

(Conseils techniques et de conception)