|
Forum |
|
Réagissez
dans les forums de JDN Développeurs
|
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 (reste à savoir comment Internet
Explorer supporte border-radius).
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.
.angle .b1, .angle .b2, .angle .b3, .angle .b4, .angle
.b5 {
display:block;
overflow:hidden;
height:1px;
background:#eca;
border-left:1px solid #000;
border-right:1px solid #000;
}
.angle .b1 {margin:0 5px; background:#000;}
.angle .b2 {margin:0 4px;}
.angle .b3 {margin:0 3px;}
.angle .b4 {margin:0 2px;}
.angle .b5 {margin:0 1px;}
Les meilleures astuces CSS sur le JDN :
- Comment
appliquer les CSS d'une page web au contenu d'une iframe ?
- Comment
centrer horizontalement une DIV dans une autre en CSS ?
- Comment
créer un arrière-plan (backgroud) CSS extensible et adaptable ?
- Comment
définir les cellpadding et cellspacing en CSS ?
- Comment
modifier l'image d'un bouton input en CSS ?
- Comment
rendre l'arrière-plan d'un élément semi-transparent en conservant le texte de
cet élément opaque en CSS ? |