Stylisation d’image CSS : Améliorer l’attrait visuel avec du style

En matière de conception web, des images captivantes peuvent faire toute la différence. Les images jouent un rôle crucial dans la création d’une expérience utilisateur attrayante et mémorable.

Mais comment faire passer vos images de l’ordinaire à l’extraordinaire ? C’est là qu’intervient la stylisation d’image. Grâce à la puissance de CSS, vous pouvez libérer votre créativité et transformer vos images en éléments visuels captivants qui laisseront une impression durable.

Dans cet article, nous allons plonger dans le monde de la stylisation d’image CSS, en explorant de nombreuses techniques et propriétés qui élèveront vos compétences en matière de conception web à de nouveaux sommets.

Comment ajouter des images en HTML

Avant de pouvoir styliser une image, vous devez d’abord l’ajouter à votre document HTML. Pour cela, vous pouvez utiliser la balise <img>. La balise <img> est une balise auto-fermante (elle ne nécessite pas de balise fermante). Elle possède un attribut src qui spécifie l’URL ou le chemin d’accès au fichier de l’image que vous souhaitez afficher.

<img src="image.jpg" alt="Description of the image">

Vous pouvez également fournir une URL absolue ou un chemin d’accès relatif à l’image.

<img src="https://source.unsplash.com/tMHAmxLyzvA" alt="Boston city skyline">

L’attribut alt représente un texte alternatif et est essentiel pour l’accessibilité. La balise <img> fournit également deux attributs facultatifs : width et height. Ces attributs vous permettent de spécifier les dimensions de l’image en pixels.

<img src="image.jpg" alt="Description of the image" width="300" height="200">

Toutefois, il est généralement recommandé d’éviter d’utiliser les attributs width et height, sauf si vous devez conserver des dimensions d’image spécifiques. À la place, vous pouvez utiliser CSS pour contrôler la taille de l’image, ce qui offre une plus grande flexibilité en matière de conception responsive.

img {
  height: 200px;
  width: 700px;
}

Stylisation d’image responsive

L’application de valeurs spécifiques pour les attributs width et height à une image peut avoir des conséquences indésirables, telles que la compression ou la déformation de l’image. Cela est particulièrement vrai si les dimensions spécifiées ne correspondent pas au rapport d’aspect original de l’image.

Pour éviter ces problèmes et maintenir des proportions d’image correctes, c’est là que le style d’image réactif entre en jeu. La stylisation responsive d’image garantit que les images s’adaptent aux différentes tailles d’écran, ce qui est crucial pour la conception web responsive.

Vous pouvez y parvenir en utilisant la propriété max-width, qui limite la largeur maximale d’une image.

img {
  max-width: 100%;
  height: auto;
}

Vous pouvez également utiliser les media queries pour modifier le style de l’image en fonction des différents points de rupture de l’appareil. Les media queries vous permettent d’appliquer des règles CSS spécifiques en fonction de la taille de l’écran, de l’orientation et d’autres caractéristiques de l’appareil. Par exemple :

@media screen and (max-width: 600px) {
  .my-image {
    max-width: 50%;
  }
}

Utiliser Object-Fit pour maintenir le rapport d’aspect et éviter les rétrécissements

Dans certains cas, vous devez spécifier la largeur et la hauteur d’une image. Dans ce cas, vous pouvez utiliser la propriété CSS object-fit pour contrôler le comportement de l’image dans les dimensions spécifiées.

La propriété object-fit vous permet de spécifier comment une image doit s’insérer dans son conteneur tout en conservant son rapport d’aspect. Elle peut prendre plusieurs valeurs, telles que :

• fill : Cette valeur permet d’étirer ou d’écraser l’image pour qu’elle s’adapte exactement à son conteneur, ce qui peut entraîner des distorsions.
• contain : Cette valeur met l’image à l’échelle de manière proportionnelle pour qu’elle tienne dans le conteneur sans recadrage, en conservant le rapport hauteur/largeur. Elle garantit que l’ensemble de l’image est visible dans le conteneur, ce qui peut entraîner des espaces vides.
• cover : Cette valeur permet de redimensionner proportionnellement l’image pour qu’elle couvre le conteneur tout en conservant le rapport hauteur/largeur. Elle peut conduire à recadrer les bords de l’image pour s’assurer qu’elle remplit tout le conteneur.
• none : Cette valeur n’applique aucune mise à l’échelle ni aucun recadrage, et l’image conserve sa taille d’origine, ce qui risque de faire déborder le conteneur.

Voici un exemple d’utilisation de la propriété object-fit :

img {
  width: 300px;
  height: 300px;
  object-fit: cover;
}

Création d’images à coins arrondis avec CSS

L’ajout de coins arrondis aux images peut leur donner un aspect plus doux et plus attrayant.

Avec CSS, vous pouvez facilement obtenir cet effet en appliquant la propriété border-radius à l’image.

Voici comment vous pouvez créer des images aux coins arrondis :

img {
  border-radius: 10px;
}

Dans l’exemple ci-dessus, nous avons fixé la propriété border-radius à 10px. Ajustez la valeur à votre convenance pour contrôler l’arrondi des coins. Cette valeur peut être exprimée dans l’unité de votre choix (rem, pourcentage, etc.).

Création d’images circulaires avec CSS

Pour que vos images soient parfaitement circulaires, combinez la propriété border-radius avec des dimensions de largeur et de hauteur égales.

Voici comment créer des images circulaires :

img {
  border-radius: 50%;
  width: 200px;
  height: 200px;
}

Dans l’exemple ci-dessus, la propriété border-radius est définie sur 50%, ce qui crée un cercle en faisant en sorte que la courbe de la bordure corresponde à la moitié de la largeur ou de la hauteur de l’image.

Vous pouvez également utiliser la propriété clip-path. Elle vous permet de définir un chemin d’écrêtage pour un élément, créant ainsi des formes uniques.

Voici un exemple d’image découpée en cercle :

img {
  clip-path: circle(50%);
  width: 200px;
  height: 200px;
}

Centrer les images avec CSS

L’alignement des images au centre de leur conteneur est une pratique courante dans la conception web. Il existe de nombreuses façons d’y parvenir ; l’une d’entre elles consiste à attribuer à la propriété display de l’image la valeur block et à appliquer margin: 0 auto, qui centre horizontalement l’image à l’intérieur de son conteneur.

img {
  display: block;
  margin: 0 auto;
  width: 700px;
}

Création d’images transparentes

Vous pouvez utiliser CSS pour appliquer l’effet de transparence souhaité afin de rendre une image transparente. La propriété opacity vous permet de contrôler le niveau de transparence d’un élément, y compris les images.

Une valeur de 1 représente une opacité totale (complètement visible), tandis que 0 représente une transparence totale (complètement invisible).

img {
  opacity: 0.5;
}

Dans le code ci-dessus, l’opacité de l’image est fixée à 0.5, ce qui produit un effet de semi-transparence. Vous pouvez ajuster la valeur de l’opacité pour obtenir le niveau de transparence souhaité.

Placer du texte sur des images

L’insertion de texte sur des images permet de créer des conceptions visuellement attrayantes et informatives. Pour placer du texte au-dessus d’une image, vous pouvez utiliser une combinaison de positionnement CSS et de z-index.

Voici un exemple :

 // HTML
<div class="image-container">
  <img src="https://source.unsplash.com/tMHAmxLyzvA" alt="Boston city skyline" >
  <div class="image-text">Welcome to Kinsta</div>
</div>

// CSS
.image-container {
  position: relative;
}


.image-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  color: white;
  font-size: 20px;
  font-weight: bold;
}

Dans le code ci-dessus, la page image-container div sert de conteneur à la fois pour l’image et pour le texte superposé. La propriété position: relative est appliquée au conteneur pour établir un contexte de positionnement. La classe image-text est ensuite utilisée pour positionner le texte de manière absolue dans le conteneur à l’aide de position: absolute, et les propriétés top, left et transform pour le centrer. La propriété z-index garantit que le texte apparaît au-dessus de l’image, et vous pouvez personnaliser l’apparence du texte avec la couleur, la taille et la graisse de la police.

Veuillez noter que les valeurs de positionnement spécifiques et le style peuvent être ajustés en fonction de vos préférences et exigences en matière de conception.

Retournement d’images : Créer des effets de miroir

Le retournement d’images peut ajouter un élément visuel intéressant à votre site web. Que vous souhaitiez créer un effet miroir ou retourner une image verticalement ou horizontalement, CSS propose des techniques simples pour obtenir cet effet.

Retournement horizontal

Pour retourner horizontalement une image, vous pouvez utiliser la propriété transform avec la fonction scaleX(). La valeur scaleX(-1) retourne l’image le long de l’axe horizontal.

img {
  transform: scaleX(-1);
}

Retournement vertical

Pour retourner verticalement une image, vous pouvez utiliser la propriété transform avec la fonction scaleY(). La valeur scaleY(-1) retourne l’image le long de l’axe vertical.

img {
  transform: scaleY(-1);
}

Retournement diagonal

Pour créer un effet de retournement en diagonale, combinez les fonctions scaleX() et scaleY() dans la propriété transform.

img {
  transform: scaleX(-1) scaleY(-1);
}

Dans le code ci-dessus, l’image sera reflétée horizontalement et verticalement, ce qui produira un effet de retournement en diagonale.

Ajout de filtres aux images : Améliorer les effets visuels

Les filtres peuvent transformer l’aspect et la sensation des images, ce qui vous permet de créer des effets visuels uniques. CSS fournit une série de propriétés de filtre qui peuvent être appliquées aux images, vous permettant d’ajuster la luminosité, le contraste, la saturation, etc.

Vous pouvez utiliser la propriété filter pour appliquer un filtre à une image. Cette propriété accepte plusieurs fonctions de filtre, chacune modifiant différents aspects de l’image.

img {
  filter: brightness(150%);
}

Dans le code ci-dessus, la fonction brightness(150%) est appliquée à l’image. Elle augmente la luminosité de l’image de 150 %.

Fonctions de filtrage couramment utilisées

Voici quelques fonctions de filtrage couramment utilisées :

• brightness(): Règle la luminosité de l’image.
• contrast(): Modifie le contraste de l’image.
• saturate(): Modifie le niveau de saturation de l’image.
• grayscale(): Convertit l’image en niveaux de gris.
• blur(): Applique un effet de flou à l’image.
• sepia(): Applique un effet de tonalité sépia à l’image.

Vous pouvez expérimenter différentes fonctions et valeurs de filtre pour obtenir les effets visuels souhaités. La combinaison de plusieurs filtres peut également produire des transformations plus complexes.

Création de superpositions d’images au survol

Les superpositions d’images au survol peuvent apporter de l’interactivité et de l’intérêt visuel à votre site web. Lorsqu’un utilisateur survole une image, un effet de superposition peut être appliqué, tel qu’une superposition de couleurs ou une légende de texte.

CSS propose plusieurs techniques pour réaliser des superpositions au survol ; l’une d’entre elles consiste à utiliser des transitions CSS. En transposant des propriétés spécifiques d’un élément, vous pouvez animer en douceur les changements qui surviennent lorsque l’utilisateur survole une image.

// HTML
<div class="image-container">
  <img src="image.jpg" alt="Description of the image">
  <div class="overlay"></div>
</div>

// CSS
.image-container {
  position: relative;
  display: inline-block;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.image-container:hover .overlay {
  opacity: 1;
}

Dans le code ci-dessus, un élément .image-container enveloppe l’image et un élément .overlay. La superposition est initialement transparente (opacity: 0) et couvre l’ensemble de l’image. Lorsque vous survolez l’élément .image-container, l’opacité de l’élément .overlay passe à 1, révélant ainsi la couleur de la superposition.

Pour obtenir l’effet visuel souhaité, vous pouvez personnaliser la superposition en ajustant les propriétés background-color et l’opacité.

Résumé

La stylisation des images avec CSS ouvre un monde de possibilités créatives, vous permettant d’améliorer l’attrait visuel et l’interactivité de vos pages web.

Lorsque vous stylisez des images avec CSS, gardez toujours à l’esprit l’accessibilité, le responsive et les performances.

Quel est le style d’image CSS que vous utilisez le plus souvent ? Lequel vous intéresse le plus ? Faites-le nous savoir dans les commentaires.

Joel Olawanle Kinsta

Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 200 technical articles majorly around JavaScript and it's frameworks.

• Site Web
• LinkedIn
• Twitter
• YouTube