Amusons nous avec les bordures

Publié le par Francisek

En HTML/CSS, on peut aisément habiller des blocs avec des bordures de couleur grâce aux propriétés CSS de la famille border, mais ces bordures exclusiviment de forme rectiligne horizontale ou verticale. Exclusivement? Pas tout à fait, car si on examine de plus près les styles de bordure inset / outset, on s'aperçoit que la petite partie à l'intersection de deux bordures est oblique.
Nous pouvons donc exploiter cette particularité afin de dessiner des formes obliques.
L'utilité de cette technique est bien limitée puisqu'elle ne s'appliquera pratiquement jamais à un design.
C'est donc pour le fun, que je vous livre quelques essais.

Les carreaux

Nous pouvons, par une alternance de blocs à bordure solide correctement définie, obtenir un joli pavé carrelé:
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Comment est-ce réalisé ? Nous créons un cadre avec une largeur et une hauteur définies en pixels (ici 300) dans lequel non insérons des blocs carrés flottants sans overflow de 50px de coté avec un style alterné. Le style de chaque bloc se contente de définir deux bordures perpendiculaires.
Le code HTML de ce carrelage:
<style type="text/css">
.b1,.b2,.b3,.b4{
overflow:hidden;
width:0;
height:0;
float:left;
}
.b1{
border-left:solid #ffc 50px;
border-top:solid #000 50px;
}
.b2{
border-left:solid #000 50px;
border-bottom:solid #ffc 50px;
}
.b3{
border-left:solid #ffc 50px;
border-bottom:solid #000 50px;
}
.b4{
border-left:solid #000 50px;
border-top:solid #ffc 50px;
}
* html .b1, * html .b2, * html .b3, * html .b4 {width:50px;height:50px;w\idth:0;he\ight:0;}
</style>
<div style="width:300px;height:300px;background-color:#fff;margin:1em auto;border:outset 5px;">
    <div style="" class="b1"></div>
    <div style="" class="b2"></div>
    <div class="b1"></div>
    <div class="b2"></div>
    <div class="b1"></div>
    <div class="b2"></div>

    <div class="b3"></div>
    <div class="b4"></div>
    <div class="b3"></div>
    <div class="b4"></div>
    <div class="b3"></div>
    <div class="b4"></div>

    <div class="b1"></div>
    <div class="b2"></div>
    <div class="b1"></div>
    <div class="b2"></div>
    <div class="b1"></div>
    <div class="b2"></div>

    <div class="b3"></div>
    <div class="b4"></div>
    <div class="b3"></div>
    <div class="b4"></div>
    <div class="b3"></div>
    <div class="b4"></div>

    <div class="b1"></div>
    <div class="b2"></div>
    <div class="b1"></div>
    <div class="b2"></div>
    <div class="b1"></div>
    <div class="b2"></div>

    <div class="b3"></div>
    <div class="b4"></div>
    <div class="b3"></div>
    <div class="b4"></div>
    <div class="b3"></div>
    <div class="b4"></div>
</div>

Des vagues

Nous pouvons, en changeant simplement le CSS, obtenir un effet de vagues, comme dans l'exemple suivant:
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Absolument inutile, ce point méconnu du CSS nécessitait d'être souligné !!
(NB : Comme toujours, IE n'apprécie pas qu'on exploite le CSS trop intensément et donne un résultat médiocre, surtout lors de l'utilisation de bordures non solides).

Publié dans CSS et Design

Commenter cet article

chiffonnette 22/08/2006 22:33

coucou
j'ai besoin d'aide dans la page d'accueil de mon blog , dans l'entête il y a un tableau je voudrais mettre les traits en vert j'arrive à mettre ceux des modules mais il reste ceux du cadre du tableau qui sont en rouge et je n'arrive pas à les changer ! regarde sur cette page , il y a l'entête et dans l'article aussi :http://chiffonnette.over-blog.com/article-3599969-6.html
A l'avance Merci
chiffonnette

Francisek 23/08/2006 23:21

 Pour changer d'un coup les bordure de tes tableaux, tu peux ajouter ceci au CSS:.tableauVert,.tableauVert td{border:solid #090;}Il tu n'a plus ensuite qu'à donner le nom de classe tableauVert à chacun des tableau qui doivent avoir une bordure verte. L'avantage, c'est qu'il te suffit de changer le style une fois dans le CSS pour que ça s'applique partout !!

lory 26/06/2006 14:04

si j'arrivais à faire juste un 50ième de ce que tu fait....

Francisek 26/06/2006 15:03

 Chacun son truc. Bon je me débrouille un peu en cuisine, mais certainement pas autant que toi ...

sugi 26/06/2006 10:48

Moi je trouve ça remarquable tous ce qu'on peux faire avec le CSS :-)
Moi je dis chapeau l'artiste..sisi j'insiste c'est de l'art ce que tu as fait ^o^

Biz et bonne semaine Francis! :-)
sugi la fourmiz

Le testeur 25/06/2006 01:17

oula , les temps sont dur , je sens que les vacances s'approchent la ;)!
Mais pas de médisance, je suis sur que certaine personne s'en serviront dans leur blog!