Lorsque j’ai créé mon premier site Web dans les années 1990, le contenu était basé sur des tableaux HTML. Si vous voulez une barre latérale, vous avez divisé le tableau principal en deux cellules, une pour le contenu principal et une pour la barre latérale. Un autre tableau a été inséré dans la cellule correspondant à la barre latérale pour créer différents modules qui sont également basés sur des cellules.

Tout cela est, bien entendu, une technologie dépassée maintenant. L’apparition des feuilles de style en cascade (CSS) a été une révolution qui a également accéléré le rendu des pages. Par conséquent, la mise en page du tableau n’est utilisée que par les personnes qui apprennent le HTML et qui ne sont pas encore familiarisées avec le CSS.

Tout d’abord: des transitions fluides

Mis à part les batailles, CSS continue d’avancer. Je suppose que la prochaine révolution sortira des mains de CSS Grid (si vous êtes un développeur Web et que vous n’avez pas commencé avec CSS Grid, vous serez en retard) mais pour l’instant, la dernière est sortie des mains de CSS3 . Cette version apportait des options pour gérer le contenu qui n’étaient auparavant pas possibles si JavaScript n’était pas utilisé. Et les effets. Effets spectaculaires. Comment Effets CSS3 pour les images que je vais vous apprendre aujourd’hui.

Pour les voir en action, passez simplement votre souris sur l’image (qui s’appelle flotter). Je fournirai le code CSS requis afin que vous puissiez l’implémenter vous-même sur votre site Web (ou sur les sites Web de vos clients). Cependant, pour ne pas faire cela pendant un kilomètre, je donne juste le code de l’effet.

Si vous l’appliquez pour que le changement ne soit pas brusque, il est pratique d’utiliser les transitions. Si vous ne comprenez pas ce que je veux dire, vous pouvez survoler ces deux domaines:

Vous appréciez la différence, n’est-ce pas? La vitesse de transition est également due à CSS3 et est préservée par la propriété Réconciliation. Afin de ne pas me répéter, j’utiliserai la transition dans toutes les images:

Sans le préciser dans le code, je dois en appliquer un autre pour bien évaluer l’effet. Dans ce cas, je le préciserai. Je définirai la classe qui sera appliquée à l’image comme .Photo.

Appliquer des filtres aux images à l’aide de CSS

La première propriété (la seconde en fait après les transitions) que je veux vous montrer est filtreCela nous permet d’appliquer différents filtres aux images sans passer par Instagram 😉

En voici quelques-uns (il y en a plus) avec le code approprié. Survolez-les pour estimer:

Se brouiller

Filtre de flou dans CSS3


Niveaux de gris

Niveaux de gris dans CSS3


La valeur Niveaux de gris Vous pouvez accepter n’importe quel montant entre 0 et 100% et définir différents niveaux de couleur.

sépia

Filtre sépia en CSS3


Comme avec le filtre précédent, vous pouvez lui donner plus ou moins d’intensité en ajustant le pourcentage.

saturation

Filtre de saturation en CSS3


Cette fois, c’est différent: 100% est la saturation d’origine de l’image. Les valeurs ci-dessus donnent une image sursaturée et en dessous de cette valeur, l’image montre moins de saturation que d’habitude.

transparence

Transparence dans CSS3


Bien que j’aie défini la transparence, c’est en fait l’inverse, car l’opacité est spécifiée: 1 est complètement opaque (par défaut) et 0 est complètement transparent.

Construisez-vous votre boutique en ligne ou êtes-vous un exécutant WordPress?
Avez-vous besoin de plugins de haute qualité avec support pour implémenter certaines fonctions?

Obtenez tous les plugins à vendre dans le Zone Plugins de ce site Web et tout cela ajoute. Accès aux 103 plugins (et téléchargements mensuels) avec support direct des développeurs, mises à jour et utilisation illimitée: utilisez-les sur autant de sites Web que vous le souhaitez.

Je veux en savoir plus

Transformations et animations

Il y a beaucoup plus de filtres, mais passons à quelque chose de plus … l’animation. 🙂

CSS3 propose également un certain nombre d’effets qui peuvent être utilisés pour déplacer, transformer et animer des images. La combinaison peut également produire des effets spectaculaires. Certains d’entre eux impliquent l’utilisation d’un conteneur, un div qui contient l’image, que je définirai avec la classe .Récipient.

Zoomer et redimensionner

Zoom et CSS3

Comme vous pouvez le voir, l’image est en fait mise à l’échelle à une taille plus grande (multipliée par 1,3 dans cet exemple) mais crée un conteneur qui cache tout ce qui sort de la taille d’origine (grâce au Débordement caché). Lors de la mise à l’échelle de ce type sans conteneur, nous obtenons une image agrandie:

Mise à l'échelle de l'image dans CSS3

et lorsque nous utilisons une valeur pour Cadre inférieur à 1, une image qui rétrécit:

Mise à l'échelle de l'image dans CSS3

Rebondissements

Celui-ci est assez perceptible:

Changement d'image dans CSS3

Comme vous pouvez le voir, j’ai utilisé une image carrée cette fois. C’est important quand ce type d’effet est déclenché avec un flotterParce que si vous placez le pointeur sur son bord et faites pivoter l’image qui sort de dessous le pointeur, il se remet en place, retrouve le pointeur là-bas et … eh bien, il entre dans une boucle très gênante visuellement.

Comme vous pouvez l’imaginer, vous pouvez utiliser n’importe quelle valeur de votre choix en degrés jusqu’à tournerentre 0 et l’infini. Les valeurs supérieures à 360 donnent lieu à plus d’un tour. Mais n’en faites pas trop, si vous mettez 3600, par exemple, l’image fera dix révolutions complètes à chaque fois que vous poserez la souris dessus. Quel canular!

Et pour faire face aux courbes, voyez ce que vous pensez de celle-ci:

Image flip horizontale dans CSS3


Même si nous ajoutons un conteneur div, un arrière-plan, et un peu de CSS « magique », nous pouvons créer une autre image « derrière » l’image d’origine, ou même du texte. Bien que ce soit un peu plus compliqué et je vais le laisser pour la suite de ce post.

Combinez les effets

La chose peut aller aussi loin que vous le souhaitez, bien sûr. Vous pouvez combiner différents effets comme le spin, Boîte ombre (pour définir des ombres ou des lumières) et le Rayon du bord pour obtenir quelque chose d’aussi étrange que celui-ci:

Divers effets d'image dans CSS3


La valeur de Rayon du bord Il peut être exprimé en nombres entiers (pixels) ou en pourcentage de la taille de l’image. Une valeur de 50% sur une image carrée donne une image complètement ronde.

À propos de l’impact sur un site Web

Je sais que parfois vous voulez que votre site Web soit « le plus cool du quartier », mais rappelez-vous toujours quel est l’objectif principal de votre site Web et ne le sacrifiez pas un iota pour le design et encore moins pour la présentation visuelle.

N’oubliez pas que dans un commerce électronique, l’objectif principal est de vendre et que dans un site Web d’entreprise ou une marque personnelle, il s’agit de générer des prospects. C’est donc la première chose, et l’ensemble du Web (dans son ensemble et chaque élément individuellement) doit être conçu pour servir cet objectif.

Après cela, il y a la facilité d’utilisation, ou plutôt une partie de celle-ci, car un site Web mal utilisable ne sera ni vendu ni converti. Ce n’est que lorsque ces aspects ont été pris en compte qu’il y a place pour des épanouissements et des effets accrocheurs, si nous sommes sûrs qu’ils n’interfèrent pas.

Gardez cela à l’esprit lors de la mise en œuvre de ces effets d’image.



Source link

Recent Posts