Premiers pas avec les effets d’image CSS

Les feuilles de style en cascade (CSS) sont un langage de script qui permet aux développeurs Web de spécifier la mise en page et la conception des éléments du site Web. Il est couramment utilisé en combinaison avec HTML, XHTML et JavaScript.

Dans cet article, je vais montrer comment le CSS peut être utilisé pour manipuler et styliser des images. Je couvrirai quelques effets d’image CSS simples qui peuvent vous aider à présenter des images de manière attrayante sur une page Web, ainsi que des effets dynamiques comme un fondu avant, un zoom avant et arrière et l’application d’une bordure 3D.

Comment appliquez-vous les niveaux de gris dans CSS?

Voici un exemple montrant comment appliquer des niveaux de gris à une image en CSS:

img {

largeur: 150px;

}

.grayscale {

filtre: niveaux de gris (0,5)

Le filtre le plus couramment ajouté à une image est l’échelle de gris. Vous pouvez l’utiliser pour créer des photos en noir et blanc à partir de photos couleur originales. La fonction CSS en niveaux de gris peut prendre un pourcentage ou un paramètre numérique. 0 (ou 0%) signifie aucun changement et 1 (ou 100%) signifie que l’image est entièrement en niveaux de gris. Laisser la valeur vide définira le paramètre sur 1.

Comment flouez-vous dans CSS?

Voici un exemple montrant comment appliquer un flou à une image en CSS:

img {

largeur: 150px;

}

.se brouiller {

filtre: flou (5px);

}

L’effet de flou rend la photo floue en appliquant un effet de flou gaussien. Il peut être utilisé, par exemple, pour une image d’arrière-plan qui n’a pas besoin d’être nette, pour la censure, ou pour un effet graphique dans une image avec plusieurs couches visuelles.

La méthode CSS blur () prend un argument, qui spécifie une certaine quantité de pixels. Plus la valeur est élevée, plus le flou sera important. Par défaut, la valeur est 0.

Comment appliquez-vous la rotation de teinte dans CSS?

Voici un exemple d’application de la rotation Hue dans CSS:

img {largeur: 150px; }

.huerotate {

filtre: rotation de la teinte (180 degrés);

}

La rotation de teinte est une fonction qui spécifie un angle autour du cercle de couleur CMJN et applique une teinte avec cette couleur à l’image. Par exemple, une valeur de 90 degrés donnera un vert clair, tandis que 180 degrés comme dans l’exemple ci-dessus ombreront l’image en cyan.

Comment fonctionnent les effets de survol d’image dans CSS?

Vous pouvez utiliser CSS pour définir des styles de texte, mais vous pouvez également ajouter des calques de style au texte et aux images. C’est ce qu’on appelle un effet de survol. En d’autres termes, quelque chose se produit, défini par le code CSS, lorsque vous passez la souris sur un ensemble spécifique de texte ou d’images.

Changer la couleur d’arrière-plan

Un moyen simple d’ajouter un effet de survol consiste à changer la couleur d’arrière-plan. Si vous ajoutez la directive: hover à une classe CSS et spécifiez une couleur d’arrière-plan différente, elle passera à cette couleur lorsque l’utilisateur passera la souris dessus.

a: hover {

couleur de fond: rouge;

}

Modification de la mise en forme du texte

Un autre effet de survol consiste à ajouter du texte souligné ou en gras. L’exemple ci-dessous montre comment ajouter du soulignement et du gras à une chaîne de texte au survol.

a: hover {

poids de la police: gras;

texte-décoration: souligné;

}

Modification de la police et de la taille

Vous pouvez changer la police du texte sur la page ou un lien au survol. Une autre option consiste à augmenter ou réduire la taille de la police avec un modificateur de taille de police.

a: hover {

famille de polices: Georgia;

taille de la police: 200%;

}

Fondu entrant

Le fondu entrant et sortant est un excellent moyen de se concentrer sur une partie d’une page qui met l’accent sur une fonction utilisateur ou des appels à l’action. Vous créez un effet de fondu en CSS en deux étapes. Tout d’abord, définissez l’état initial, puis définissez la modification à effectuer en survol.

.disparaître

{

opacité: 0,2;

}

.fade: survoler

{

opacité: 1;

}

Rotation d’un élément

Une autre option consiste à faire pivoter un élément lorsque l’utilisateur passe la souris dessus. Pour ce faire, attribuez à votre div une classe «rotation» comme suit. Il existe plusieurs options pour prendre en charge différents navigateurs.

.rotate: survoler

{

-webkit-transform: rotateZ (-20deg);

-ms-transform: rotateZ (-20deg);

transformer: rotateZ (-20deg);

}

Faire croître ou réduire un élément

Si vous souhaitez agrandir ou réduire un élément lorsque l’utilisateur le survole, utilisez CSS3 pour définir la classe de div pour qu’elle s’agrandisse et ajoutez le code suivant au bloc de style. Vous pouvez faire la même chose avec une valeur inférieure à 1 pour réduire l’élément.

.grow: survoler

{

-webkit-transform: échelle (1.5);

-ms-transform: échelle (1,5);

transformée: échelle (1,5);

}

Ombre 3D

Vous pouvez obtenir un effet d’ombre 3D sympa en créant une ombre colorée et en appliquant une transformation qui la déplace horizontalement à l’aide de la propriété translate.

.threed: survoler

{

boîte ombre:

1px 1px # 53a7ea,

2px 2px # 53a7ea,

-webkit-transform: translateX (-4px);

transformer: translateX (-4px);

}

Conclusion

Dans cet article, j’ai montré à quel point il est facile de styliser et de manipuler des images à l’aide de CSS. Avec seulement quelques lignes de code, vous pouvez appliquer des effets sympas tels que:

• Application de niveaux de gris pour les images couleur
• Flouter une image
• Effectuer une rotation de teinte (sélection d’une teinte dans la roue chromatique)
• Application d’un effet lorsque l’utilisateur passe la souris sur une image:
  • Couleur de l’arrière plan
  • Mise en forme du texte
  • Police et taille
  • Disparaître
  • Zoom avant / arrière
  • Ombre 3D

J’espère que cela vous aidera à créer de meilleures conceptions Web visuellement captivantes.