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 aspect 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 quand l'image est survolée
Donner une bordure à votre image est un excellent point de départ. Mais vous devriez considérer plus que juste la bordure - pensez à tout le bord de votre image et ajustez les marges et rembourrage ainsi que. Une image avec une fine bordure noire est jolie, mais ajouter un peu de rembourrage entre la bordure et l'image peut être encore mieux.
C'est une bonne idée de toujours lier des images non décoratives, quand c'est possible. Mais quand 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 remplacera cela à 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 soient toujours belles. Et avec CSS, vous pouvez définir vos images sur une largeur ou une hauteur standard ou même définir les dimensions par rapport au conteneur.
N'oubliez pas que lorsque vous redimensionnez des images, pour de meilleurs résultats, vous ne devez redimensionner qu'une dimension - la hauteur ou la largeur. Cela garantira que l'image conserve son rapport hauteur/largeur et n'a donc pas l'air étrange. Réglez l'autre valeur sur auto ou laissez-le de côté pour dire au navigateur de garder le rapport hauteur/largeur cohérent.
CSS3 offre une solution à ce problème avec les nouvelles propriétés ajustement à l'objet et position-objet. Avec ces propriétés, vous pourrez définir la hauteur et la largeur exactes de l'image et comment le rapport hauteur/largeur 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 éléments tels que les ombres portées, les coins arrondis et les transformations pour faire pivoter, incliner ou déplacer vos images fonctionnent tous actuellement dans la plupart des navigateurs modernes. Vous pouvez ensuite utiliser des transitions CSS pour modifier les images lorsque vous survolez, cliquez ou juste après un certain temps.
Utiliser des images comme arrière-plans
CSS facilite la création d'arrière-plans fantaisistes avec vos images. Vous pouvez ajouter des arrière-plans à toute la page ou juste à un élément spécifique. Il est facile de créer une image d'arrière-plan 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 juste le style pièce jointe d'arrière-plan: fixe ; avec votre image de fond. D'autres options pour vos arrière-plans incluent de les rendre simplement horizontales ou verticales en utilisant le Répétition du fond propriété. Écrivez background-repeat: répéter-x ; pour mosaïquer l'image horizontalement et background-repeat: répétition-y ; à carreler verticalement. Et vous pouvez positionner votre image de fond avec le position-arrière-plan propriété.
Et CSS3 ajoute également plus de styles pour vos arrière-plans. Vous pouvez étirer vos images pour qu'elles s'adaptent à 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
le CHIFFRE L'élément HTML5 doit être placé autour de toutes les images pouvant être autonomes dans le document. Une façon d'y penser est que si l'image peut 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 LÉGENDE DE FIGURE élément pour ajouter des styles à vos images.