Utilisation de CSS avec des images

Donnez du style à vos images et utilisez des images dans des styles

Boîte à fleurs sur pavé de briques

Alan Powdrill / Getty Images





Beaucoup de gens utilisent CSS pour ajuster le texte, changer la police, la couleur, la taille et plus encore. Mais une chose que beaucoup de gens oublient souvent, c'est que vous pouvez également utiliser CSS avec des images.

Changer l'image elle-même

CSS vous permet d'ajuster la façon dont l'image s'affiche sur la page. Cela peut être très utile pour garder vos pages cohérentes. En définissant des styles sur toutes les images, vous créez un look standard pour vos images. Certaines des choses que vous pouvez faire :



  • Ajouter une bordure ou un contour autour des images
  • Supprimer la bordure colorée autour des images liées
  • Réglage de la largeur et/ou de la hauteur des images
  • Ajouter une ombre portée
  • Faire pivoter l'image
  • Changer les styles lorsque l'image est survolée

Donner une bordure à votre image est un bon point de départ. Mais vous devez prendre en compte plus que la bordure : pensez à tout le bord de votre image et ajustez les marges et rembourrage aussi bien. Une image avec une fine bordure noire est jolie, mais l'ajout d'un rembourrage entre la bordure et l'image peut être encore meilleur.

C'est une bonne idée de associez toujours des images non décoratives , quand c'est possible. Mais lorsque vous le faites, n'oubliez pas que la plupart des navigateurs ajoutent une bordure colorée autour de l'image. Même si vous utilisez le code ci-dessus pour modifier la bordure, le lien l'écrasera à moins que vous ne supprimiez ou ne modifiiez également la bordure du lien. Pour ce faire, vous devez utiliser une règle enfant CSS pour supprimer ou modifier la bordure autour des images liées :



Vous pouvez également utiliser CSS pour modifier ou définir la hauteur et la largeur de vos images. Bien que ce ne soit pas une bonne idée d'utiliser le navigateur pour ajuster la taille des images en raison des vitesses de téléchargement, ils s'améliorent beaucoup pour redimensionner les images afin qu'elles restent belles. Et avec CSS, vous pouvez définir toutes vos images sur une largeur ou une hauteur standard ou même définir des dimensions relatives au conteneur.

N'oubliez pas que lorsque vous redimensionnez des images, pour de meilleurs résultats, vous ne devez redimensionner qu'une seule dimension - la hauteur ou la largeur. Cela garantira que l'image conserve son rapport d'aspect et ne semble donc pas étrange. Définissez l'autre valeur sur auto ou laissez-le de côté pour dire au navigateur de garder le rapport d'aspect cohérent.

CSS3 offre une solution à ce problème avec les nouvelles propriétés ajustement à l'objet et position de l'objet . Avec ces propriétés, vous pourrez définir la hauteur et la largeur exactes de l'image et la manière dont le rapport d'aspect doit être géré. Cela peut créer des effets de boîte aux lettres autour de vos images ou un recadrage pour que l'image s'adapte à la taille requise.

Il existe d'autres propriétés CSS3 bien prises en charge dans la plupart des navigateurs que vous pouvez également utiliser pour modifier vos images. Des choses comme les ombres portées, les coins arrondis et les transformations pour faire pivoter, incliner ou déplacer vos images fonctionnent toutes actuellement dans la plupart des navigateurs modernes. Vous pouvez ensuite utiliser des transitions CSS pour faire changer les images lorsque vous les survolez, cliquez dessus ou juste après un certain temps.



Utilisation d'images comme arrière-plan

CSS facilite la création d'arrière-plans fantaisistes avec vos images. Tu peux ajouter des arrière-plans à toute la page ou juste à un élément spécifique. Il est facile de créer une image de fond sur la page avec le image de fond propriété:

Changer la corps sélecteur à un élément spécifique de la page pour mettre l'arrière-plan sur un seul élément.



Une autre chose amusante que vous pouvez faire avec les images est de créer une image d'arrière-plan qui ne défile pas avec le reste de la page, comme un filigrane. Vous utilisez simplement le style pièce jointe en arrière-plan : fixe ; avec votre image de fond. D'autres options pour vos arrière-plans incluent les mosaïques horizontales ou verticales à l'aide de l'outil Répétition du fond propriété. Écrire répétition d'arrière-plan : répétition-x ; pour mosaïquer l'image horizontalement et background-repeat : répéter-y ; pour carreler verticalement. Et vous pouvez positionner votre image de fond avec le position d'arrière-plan propriété.

Et CSS3 ajoute également plus de styles pour vos arrière-plans. Vous pouvez étirer vos images pour les adapter à n'importe quelle taille d'arrière-plan ou définir l'image d'arrière-plan à l'échelle de la taille de la fenêtre. Vous pouvez modifier la position, puis découper l'image d'arrière-plan. Mais l'une des meilleures choses à propos de CSS3 est que vous pouvez désormais superposer plusieurs images d'arrière-plan pour créer des effets encore plus complexes.



HTML5 aide à styliser les images

La CHIFFRE L'élément HTML5 doit être placé autour de toutes les images qui peuvent être autonomes dans le document. Une façon d'y penser est que si l'image pouvait apparaître dans une annexe, alors elle devrait être à l'intérieur du CHIFFRE élément. Vous pouvez ensuite utiliser cet élément et le FIGLégende élément pour ajouter des styles à vos images.