Bonjours à toutes et tous
Voilà un sujet qui a fait couler beaucoup d’encre parce qu’il est coriace: les fameux coins arrondis. J’ai essayé je crois toutes les solutions possibles, les div imbriquées, des bidouilles avec les différentes balises, et le niftycube. Mais aucune jusque là ne m’a convaincu, les div imbriqués, si les cadres sont extensibles, ça fait quand même 3div de plus par block et c’est super lourd à maintenir, il suffit d'en effacer une et tout votre site par en vrille. moz-radius pour firefox + NiftyCube pour IE, c’est pas mal mais il y a toujours un moment ou NiftyCube à des comportements étranges.
Un beau jour enfin je suis tombé sur cet article:
http://www.sitepoint.com/article/rounded-corners-css-javascript de Simon Willison (qui écrit d’ailleurs de supers articles pour ceux qui veulent utiliser javascript intelligemment) et là ce fut la lumière. En fait c’est un petit script qui crée 4 div imbriquées pour le prix d’une, chacune avec ça class, du coup il suffit de mettre un petit gif rond pour chacun de coins et le tour et joué.
Le javascript:
le css:
Et le plus beau le html:
Il y trois points qui me plaisent beaucoup dans cette solution:
le premier c’est que il y a rien à rajouter dans le code html
le deuxieme c’est que sachant que dans le futur on aurat des proprietées css3 background-image-left qui permettrons de mettre des images dans chaque coins, ça reprend la même logique, du coup on peut faire autres chose que des coins arrondis, par exemple des coins dégradés, bisotés ou avec des fleurs et arabesques, c'est un peu comme une avant-premiére.
le dernier point c’est que l’on peut ecrire la feuille de style de tel maniére que sans le javascript ça soit juste carré sans autre probléme particulier. Bref comme je trouve ça génial je voudrais savoir si d’autres partagent mon emerveillement ou si depuis le temps que je me prend la tête avec les coins arrondis, je suis passé à coté d’un solution encore plus simple.
Si vous voulez voir un exemple vous pouvez voir sur cette page
http://www.floreslibres.org/-Quienes-somos-.html
Pour ce site en question ce n’est pas forcement justifier car le design n’est pas flexible pour l’instant, comme avant j’utiliser des divs imbriqués je m’était simplifier la vie. Avec la sortie de tout ces merveilleux nouveaux écrans de 1400px, je trouve que faire des designs flexibles reprend tout son sens, donc je crois que je vais abuser de cette solution (à moins que l’un d’entre vous me décourage definitivement).
Merci d’avoir eu la patience de lire jusque là et de vos avis éclairés
Note:si vous copier le javascript il faut enlever les * des [i*] (bbcode
)
EDIT par Felipe: plus la peine, j'ai remplacé i par ii
Modifié par Felipe (09 Nov 2006 - 10:54)
Voilà un sujet qui a fait couler beaucoup d’encre parce qu’il est coriace: les fameux coins arrondis. J’ai essayé je crois toutes les solutions possibles, les div imbriquées, des bidouilles avec les différentes balises, et le niftycube. Mais aucune jusque là ne m’a convaincu, les div imbriqués, si les cadres sont extensibles, ça fait quand même 3div de plus par block et c’est super lourd à maintenir, il suffit d'en effacer une et tout votre site par en vrille. moz-radius pour firefox + NiftyCube pour IE, c’est pas mal mais il y a toujours un moment ou NiftyCube à des comportements étranges.
Un beau jour enfin je suis tombé sur cet article:
http://www.sitepoint.com/article/rounded-corners-css-javascript de Simon Willison (qui écrit d’ailleurs de supers articles pour ceux qui veulent utiliser javascript intelligemment) et là ce fut la lumière. En fait c’est un petit script qui crée 4 div imbriquées pour le prix d’une, chacune avec ça class, du coup il suffit de mettre un petit gif rond pour chacun de coins et le tour et joué.
Le javascript:
function roundedCorners() {
var divs = document.getElementsByTagName('div');
var rounded = [];
for (var ii = 0; ii < divs.length; ii++) {
if (/\brounded\b/.exec(divs[ii].className)) {
rounded[rounded.length] = divs[ii];}}
for (var ii = 0; ii < rounded.length; ii++) {
var original = rounded[ii];
original.className = original.className.replace('rounded', 'corners_bl');
var tr = document.createElement('div');
tr.className = ' corners_tr';
original.parentNode.replaceChild(tr, original);
var tl = document.createElement('div');
tl.className = 'corners_tl';
var br = document.createElement('div');
br.className = ' corners_br';
tr.appendChild(tl);
tl.appendChild(br);
br.appendChild(original);}
}
le css:
.rounded, .corners_tr {#color};
.corners_tr {background-image: url(corner/tr.gif);
background-repeat:no-repeat;
background-position: top right;}
.corners_bl {background: url(corner/bl.gif) no-repeat bottom left;}
.corners_tl {background: url(corner/tl.gif) no-repeat top left;}
.corners_br {background: url(corner/br.gif) no-repeat bottom right;}
Et le plus beau le html:
<div class="rounded">content</div>
Il y trois points qui me plaisent beaucoup dans cette solution:
le premier c’est que il y a rien à rajouter dans le code html
le deuxieme c’est que sachant que dans le futur on aurat des proprietées css3 background-image-left qui permettrons de mettre des images dans chaque coins, ça reprend la même logique, du coup on peut faire autres chose que des coins arrondis, par exemple des coins dégradés, bisotés ou avec des fleurs et arabesques, c'est un peu comme une avant-premiére.
le dernier point c’est que l’on peut ecrire la feuille de style de tel maniére que sans le javascript ça soit juste carré sans autre probléme particulier. Bref comme je trouve ça génial je voudrais savoir si d’autres partagent mon emerveillement ou si depuis le temps que je me prend la tête avec les coins arrondis, je suis passé à coté d’un solution encore plus simple.
Si vous voulez voir un exemple vous pouvez voir sur cette page
http://www.floreslibres.org/-Quienes-somos-.html
Pour ce site en question ce n’est pas forcement justifier car le design n’est pas flexible pour l’instant, comme avant j’utiliser des divs imbriqués je m’était simplifier la vie. Avec la sortie de tout ces merveilleux nouveaux écrans de 1400px, je trouve que faire des designs flexibles reprend tout son sens, donc je crois que je vais abuser de cette solution (à moins que l’un d’entre vous me décourage definitivement).
Merci d’avoir eu la patience de lire jusque là et de vos avis éclairés
Note:si vous copier le javascript il faut enlever les * des [i*] (bbcode
) EDIT par Felipe: plus la peine, j'ai remplacé i par ii
Modifié par Felipe (09 Nov 2006 - 10:54)
...), la question n'est pas de savoir si on a ce type de forme dans notre code source mais bien de savoir dans quelle perception du document on peut bien être enfermé pour que cette forme ne soit pas présente.