Comment réaliser un rectangle à coins arrondis sans images ?

Gemmenco · 12-08-2010 10:16:47

Bonjour,

J'ai essayé de faire une recherche qui me permette de faire un rectangle à coins arrondis sans devoir passer par l'ancien tableau à 9 cellules avec (4 images).

Ce que je cherche : Une solution plus rapide qui permette de conserver la transparence du fond de mes arrondis. Que je puisse facilement en faire qu'un ou plusieurs arrondis à mon rectangle.
Enfin, que cette technique soit bien entendu par les principaux navigateurs

Ce que j'ai déjà trouvé :
- une solution automatique mais qui multiplie les div et qui fonctionne encore avec des images png : http://www.roundedcornr.com/
- chez alsacreation, le code "border-radius" idéal en théorie mais il ne fonctionne pas sur... Explorer 8 !!!
- Le script Roundies.js, assez laborieux à mettre en place et destiné à... Explorer 8 !!!
... et il y a les extensions .htc pour Internet Explorer mais si les arrondis réguliers fonctionnent, impossible de varier (ou de supprimer) des arrondis d'un même rectangle (bug uniquement dans Explorer 8 !!!)

Encore une galère html ???:rolleyes:

Jc · 12-08-2010 11:31:53

Bonjour,

Comme tu l'as si justement fait remarquer, en attendant que la nouvelle norme CSS3 soit implémentée et opérationnelle dans tous les navigateurs, tu es obligé en attendant, de passer par une seule image que tu places via feuille de style en background d'une div (plus rapide à l'affichage et moins gourmand en ressources). Par contre en faisant ainsi, ton image ne se verra pas à l'impression.

++

jcnconsultant · 15-09-2010 15:57:54

Gemmenco bonjour,
Voilà un site, en anglais, qui te permettra de réaliser des coins arrondis simplement : http://www.curvycorners.net/
Ca fonctionne sous IE6, IE7, IE8, Firefox, Google Chrome et safari.
Ca utilise du CSS et du Javascript pour effectuer des simulations sur les browsers non compatibles.
Je l'utilise sur nombre de mes sites.

Bon courage.
Bien cordialement.
Jean-Claude l'ancien

Dernière modification par jcnconsultant (15-09-2010 15:58:58)

Gemmenco · 15-09-2010 16:02:11

Merci, à voir si cette solution permet de maîtriser l'arrondi de chaque angle...

jcnconsultant · 15-09-2010 16:04:38

Re-bonjour,

Oui Gemmenco cette solution permet de choisir les coins à arrondir...
Il y a de nombreux exemples sur le site...

Jean-Claude l'ancien

Dernière modification par jcnconsultant (15-09-2010 16:05:16)

Gemmenco · 15-09-2010 16:22:08

Ce serait pas mal sur Explorer 6, ma solution actuelle ne couvre pas cette version.
Maintenant en JS, je n'y connais pas grand chose, comment appelé cette fonction js dans l'ID qui définit mon cadre...

xTG · 15-09-2010 16:48:40

La fonction donnée par la documentation est une onload, donc elle s'exécute d'elle même au chargement de la page.
Si ce n'est pas celle là que tu utilises va faire un tour sur la page instructions à la section "Using CurvyCorners manually".

Gemmenco · 15-09-2010 17:04:45

Je reconnais que je n'ai pas eu le temps d'éplucher le tuto en anglais mais je vais m'y pencher
Merci

PHP|Débutant :: Forums

Advertisement

#1 12-08-2010 10:16:47

Comment réaliser un rectangle à coins arrondis sans images ?

#2 12-08-2010 11:31:53

Re : Comment réaliser un rectangle à coins arrondis sans images ?

#3 15-09-2010 15:57:54

Re : Comment réaliser un rectangle à coins arrondis sans images ?

#4 15-09-2010 16:02:11

Re : Comment réaliser un rectangle à coins arrondis sans images ?

#5 15-09-2010 16:04:38

Re : Comment réaliser un rectangle à coins arrondis sans images ?

#6 15-09-2010 16:22:08

Re : Comment réaliser un rectangle à coins arrondis sans images ?

#7 15-09-2010 16:48:40

Re : Comment réaliser un rectangle à coins arrondis sans images ?

#8 15-09-2010 17:04:45

Re : Comment réaliser un rectangle à coins arrondis sans images ?

Pied de page des forums