Forum

Réagissez dans les forums de JDN Développeurs

Nous allons voir ici comment encadrer une image d'une bordure elle-même composée d'une image, les deux n'étant pas liées, ce uniquement par le biais d'une feuille de style. Mais beaucoup d'autres opérations sont possibles en CSS dans ce domaine, comme modifier l'image d'un bouton input en CSS.

Partant d'une image affichée simplement (balise img avec attributs src, width, height et alt classiques), il suffit de peu de modifications du code HTML pour mettre en place nos règles CSS. Tout d'abord, il faut assigner une classe à notre balise d'image : image.
Ensuite, il faut encadrer notre image d'une balise div, à laquelle on assigne la classe cadre. Partant de là, tout le travail se fait en CSS.

La classe image nous permet d'appliquer une marge (ici de 10 pixels) dans laquelle viendra se placer le cadre. Nous en profitons pour ajouter un aspect de cadre à l'image, avec la propriété inset de border… Enfin, si l'image est transparente, il faut assigner une couleur au background, sans quoi l'image utilisée pour le cadre s'affichera sous l'image principale.

La classe cadre, enfin, affiche en fond (background) l'image avec laquelle nous voulons encadrer notre image principale. Nous définissons ensuite la largeur du cadre, qui inclut les diverses bordures. Ainsi, avec une image de 174 pixels de large et ayant une bordure de 5 pixels de chaque côté, le tout entouré d'un cadre contenu dans une marge de 10 pixels, nous obtenons 10 + 5 + 304 + 5+ 10 = 334 . Pour aller avec la bordure inset, enfin, nous utilisons ici une bordure outset.

Le code
<style>
.image {
  margin: 10px;
  border: 5px inset #987654;
  background: white;
  }
.cadre {
  background: #555555 url(http://www.journaldunet.com/image/newsletter/fond.gif);
  border: 5px outset #987654;
  width: 334px;
  }
</style>