CSS - Images

Images d'arrière-plan

CSS fournit la propriété background-image, qui vous permet de définir une image comme arrière-plan d'un élément. Pour utiliser une image d'arrière-plan, vous devez spécifier l'URL du fichier image dans la propriété background-image.

.element {
  background-image: url("chemin/vers/image.jpg");
}

Vous pouvez contrôler la position de l'image d'arrière-plan en utilisant la propriété background-position. Elle accepte des valeurs telles que top, bottom, left, right, center, ou des valeurs spécifiques en pixels ou en pourcentage. Par défaut, l'image d'arrière-plan est placée dans le coin supérieur gauche de l'élément.

.element {
  background-image: url("chemin/vers/image.jpg");
  background-position: center center;
}

Si l'image d'arrière-plan est plus petite que l'élément auquel elle est appliquée, elle se répétera par défaut pour remplir tout l'élément. Vous pouvez contrôler ce comportement en utilisant la propriété background-repeat. Elle accepte des valeurs telles que repeat, repeat-x, repeat-y, et no-repeat.

.element {
  background-image: url("chemin/vers/image.jpg");
  background-repeat: no-repeat;
}

CSS vous permet également de définir plusieurs images pour l'arrière-plan d'un élément. Vous pouvez spécifier plusieurs URL séparées par des virgules dans la propriété background-image. Chaque image sera empilée l'une sur l'autre, chacune étant placée sous la précédente dans l'ordre spécifié dans le code CSS.

.element {
  background-image: url("image1.jpg"), url("image2.jpg");
  backgrounds-position: center center, top right;
  backgrounds-repeat: no-repeat, repeat;
}

Dans ce cas, "image1.jpg" sera positionnée au centre et ne se répétera pas, tandis que "image2.jpg" sera positionnée dans le coin supérieur droit et se répétera.

Les images d'arrière-plan peuvent ajouter de l'intérêt visuel et améliorer le design de vos pages web en utilisant des propriétés comme le positionnement, la répétition et l'apparence, toutes contrôlées par les styles CSS.

Bordures d'image

Le CSS vous permet d'ajouter des bordures autour des images, vous donnant ainsi le contrôle sur leur apparence. Pour ajouter une bordure à une image, vous pouvez utiliser la propriété border ou ses propriétés individuelles : border-width, border-style, et border-color.

Pour définir une bordure pour une image, vous pouvez utiliser la propriété abrégée border. Elle vous permet de spécifier la largeur, le style et la couleur en une seule ligne de code CSS. La syntaxe de la propriété border est la suivante :

img {
  border: 2px solid #000000;
}

L'image aura une bordure noire solide de 2 pixels de large.

Vous pouvez personnaliser le style en utilisant la propriété border-style. Elle accepte des valeurs telles que solid, dashed, dotted, et d'autres. Chaque style crée un aspect différent pour la bordure.

img {
  border-width: 3px;
  border-style: dashed;
  border-color: #ff0000;
}

Ce code donnera à l'image une bordure rouge pointillée de 3 pixels de large.

Vous pouvez également définir différentes couleurs et largeurs pour chaque côté de l'image en utilisant des propriétés individuelles : border-top, border-right, border-bottom, et border-left. Ces propriétés vous permettent de spécifier la largeur, le style et la couleur pour chaque côté.

img {
  border-top: 2px solid #000000;
  border-right: 4px dotted #00ff00;
  border-bottom:6px double #0000ff;
  border-left: 8px ridge #ff00ff;
}

Chaque côté de l'image aura un style, une largeur et une couleur différents.

Les bordures peuvent être un moyen simple d'ajouter un attrait visuel et une séparation aux images sur vos pages web. En utilisant les propriétés CSS, vous pouvez personnaliser l'apparence des bordures d'image pour correspondre au design et au style de votre site web.

Opacité de l'image

CSS fournit la propriété opacity, qui permet d'ajuster la transparence d'une image. La propriété opacity accepte des valeurs entre 0 et 1, où 0 signifie complètement transparent et 1 signifie complètement opaque.

img {
  opacity: 0.5;
}

Vous pouvez combiner la propriété opacity avec d'autres styles d'image pour créer des effets visuels.

img {
  opacity: 0.7;
  border: 2px solid #000000;
  filter: grayscale(50%);
}

Ajuster l'opacité de l'image peut être utile dans divers scénarios tels que la création de superpositions ou d'effets de fondu. En utilisant la propriété opacity, vous contrôlez la transparence des images et créez des designs attrayants.

Lorsque vous appliquez une opacité à une image, cela affecte tout, y compris les bordures ou les ombres. Si vous voulez appliquer la transparence uniquement au contenu tout en gardant les bordures ou les ombres complètement opaques, utilisez plutôt la fonction rgba() pour les couleurs d'arrière-plan.

img {
    background-color: rgba(255,255,255,.5);
    border: 2px solid #000;
}

Filtres d'image

CSS fournit la propriété filter, qui permet d'appliquer divers effets visuels aux images. Avec la propriété filter, vous pouvez manipuler l'apparence des images sans logiciel d'édition d'image complexe.

Un effet de filtre populaire est le niveau de gris. Il supprime la couleur d'une image et l'affiche en nuances de gris. Pour appliquer un filtre en niveaux de gris, vous pouvez utiliser la fonction grayscale() dans la propriété filter. La fonction accepte une valeur en pourcentage, où 0% signifie aucun effet de niveau de gris et 100% signifie un niveau de gris complet.

img {
  filter: grayscale(100%);
}

Un autre filtre couramment utilisé est le flou. Il adoucit les bords et les détails d'une image, créant un effet de flou. Pour appliquer un filtre de flou, vous pouvez utiliser la fonction blur() dans la propriété filter. La fonction accepte une valeur de longueur, généralement en pixels, qui détermine l'intensité du flou.

img {
  filter: blur(5px);
}

Vous pouvez également ajuster la luminosité d'une image en utilisant la fonction brightness(). Elle accepte une valeur en pourcentage, où 100% signifie aucun changement de luminosité ; les valeurs inférieures à 100% la rendent plus sombre ; les valeurs supérieures à 100% la rendent plus lumineuse.

img {
  filter: brightness(150%);
}

CSS offre plusieurs autres fonctions de filtre telles que contrast(), hue-rotate(), invert(), et plus encore. Vous pouvez même combiner plusieurs filtres en les listant les uns après les autres dans la propriété filter.

img {
  filter: grayscale(50%) blur(2px) brightness(120%);
}

Sprites d'images

Les sprites d'images combinent plusieurs images en un seul fichier. Au lieu d'utiliser des fichiers séparés pour chaque élément, vous utilisez une seule image sprite et n'en affichez qu'une partie spécifique à la fois.

Le principal avantage est la réduction du nombre de requêtes HTTP effectuées par une page web. Lors du chargement d'une page, chaque fichier image nécessite une requête séparée au serveur. En combinant plusieurs images en une seule, vous minimisez le nombre de requêtes, ce qui peut améliorer la vitesse de chargement et les performances.

Pour créer un sprite d'image, utilisez un outil d'édition d'image pour disposer plusieurs images dans une grille ou une mise en page au sein d'un seul fichier. Chaque image individuelle dans le sprite est généralement placée l'une à côté de l'autre sans espace entre elles.

Une fois que vous avez préparé l'image sprite, utilisez CSS pour afficher des parties spécifiques de l'image. Définissez le sprite comme image de fond d'un élément en utilisant background-image. Ensuite, utilisez background-position pour spécifier les coordonnées de la partie souhaitée dans le sprite.

.icon {
  background-image: url('sprite.png');
  background-repeat: no-repeat;
  width: 20px;
  height: 20px;
}

.icon-home {
  background-position: 0 0;
}

.icon-settings {
  background-position: -20px 0;
}

.icon-profile {
  background-position: -40px 0;
}

Dans cet exemple, "sprite.png" contient plusieurs icônes. Chaque icône fait 20x20 pixels. Le CSS définit cela comme arrière-plan pour les éléments avec la classe "icon". Les icônes individuelles sont affichées en ajustant background-position. La première valeur représente la position horizontale ; la seconde valeur représente la position verticale. Les valeurs négatives déplacent l'image vers la gauche ou vers le haut.

Pour bien utiliser les sprites, planifiez soigneusement la disposition et les dimensions des images individuelles à l'intérieur. Tenez compte aussi de la taille ; des sprites trop grands peuvent affecter la taille globale du fichier.

Les sprites sont couramment utilisés pour les icônes, les boutons et autres petits éléments graphiques fréquemment utilisés sur les sites web. En implémentant des sprites, vous pouvez optimiser vos pages en réduisant les requêtes et en améliorant les performances de chargement.

Images réactives

Il est important de rendre les images réactives pour qu'elles s'adaptent bien aux différentes tailles d'écran. Le CSS offre des techniques pour rendre les images réactives et optimiser leur affichage sur différents appareils.

Une façon de rendre les images réactives est d'utiliser la propriété max-width. En définissant max-width: 100%;, une image se redimensionnera proportionnellement si son conteneur est plus petit que la taille originale de l'image. Cependant, elle ne s'agrandira pas au-delà de ses dimensions d'origine, évitant ainsi toute perte de qualité.

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

Lorsque vous définissez max-width: 100%;, il est également recommandé de définir height: auto;. Cela garantit que la hauteur de l'image s'ajuste automatiquement proportionnellement à sa largeur, préservant ainsi le rapport hauteur/largeur. Sans height: auto;, l'image pourrait apparaître étirée ou déformée lors de son redimensionnement.

Une autre technique pour les images réactives consiste à servir différentes versions d'une image en fonction de l'appareil ou de la taille de l'écran. Cela permet d'optimiser la qualité de l'image et la taille du fichier pour différents scénarios.

Les media queries CSS permettent d'appliquer différents styles en fonction des caractéristiques de l'appareil, comme la largeur de l'écran. Vous pouvez définir des points de rupture auxquels différents styles ou différentes images doivent être utilisés.

/* Image par défaut */
.image {
  background-image: url("petite-image.jpg");
}

/* Media query pour les écrans plus larges */
@media screen and (min-width: 768px) {
  .image {
    background-image: url("grande-image.jpg");
  }
}

En utilisant les media queries, vous pouvez spécifier différentes sources d'images pour différentes tailles d'écran. Cela vous permet de servir des images plus petites et optimisées pour les appareils mobiles et des images de meilleure qualité pour les écrans plus grands. Cette technique aide à améliorer les temps de chargement des pages et à optimiser l'utilisation de la bande passante.

Lors de la mise en œuvre d'images réactives, prenez en compte des facteurs tels que l'objectif de l'image, les tailles d'écran attendues de vos appareils cibles, et les compromis entre qualité et taille de fichier. Tester votre implémentation sur divers appareils et tailles d'écran aide à trouver un équilibre qui offre une bonne expérience utilisateur.

Les images réactives sont une partie importante du design web moderne. En utilisant des techniques CSS comme max-width et les media queries, vous pouvez faire en sorte que vos images s'adaptent bien aux différents appareils et tailles d'écran.

Effets de survol sur les images

Le CSS vous permet de créer des effets de survol sur les images, ajoutant de l'interactivité et de l'attrait visuel à vos pages web. Les effets de survol sont déclenchés lorsqu'un utilisateur déplace son curseur sur une image, offrant un moyen de mettre en évidence ou de révéler des informations supplémentaires.

Un effet de survol courant consiste à modifier l'opacité d'une image. En utilisant la pseudo-classe :hover et la propriété opacity, vous pouvez rendre une image plus transparente ou opaque lorsqu'elle est survolée.

img {
  opacity: 0.8;
  transition: opacity 0.3s;
}

img:hover {
  opacity: 1;
}

Un autre effet de survol populaire est le redimensionnement de l'image. Vous pouvez utiliser la propriété transform avec la fonction scale() pour agrandir ou réduire l'image au survol.

img {
  transition: transform 0.3s;
}

img:hover {
  transform: scale(1.1);
}

Vous pouvez également modifier la bordure d'une image au survol. En utilisant la pseudo-classe :hover et les propriétés de bordure, vous pouvez modifier le style, la couleur ou la largeur de la bordure lorsque l'image est survolée.

img {
  border: 2px solid #000;
  transition: border-color 0.3s; 
}

img:hover {
  border-color: #ff0000;
}

Pour rendre les effets de survol plus attrayants visuellement, vous pouvez les combiner avec des transitions. Les transitions vous permettent d'animer en douceur les changements entre les états normal et survolé. Utilisez la propriété 'transition' pour spécifier les propriétés, la durée et la fonction de temporisation.

img {
  opacity: 0.8;
  transition: 0.3s all ease-in-out;
}

img:hover {
  transform: scale(1.1);
}

En utilisant ces techniques, vous créez des expériences interactives pour les utilisateurs. Expérimentez avec différentes valeurs pour obtenir l'effet visuel souhaité qui complète le design de votre site web. N'oubliez pas de prendre en compte l'accessibilité. Certains utilisateurs peuvent avoir des difficultés avec le contrôle précis de la souris, assurez-vous donc que les informations et les fonctionnalités importantes restent accessibles sans dépendre uniquement des interactions.

Galeries d'images

Le CSS permet de créer des galeries d'images sur vos pages web. Les galeries d'images sont un moyen d'afficher une collection d'images de manière organisée et interactive.

Pour construire une galerie d'images avec CSS, commencez par structurer votre balisage HTML en incluant un élément conteneur qui héberge les éléments individuels de la galerie. Chaque élément de la galerie comprend généralement une vignette d'image et une légende ou une superposition optionnelle.

<div class="gallery">
  <div class="gallery-item">
    <img src="image1.jpg" alt="Image 1">
    <div class="caption">Légende pour l'image 1</div>
  </div>
  <div class="gallery-item">
    <img src="image2.jpg" alt="Image 2">
    <div class="caption">Légende pour l'image 2</div>
  </div>
</div>

Une fois la structure HTML en place, utilisez CSS pour styliser la galerie et ses composants. Commencez par appliquer des styles au conteneur de la galerie, comme la définition d'une mise en page en grille ou en flex pour organiser les éléments de la galerie.

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px;
}

Ce code CSS configure le conteneur de la galerie pour utiliser une mise en page en grille avec des tailles de colonnes adaptatives qui s'ajustent à l'espace disponible.

Ensuite, stylisez les éléments individuels de la galerie. Vous pouvez appliquer des bordures, des marges intérieures ou des couleurs de fond pour créer des vignettes distinctes. Utilisez CSS pour contrôler la taille et le ratio d'aspect des vignettes.

.gallery-item {
  border: 1px solid #ccc;
  padding: 5px;
}

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

Les éléments de la galerie ont une bordure et une marge intérieure ; les images à l'intérieur s'adaptent de manière responsive tout en conservant leur ratio d'aspect.

Pour ajouter de l'interactivité, vous pouvez implémenter une fonction de lightbox. Une lightbox est une superposition qui apparaît lorsque vous cliquez sur une vignette ; elle affiche une version plus grande de l'image avec des contrôles de navigation.

.lightbox {
  display: none;
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
}

.lightbox img {
  display: block;
  margin: auto;
  max-width: 90%;
  max-height: 90%;
  border-radius: 4px;
  box-shadow: 0;
}

La lightbox est initialement cachée et positionnée de manière fixe, couvrant tout l'écran. Lorsqu'elle est activée, elle affiche une image plus grande centrée sur l'écran avec un fond semi-transparent.

Pour contrôler la lightbox, ajoutez des boutons de navigation à l'aide d'éléments HTML stylisés avec CSS.

<div class="lightbox">  
  <img src="grande-image.jpg" alt="Grande Image">  
  <div class="navigation">   
    <button class="prev">Précédent</button>   
    <button class="next">Suivant</button>    
  </div>    
</div>    

Vous pouvez ajouter des légendes ou des superpositions fournissant des informations supplémentaires sur chaque image en utilisant le positionnement CSS.

.gallery-item .caption {
  margin-top: 5px;
  font-size: 14px;
  color: #888;
}     

Les légendes sont positionnées sous les vignettes et stylisées avec une taille de police plus petite et une couleur différente.

Formes CSS avec des images

CSS offre des propriétés qui permettent de créer des formes non rectangulaires avec des images, ajoutant un intérêt visuel à vos pages web. Deux propriétés essentielles pour créer des formes sont clip-path et shape-outside.

La propriété clip-path permet de découper une image selon une forme spécifique. Vous pouvez définir des formes basiques comme des cercles, des ellipses, des polygones, ou même utiliser des chemins SVG personnalisés pour créer des formes complexes. La partie de l'image à l'intérieur de la forme spécifiée reste visible, tandis que le reste est découpé.

img {
  clip-path: circle(50% at 50% 50%);
}

La propriété shape-outside est utilisée en combinaison avec les flottants. Elle définit une forme autour de laquelle le contenu doit s'enrouler. En appliquant shape-outside à une image flottante, vous pouvez faire en sorte que le texte environnant s'enroule autour des contours de l'image.

img {
  float: left;
  shape-outside: polygon(0 0, 100% 0, 100% 100%, 30% 100%);
}

Vous pouvez combiner clip-path et shape-outside pour créer des images avec des formes personnalisées qui interagissent avec le contenu environnant.

img {
  float: left;
  clip-path: ellipse(60% at center);
  shape-outside: ellipse(60% at center);
}

Lors de l'utilisation de formes CSS avec des images, vous pouvez améliorer davantage l'attrait visuel en les combinant avec d'autres styles comme des bordures, des ombres, des filtres ou des effets au survol sur les images façonnées.

img {
  clip-path: polygon(50% top-left-corner%, right-center-corner%, bottom-center-corner%, left-center-corner%);
  transition: clip-path .3s;
  filter: grayscale();
}

img:hover {
  clip-path: rectangle();
  filter: grayscale-off();
}