André Willemijns WebSite
Tutorial : bords arrondis sans image
le 25 octobre 2007
Le dessin ci-dessous nous montre la technique utilisée.
D'abord nous avons réalisé un bord arrondi avec Photoshop Elements (Fig 1) et nous avons recherché la manière de reproduire ce bord arrondi avec des éléments de hauteur de 1 pixel (Fig 2).
Ainsi nous voyons que nous avons besoin de :
- 1 ligne de 1px de hauteur avec un retrait aux extrémités de 5 pixels
- 1 ligne de 1px de hauteur avec un retrait aux extrémités de 3 pixels
- 1 ligne de 1px de hauteur avec un retrait aux extrémités de 2 pixels
- 2 ligne de 1px de hauteur avec un retrait aux extrémités de 1 pixels
| D'abord nous réalisons une boîte de la couleur du fond, ici représentée à l'intérieur de la bordure grise | |
| Puis nous plaçons notre titre | Ici votre titre |
| Puis notre texte, ainsi le contenu de la boîte est réalisé | Ici votre titreIci votre texte |
| Toujours à l'intérieur de notre contenu nous plaçons, deux boîtes, l'une au-dessus et l'autre au-dessous. Ces boîtes doivent avoir la même couleur de fond que la page web, elles sont destinées à recevoir les éléments qui vont traçer les rayons |
Ici votre titreIci votre texte |
| Nous pouvons placer à l'intérieur de ces boîtes le rayon extérieur, d'une hauteur de 1 pixels avec une marge à droite et à gauche de 5 pixels. La couleur de cet élément doit être identique à celle du contenu Pour fixer la hauteur de 1 pixel, nous utilisons le code CSS overflow: hidden |
Ici votre titreIci votre texte |
| Nous plaçons ici la seconde partie qui fera le rayon, toujours 1 pixels de haut mais des marges de 3 pixels | Ici votre titreIci votre texte |
| Le troisième éléments est toujours de 1 pixel de hauteur mais les marges sont de 2 pixels | Ici votre titreIci votre texte |
| Le quatrième élément est toujours de 1 pixels avec des marges de 1 pixels | Ici votre titreIci votre texte |
| Le cinquième élément est identique au quatrième afin d'obtenir une hauteur de 2 pixels et avoir la symétrie avec la partie veticale | Ici votre titreIci votre texte |
| Dans la réalité tous les éléments de 1 pixels font que la hauteur des boîtes haut et bas sont d'une hauteur de 5 pixels | Ici votre titreIci votre texte |
| Et voila le résultat, le rayon est ici pour la conpréhention de la technique volontairement augmenté. | Ici votre titreIci votre texte |
Le résultat obtenu est basé sur les informations trouver sur le web, notamment :
- Le site Nifty Corners : rounded corners without images, le document de base.
- Le très beau et intéressant CSS play à voir absolument
- Le générateur de bords arrondis Spiffy Corners où vous rentrez les informations demandées et les codes XHTML et CSS sont fournis
Bords arrondis sans image
le 25 octobre 2007
1 fond d'une couleur et pas de bordure
Nous utilisons ici les codes de base
Code XHTML
<div class="boxcode"> <b class="codetop"> <b class="lg1"></b> <b class="lg2"></b> <b class="lg3"></b> <b class="lg4"></b> <b class="lg4"></b></b> <h1 style="color: white; background: transparent;padding: 5px; font-size: 150%;"> <!-- Votre titre --></h1> <p><!-- Votre texte --></p> <b class="codebottom"> <b class="lg4"></b> <b class="lg4"></b> <b class="lg3"></b> <b class="lg2"></b> <b class="lg1"></b></b> </div>
Code CSS
.boxcode { /* boîte extérieur a customiser si necessaire */
margin: 20px auto;
width: 100%;
background: #ffd0a8;
}
b.codetop, b.codebottom {display: block; background: #fffff0; }
b.codetop b, b.codebottom b {display: block;
height: 1px; overflow: hidden;background: #ffd0a8; }
b.lg1 {margin: 0 5px;} /* détermination des retraits qui forment les rayons */
b.lg2 {margin: 0 3px;}
b.lg3 {margin: 0 2px;}
b.lg4 {margin: 0 1px;}
.boxcode h1,.boxcode h2,.boxcode p {margin: 0 10px;} /* format titre */
.boxcode h1 {font-size: 150%;color: #fff6f4; margin: 0;
padding: 0 10px 10px 10px;}
.boxcode p {padding-bottom:1em; padding-left: 10px;} /* format contenu */
/* format sous titre éventuel */
.boxcode h2{font-size: 120%;color: green; padding-top: 0.3em;}