Des coins arrondis en CSS… sans images
Une simple technique autorise des angles assez élaborés en utilisant uniquement les propriétés de CSS 2.1
L’engouement actuel pour les boîtes CSS à angles arrondis fait apparaître nombre de techniques requérant l’utilisation de petites images pour simuler cet arrondi.
En effet, seule la spécification CSS3 propose des propriétés pour coins arrondis – plus précisément, border-radius et ses descendants, que l’on trouve dans le document CSS3 Border module.
CSS3 n’est cependant, pour l’heure, qu’un document de travail, et est donc loin d’être implémenté dans les navigateurs d’aujourd’hui. Il faut donc se débrouiller avec la spécification la mieux reconnue à l’heure actuelle, à savoir CSS 2.1.
Le développeur Web Stu Nichols a pris le problème à bras le corps, en proposant avec ses Krazy Korners pas moins de 8 manières d’obtenir autre chose qu’une simple boîte. Sa technique n’utilise aucune image, car elle repose sur une utilisation intelligente des tailles et marges de CSS.
Par exemple, pour un angle à 45°, il utilise simplement 5 balises en ligne (B, en l’occurrence), auxquelles il applique une largeur de 1 pixel pour la bordure, et une marge latérale de 1 à 4 pixels. Cela créé l’illusion de 4 pixels partant de la bordure latérale pour rejoindre la bordure supérieure – celle-ci étant en fait la 5e balise B.
Détail des angles :
Et le code :
===================================
<style type="text/css">
/* Largeur totale de la boite */
.AngleRond {
width:400px;
background-color:transparent;
}
/* définition des pixels d’angles */
.AngleRond .pix1, .AngleRond .pix2, .AngleRond .pix3, .AngleRond .pix4, .AngleRond .pix5 {
display:block;
overflow:hidden;
height:1px;
border-left:1px solid #000;
border-right:1px solid #000;
background:#eca;
}
.AngleRond .pix1 {margin:0 5px; background:#000;}
.AngleRond .pix2 {margin:0 4px;}
.AngleRond .pix3 {margin:0 3px;}
.AngleRond .pix4 {margin:0 2px;}
.AngleRond .pix5 {margin:0 1px;}
/* soit au total : 14px de décalage latéral (2*5px + les bordures) */
/* calque de contenu de la boite */
.AngleRond .contenu {
background:#eca;
border-left: 1px solid #000;
border-right: 1px solid #000;
padding: 5px;
/* largeur: calque AngleRond – 14px (décalage latéral) */
width:386px;
/* centrage du calque de contenu */
margin: 0 auto 0 auto;
}
</style>
===================================
et ces styles sont à appliquer au calque "AngleRond" ainsi :
===================================
<div class="AngleRond">
<b class="pix1"></b>
<b class="pix2"></b>
<b class="pix3"></b>
<b class="pix4"></b>
<div class="contenu"> avec bordure … </div>
<b class="pix4"></b>
<b class="pix3"></b>
<b class="pix2"></b>
<b class="pix1"></b>
</div>
===================================
Ce qui donne :
(remplacez #000 par #FFF)
Pour affiner la chose, il reste possible de créer des effets d’ombre en appliquant une couleur blanche uniquement à la bordure de gauche par exemple…
Puissant, non ?
oui, oui… tu as raison pour la sémantique
ça date de 2006 :] mais ça marche toujours …
C’est ce genre de codes qu’il faut à tout prix bannir. Aucun respect de la sémantique. Des balises "b" qui n’ont pas leur place.
:)) quelle idée géniale ! Il fallait vraiment y penser ! Je vais tester la chose
:[ lool lool lool lool lool lool
… demande a la hotline ! pas ici
Quelqu’un pourrait me dire comment faire une bordure de couleur sur une <div> qui a des coins arrondis avec Nifty Corners?
intéressant comme technique, mais c’est chaud pour ajuster la largeur du cadre au contenu dynamique qu’il contient…
j’essaye d’implémenter une infobulle à coins arrondis pour une carte googlemap…
Pfiouff !!!
ça en fait des éléments vides je trouve…
Drôle de destin pour les css que de pourrir à ce point le code html, non ?
Merci Cedric, exact
Un petit plus (pas grand chose): il est posisble de rajouter une DIV interne à la div "contenu" afin d’y placer le texte, de la mettre en position:relative et de la remonter de quelques pixel, histoire que le texte commence en haut de la boite. Et pour éviter d’avoir un espace vide en dessous (puisque l’espace de cette div reste reservé dans le flux…) on place un margin-bottom négatif pour éliminer cette espace.
<div style="position: relative; top: -10px; margin-bottom: -16px;">avec bordure … <br>test<br>test</div>
oui, pas mal ntfy corner (pour ceux qui cherchent, c’est là : http://www.html.it/articoli/niftycube/index.html)
mais c’est plus lourd en code, et surtout c’est du javascript… tu desactives, et pof, plus rien :[ !
Alors que cette technique, c’est du CSS pur beurre
:)) Intéressant comme technique ! tu connais aussi nifty corners, non ? ça permet de faire des coins arrondis sympa aussi ^^