Les bordures sous toutes les coutures
Comme vous avez déjà eu l'occasion de le voir dans d'autres exposés, la technique des feuilles de style permet une approche graphique allant bien au delà de la simple écriture. Au moyen des différentes polices de caractères, il est possible d'habiller, en quelque sorte, les textes avec une certaine fantaisie. Qu'il s'agisse de couleurs, d'effets d'ombrage et même parfois de véritables petits dessins (webdings, wingdings, etc), la palette des choix est assez large.
L'utilisation des bordures, propriétés issues de la familles des "boîtes" ou calques et blocs de données (voir les Principales familles de propriétés), permet d'aller plus loin dans l'amélioration des présentations
Il n'est sans doute pas inutile de faire le tour de toutes les possibilités de cette "petite règle bien pratique" que vous pourrez mettre en oeuvre afin d'ajouter une touche personnalisée à vos réalisations. C'est la raison d'être de cette page. Vous y trouverez toutes les possibilités actuelles : exemples et règles de style.
1 - L'utilisation des couleurs, unies ou multiples grâce à la séparation des propriétés en 4 : les bords gauche, droit, de sommet et de base dans un calque :
<div class="bord" style="border:3px solid;"></div>
<div class="bord" style="border:3px solid red;"></div>
<div class="bord" style="border:3px solid blue;"></div>
2 - Les différentes valeurs permettant l'incrustation ou le relief, avec ou sans ombrage, avec ou sans couleur :
<div class="bord" style="border:3px inset;"></div>
<div class="bord" style="border:3px fuchsia inset;"></div>
<div class="bord" style="border:3px groove;"></div>
<div class="bord" style="border:3px fuchsia groove;"></div>
<div class="bord" style="border:3px outset;"></div>
<div class="bord" style="border:3px fuchsia outset;"></div>
<div class="bord" style="border:3px ridge;"></div>
<div class="bord" style="border:3px fuchsia ridge;"></div>
3 - L'utilisation de pointillés ou de traits, avec ou sans couleur (valeur par défaut) :
<div class="bord" style="border:3px dashed;"></div>
<div class="bord" style="border:3px blue dashed;"></div>
<div class="bord" style="border:3px dotted;"></div>
<div class="bord" style="border:3px red dotted;"></div>
4 - Le double trait, ultime possibilité :
<div class="bord" style="border:3px double;"></div>
<div class="bord" style="border:3px double red;"></div>
<div class="bord" style="border:3px double blue;"></div>
Les règles propres à tous les exemples précités sont intégrées dans la
classe "bord" à laquelle il est fait appel à l'ouverture de chacune des
boîtes. Pour information, celles-ci sont :
{ float : left ; width : 31px ;
height : 31px ; background : white ; }
A vous de créer vos propres règles de dimensionnement, en fonction de vos besoins. Soyez créatif ...
Vous serez peut-être surpris de l'utilisation de la propriété "générique" border plutôt qu'accompagnée d'un de ses trois attributs complémentaires : color, width et style. Il est vrai qu'il serait intéressant de pouvoir les régler séparément et disposer ainsi de bien d'autres possibilités ... N'essayez pas : ce serait peine perdue. Ces combinaisons ne sont pas disponibles dans la version actuelle des FDS. Il est une autre frustration dans CSS2 : l'attribution de valeurs limitées aux seules lignes droites. Il semble toutefois que CSS3 sera en mesure d'offrir d'autres possibilités, notamment celles permettant la mise en oeuvre de boîtes aux coins arrondis. Certaines propriétés, telles border-radius et opacity, sont déjà prévues ; mieux : la dernière est déjà implémentée dans la version 1.7b du navigateur Mozilla. Il restera l'éternel problème de l'implémentation de celles-ci dans certains navigateurs désormais préhistoriques eux aussi ... Vous aurez compris que Internet Exploser 5 à 6 (ne parlons pas des précédents !) en font partie depuis le développement impressionnant du butineur à l'emblême de lézard.
