Comment faire des bordures sur des images en CSS

Anciennement, on utilisait l’attribut border à l’intérieur de l’image (ex: border="1"), et le simple fait de mettre un lien sur cette image nous permettait d’avoir une bordure qui se comportait comme les liens de la page, avec les même couleurs. Toutefois, cette pratique est désuète et n’est pas compatible avec les nouveaux standards strict de HTML 4.0 ou XHTML 1.0, si vous voulez que vos pages soient valides. Comment réaliser la même chose en CSS?

Nous allons commencer par attribuer une class imageBordure au lien de notre image pour ensuite définir son aspect dans un fichier CSS externe. Ainsi, nous n’aurons qu’à donner le nom de cette class pour chaque lien des images qui devraient avoir une bordure:

<a href="" class="imageBordure"><img src="images/bordure.jpg" width="100" height="100" alt="Exemple" /></a>

En premier lieu, assurons-nous que le background soit réellement transparent pour nos liens sous cette class lorsque le curseur se trouve au-dessus:

1
2
3
a.imageBordure:hover {
background: transparent;
}

Ensuite nous allons définir la bordure des images qui suivent le lien que nous avons défini. Les CSS nous fournissent plus de flexibilité pour le contrôle de l’apparence des bordures autour des images que la méthode ancienne utilisant un attribut border dans l’image elle-même. Dans ce cas, nous allons ajouter un peu d’espace entre la bordure et l’image afin d’avoir un petit effet de cadre avec un padding de 2px. La bordure est aussi d’une épaisseur de 2px.

4
5
6
7
a.imageBordure img {
border: 2px solid green;
padding: 2px;
}

Maintenant on peut choisir la couleur des images qui ont été visitées.

8
9
10
a.imageBordure:visited img {
border: 2px solid black;
}

Et enfin, la couleur de la bordure lorsqu’elle est activée par un clic, ou lorsque le curseur de la souris est au-dessus:

11
12
13
14
a.imageBordure:hover img,
a.imageBordure:active img {
border: 2px solid white;
}

Partager cet article:

  • del.icio.us
  • Facebook
  • StumbleUpon
  • Twitter
  • LinkedIn

Catégories: Graphisme, Programmation web | Aucun commentaire »
Les tags de cet article:

Note: Merci pour vos commentaires, j'apprécie ceux qui partagent leurs avis et leurs expériences de webmestre, ou s'il y a lieu, indiquent une erreur dans mes tutoriels, mais je ne peux évidemment pas faire de support technique pour votre site, alors veuillez éviter d'en faire la demande dans cette section.

Laisser un commentaire