28173 sujets

CSS et mise en forme, CSS3

Coins arrondis : bilan des solutions

Bonjour à tous,

Je cherche à faire comme beaucoup (si on en croit le nombre de topics sur le sujet) des coins arrondis. Il existe de nombreuses solutions mais elles ont toutes des contraintes.

- Mettre une image à coins arrondis en background. Inconvénient : poids & non-vectoriel.

- Utiliser javascript (comme le célèbre NiftyCorners). Inconvénient : ne réalise pas de bordures, résultat peu esthétique pour les arrondis importants (aliasing), quelques problèmes d'incompabilités cross-browsers. Ne fonctionne pas chez les gens qui n'ont pas activé JS.

- Faire 1 div qui en contient une autre. J'ai vu cette méthode sur le forum je crois, elle consistait à créer une div l'une dans l'autre en les alignant de chaque extrémité et en mettant en background soit le côté gauche soit le coté droit. Cela évite d'avoir une même image, mais juste les morceaux de coins arrondis. Inconvénient : solution peu sémantique et non-vectoriel.

- Utiliser un tableau de 9 cases avec 1 image d'angle dans les cases des extrémités. Inconvénient : solution peu sémantique.

- Propriété CSS Mozilla. Inconvénient : n'est pas cross-browsers

Quand je parle de vectoriel, cela signifie que si la personne augmente la taille du texte, l'aspect arrondi ne suivra pas ou le résultat sera horrible.

Je voudrais savoir si quelqu'un a une autre solution qui soit cross-browsers, sémantique et permette la proportionalité. Egalement que le rendu soit propre sans aliasing. La solution javascript me paraissait la plus prometteuse, mais à l'essai elle ne l'est clairement pas. Ensuite il y a la solution tableau qui permet de s'agrandir sans aucun problème, mais sémantiquement ça ne passe pas.

La vraie solution aurait été de mettre une image en background au format SVG (format d'image vectoriel). Malheureusement c'est un format qui n'est supporté que par les plus récénts navigateurs.

Quelqu'un a-t-il donc une autre solution en attendant CSS3 ?
Modifié par Alexandre Le Guyader (24 Jul 2006 - 13:14)
Tout d'abord merci Raphael pour l'accueil et la rapidité de ta réponse.

J'ai feuilleté tes liens et apparemment pour l'instant aucune "technique ultime" n'a pointé le bout de son nez. J'ai l'impression que la solution se trouve du côté javascript pour conserver la sémantique et la propreté du xHTML, me trompe-je ?

Certains d'entre-vous ont-ils des alternatives à NiftyCorners ?

Merci d'avance.
Alexandre Le Guyader a écrit :
Bonjour à tous,
Faire 1 div qui en contient une autre. J'ai vu cette méthode sur le forum je crois, elle consistait à créer une div l'une dans l'autre en les alignant de chaque extrémité et en mettant en background soit le côté gauche soit le coté droit. Cela évite d'avoir une même image, mais juste les morceaux de coins arrondis. Inconvénient : solution peu sémantique et non-vectoriel.


personnellement j'utilise plutot les méthode dans ce genre là.

tu crée un conteneur
dans ce conteneur tu creer trois <div> "haut de page", "corps" et "bas de page" avec en haut et bas de page tes images sur toute la largeur avec les coins arondi
tu ajuste la hauteur de tes div haut et bas à la hauteur de l'image. et tu mets une div "corps" qui s'etire verticalement avec un fond tres fin pour tes bordures tes bordures que tu répète verticalement.

ca donne à un niveau tres basique ce genre de choses: ca reste très simple et c'est à mon avis la solution la plus convenable au niveau sémantique , c'est en tout cas celle que j'utilise.

l'inconvénient est le poids comme tu le dit mais avec des images bien optimisé ca ne me parait pas excessif...


<style type="text/css">
#conteneur{
	width:800px;
}
#haut page{
	background-image:url(haut.png);
	height:50px;
	}
#corps{
	background-image:url(corps.png);
	background-repeat:repeat-y;
}
#bas-page{
	background-image:url(bas.png);
	height:50px;
}
</style>

<div id="conteneur>

	<div id ="haut-page>
	<!--tu peux evetnuellement mettre des liens d'évitement ou autre pour remplir le blocs et donner une valeur sémantique a ton bloc -->
	</div>
	
	<div id="corps">
	<!--tu peu mettre d'autres bloc avec le fond aligné a droite ou a gauche avec la propriété background position -->
	</div>
	
	<div id="bas-page">
	<!--tu peux eventuellement mettre les mentions légales pour donner une valeur sémantique a ton bloc -->
	</div>
</div>
Mais sémantiquement ça n'a aucun sens d'utiliser la balise b qui permet de définir une typographie en gras.
De plus je ne crois pas que Nifty Corners utilise cette méthode, la méthode utilisée me semble plutôt être celle de la bordure arrondie en plaçant chaque pixel avec une définition CSS.
Modifié par Alexandre Le Guyader (25 Jul 2006 - 09:24)
aurelien38 a écrit :


personnellement j'utilise plutot les méthode dans ce genre là.

tu crée un conteneur
dans ce conteneur tu creer trois <div> "haut de page", "corps" et "bas de page" avec en haut et bas de page tes images sur toute la largeur avec les coins arondi
tu ajuste la hauteur de tes div haut et bas à la hauteur de l'image. et tu mets une div "corps" qui s'etire verticalement avec un fond tres fin pour tes bordures tes bordures que tu répète verticalement.


Oui donc ce n'est pas proportionnel, ça s'agrandit uniquement dans la hauteur... Smiley decu
Bon finalement je crois avoir trouvé la meilleure solution, je vais la tester et voir ce que ça donne. Je donne quand même l'url : http://www.ruzee.com/blog/ruzeeborders

Cette URL était dans une des adresses que Raphaël a donné (merci encore à lui au passage).

Edit : Arg, suis-je maudit ?

1/ les fond image (1x1 pour avoir une couleur spéciale) ne fonctionnent pas.
2/ sous IE, les paddings sont littéralement mangés....

Pour le premier d'accord, mais le second, n'y a-t-il pas une solution ?
Modifié par Alexandre Le Guyader (25 Jul 2006 - 11:29)
Sujet clos
Aller à