Bordure de 7 pixels, avec un effet de relief standard "outset". L'apparence n'est pas tout à fait la même selon les navigateurs (chacun interprète à sa façon l'instruction "outset").
Bordure de 7 pixels, avec un effet de relief standard "inset". L'apparence n'est pas tout à fait la même selon les navigateurs (chacun interprète à sa façon l'instruction "inset").
Bordure de 7 pixels, avec un effet de relief spécifique. On utilise ici trois bordures imbriquées, qui permettent d'une part d'avoir plus de choix sur l'apparence du relief, et d'autre part de contrôler parfaitement celle-ci, quel que soit le navigateur.
<html>
<head>
<meta http-equiv="content-Type" content="text/html; charset=iso-8859-1"
/>
<style type="text/css">
body {background-color : #C7ABE8;
color :black} /* couleurs du fond de la page et du texte */
.cadre-outset {border: outset yellow 7px} /* encadrement de type standard
outset */
.cadre-inset {border: inset yellow 7px} /* encadrement de type standard
inset */
.bordure1 { /* bordure extérieure de la bordure non-standard */
border-top:solid 2px white ; /* la bordure haute est blanche */
border-left:solid 2px white ; /* la bordure gauche est blanche */
border-right:solid 1px black ; /* la bordure droite est noire */
border-bottom:solid 1px black } /* la bordure basse est noire */
.bordure2 { /* seconde bordure imbriquée */
border:solid 5px yellow} /* cette bordure, la plus épaisse, est
jaune */
.bordure3 { /* 3ième bordure imbriquée (la plus interne)
*/
border-top:solid 1px black ; /* la bordure haute est noire */
border-left:solid 1px black ; /* la bordure gauche est noire */
border-right:solid 1px yellow ; /* la bordure droite est jaune */
border-bottom:solid 1px yellow} /* la bordure basse est jaune */
</style type="text/css">
</head>
<body>
<div class="cadre-outset"> contenu quelconque </div>
<br>
<div class="cadre-inset"> contenu quelconque </div>
<br>
<div class="bordure1"><div class="bordure2"><div
class="bordure3"> <!--imbrication des 3 bordures
-->
contenu quelconque
</div></div></div>
</body>
</html>
COMMENTAIRES
Ce script n'a rien d'extraordinaire.
Mais ayant moi même mis un bon moment pour me rendre compte qu'on pouvait créer des bordures avec des effets de reliefs complètement paramétrables en dehors des effets standards inset et outset, je pense qu'il n'est pas totalement sans intérèt d'indiquer cette possibilité.
Le principe est simple : on crée 2, 3 (ou plus) style de bordures, qu'on imbriquent très simplement les un dans les autres.
C'est un peu plus compliqué que les sempiternels inset ou outset, mais avec 2 avantages :
- on peut créer l'effet que l'on veut de façon très souple.
- Le rendu est le même quel que soit le navigateur, ce qui n'est pas totalement le cas avec inset et outset, ou chaque navigateur interprète la fonction à sa façon.
Ne marche pas très bien avec Netscape 4.7. Passe sans problème dans IE 5.0 et supérieurs, dans les navigateurs Gecko (Mozilla, ...) ou dans Opéra.
Attention, avec Opéra 7.1, j'ai noté un petit bug : si on trouve une balise <p> à l'intérieur du cadre constitué de plusieurs bordures imbriquées, il y a parfois des problèmes d'affichage de ce cadre. Il faut alors redéfinir les margin et padding de <p> comme étant à 0. Cela règle le problème.