28234 sujets

CSS et mise en forme, CSS3

Cadre arrondi

Bonjour,

J'utilise la méthode d'alsacréation "cadre élastique dans les deux dimensions" identique à quelque chose près à celle-çi : En utilisant les positions relatives

Mais quelque chose m'échappe.
Mon background du body est Rouge.
L'intérieur du cadre est Vert.
Mes 4 images de coins arrondis sont Vert et le reste Blanc.
J'obtiens alors un cadre avec des angles Vert et des bouts de Blanc à cause de mon body qui n'est pas blanc.
On peut penser à mettre mes coins arrondis en Vert et le reste transparent, mais là j'obtiens un cadrea complètement carré tout Vert car derrière le transparent s'affiche au final l'intérieur du cadre qui est Vert!

Savez-vous comment faire si on a un body de couleur et non blanc ?
Modifié par danae (20 Sep 2006 - 16:35)
danae a écrit :
Mes 4 images de coins arrondis sont Vert et le reste Blanc.
J'obtiens alors un cadre avec des angles Vert et des bouts de Blanc à cause de mon body qui n'est pas blanc.

Faire des images de coins arrondis verts sur fond rouge ? Smiley sweatdrop

Sinon, un exemple en ligne ou une capture d'écran ne seraient pas de refus.
mpop a écrit :
un exemple en ligne ou une capture d'écran ne seraient pas de refus.

Ok, voici:
Un exemple de mon problème (ne pas faire attention au design Smiley confused ) :
Exemple
Sur mon exemple seul le bord en bas à droite possède du transparent, les 3 autres ont du blanc!
Salut danae,
J'aurais tendance à dire que si tu veux faire disparaitre les coins blancs pour qu'ils semblent être transparents, la meilleure chose à faire serait de leur donner la couleur de l'arrière-plan, non ? Smiley rolleyes
En l'occurence, celle du body, c'est à dire rouge... Smiley murf
Salut,

j'aurais bien aimé dire quelque chose de différent de mpop et cygnus mais comme c'est pas possible alors bis repetita :

partie interne du coin = couleur du cadre

partie externe du coin = couleur du body

Que tu n'y ais pas pensé toi même me fait songer que tu as peut être quelque chose d'autre en tête.

C'est quoi ???
Modifié par clb56 (20 Sep 2006 - 22:43)
clb56 a écrit :

Que tu n'y ais pas pensé toi même me fait songer que tu as peut être quelque chose d'autre en tête.
C'est quoi ???

Ah oui, tiens...
ça du coup, ça m'intéresse aussi !!! Smiley lol

Alors, c'est quoi ?!? Smiley langue
Le fait de mettre le blanc ou le transparent de la couleur de mon arrière plan ne me plait pas du tout car le jour où je veux changer mon arrière plan faudra tout modifier. Surtout que je ne sais pas encore de quel couleur je veux le faire! Smiley decu
Donc je pensais, génie que vous êtes, alliez me trouver une solution miracle Smiley lol
Et puis quelque chose m'intrigue:
Dans le bouquin CSS2 de Raphaël Goetter, chapitre "Créer un cadre arrondi", p194, je cite : "Pour assurer la bonne adaptation de leur couleur de fond (il parle des coins) à l'arrière plan du document, le plus simple est de créer des images à fond transparent." Voilà, pour moi fond de l'arrière plan du document c'est la couleur du body? et non celle du cadre?! par pour vous?
danae a écrit :
Le fait de mettre le blanc ou le transparent de la couleur de mon arrière plan ne me plait pas du tout car le jour où je veux changer mon arrière plan faudra tout modifier. Surtout que je ne sais pas encore de quel couleur je veux le faire! Smiley decu
Donc je pensais, génie que vous êtes, alliez me trouver une solution miracle Smiley lol

Hé non, pas de solution miracle. Peut-être quelque chose avec CSS 3 (on en reparle dans 5 ans ?), mais rien avec CSS 2.1.

danae a écrit :
Dans le bouquin CSS2 de Raphaël Goetter, chapitre "Créer un cadre arrondi", p194, je cite : "Pour assurer la bonne adaptation de leur couleur de fond (il parle des coins) à l'arrière plan du document, le plus simple est de créer des images à fond transparent." Voilà, pour moi fond de l'arrière plan du document c'est la couleur du body? et non celle du cadre?! par pour vous?

Heu... soit il y a autre chose à comprendre, soit c'est une bêtise. Je n'ai pas le bouquin, donc je ne peux pas vérifier de quoi il retourne exactement, mais il ne faut pas oublier qu'un bloc est un rectangle, coins arrondis ou pas coins arrondis ! Les images placées viendront se loger dans les coins du rectangle, mais ça reste dans la surface du rectangle, et la couleur ou l'image de fond sera celle du rectangle, pas du body.
Salut,

a écrit :
Donc je pensais, génie que vous êtes, alliez me trouver une solution miracle lol

Ben sinon il reste toujours la solution du bloc aux coins arrondis mais carrés Smiley lol

Il existe bien une solution, mais qui sera plus compliquée au final, et sera moins clean sémantiquement. Et en terme de maintenance, je pense que c'est aussi vite fait d'éditer son image et de changer la couleur de fond.
Modifié par Mikachu (21 Sep 2006 - 10:55)
Merci pour vos réponses.
Au final je souhaite faire un body en couleur dégradé Smiley biggol
Donc tout tombe à l'eau!

Je pense à une autre méthode.
Proche du principe des 4 petits coins sauf que il n'y pas de couleur à mettre au millieu des 4 petits coins car c'est un coin qui sera une grande image qui comblera le centre. On a donc:
*En haut à gauche: On a une image carré 100*100 avec un coin haut gauche arrondi
*En haut à droite: Un rectangle vertical 20*100 avec un coin haut droit arrondi
*En bas à gauche: Un rectangle horizontal 100*20 avec un coin bas gauche arrondi
*En bas à droite: Un carré 20*20 avec un coin bas droit arrondi

Dans l'ordre de ma citation les éléments se superposent pour faire un carré 100*100 à bord arrondi. J'ai pas possibilité de vous faire un lien sur mon exemple aujourd'hui. Avec un peu de concentration on arrive à imaginer l'exemple Smiley langue

Que pensez-vous de cette méthode? Je ne sais plus sur quel site j'ai trouvé l'idée.
Modifié par danae (21 Sep 2006 - 15:22)
Je vois ce que tu envisage, car j'avais songé à un truc similaire il y'a quelques mois, mais j'avais renoncé pour la raison que le contenu était prévu long et qu'il aurait fallu une image sacrément étirable (quelque chose comme 10 000-12 000 pixels minimum de haut environ).

Concernant ton dégradé je pense pas que cela change la donne. A priori tu n'auras paas un dégradé allant du haut au bas de ta page, mais certainement sur une portion. La position des coins supérieurs sera à priori fixe donc il sera aisé de faire les images avec le fond de dégradé. Pour les coins inférieurs, il suffira de remplir les images avec la couleur du bas de dégradé, et ca devrait fonctionner normalement très bien.
danae a écrit :
Et puis quelque chose m'intrigue:
Dans le bouquin CSS2 de Raphaël Goetter, chapitre "Créer un cadre arrondi", p194, je cite : "Pour assurer la bonne adaptation de leur couleur de fond (il parle des coins) à l'arrière plan du document, le plus simple est de créer des images à fond transparent."

Salut !
Je te confirme que dans cette phrase, il faut comprendre qu'il s'agit de mettre aux quatres coins un fond transparent. Aucune couleur, ni celle du body, ni celle du cadre : rien.


danae a écrit :
Donc je pensais, génie que vous êtes, alliez me trouver une solution miracle Smiley lol

Je ne sais pas si nous sommes géniaux, mais ton post me paraissait pour le moins bizarre... Smiley rolleyes
Donc par acquis de consicence ... Et surtout pour vérifier une intuition j'ai téléchargé l'un de tes coins puis je l'ai ouvert avec un logiciel d'image... Smiley murf

Nous sommes bien d'accord : tes images sont au format .gif...
Nous sommes bien d'accord : le format .gif accepte la transparence...
Mais encore faut-il pour cela que ton image ait un fond transparent par défaut !!!
Car sur le coin que j'ai ouvert, ton fond était blanc et dans ce cas-là, tu faire absolument toute les manipulations que tu voudras, ce dernier restera blanc Smiley sweatdrop

Donc mon conseil est le suivant :
Reprends tes 4 coins, vérifie que le fond soit transparent pour chacun d'entre eux ... et constate que la méthodolgie expliquée fonctionne... Smiley ravi
Et si tu as encore un problème...
Reviens-nous voir ! Smiley lol
Modifié par Cygnus (21 Sep 2006 - 23:15)
Cygnus a écrit :
Mais encore faut-il pour cela que ton image ait un fond transparent par défaut !!!Car sur le coin que j'ai ouvert, ton fond était blanc et dans ce cas-là, tu faire absolument toute les manipulations que tu voudras, ce dernier restera blanc

Si t'as ouvert le coin haut gauche ou haut droit ou bas gauche c'est normal Smiley biggrin , seul le coin bas droit est transparent! J'avais une petite flemme de tester sur les 4 alors qu'un seul me donner réponse à ma question. De plus je l'avais déjà précisé quand j'ai fourni mon exemple.
Lequel as tu téléchargé, parce que si c'est le bas droite je crois avoir de sérieux problème si effectivement il est pas transparent Smiley bawling
Mikachu a écrit :
A priori tu n'auras paas un dégradé allant du haut au bas de ta page, mais certainement sur une portion. La position des coins supérieurs sera à priori fixe donc il sera aisé de faire les images avec le fond de dégradé. Pour les coins inférieurs, il suffira de remplir les images avec la couleur du bas de dégradé, et ca devrait fonctionner normalement très bien.

Hum, ma box a cadre arrondi se placera aléatoirement dans mes pages. J'ai pas de position prédéfini, d'une page à l'autre ça peut être en haut vers la gauche, l'autre en bas vers la droite. Mon dégradé part de la gauche vers la droite du violet vers le blanc. Donc suivant la position de la box les coins contiennent plus ou moins de violet. Alors à moins que je me trompe ça me parait ingérable!

Pour l'autre méthode que j'avais cité plus haut où ce ne sont plus que 4 petit coins mais 1 grand image qui fait le fond et 2 images rectangulaire et 1 image coin, je crois que je suis un peu nunuche car le problème reste le même, si on met de la transparence sur les éléments qui sont positionnés en terme de superposition tout en haut, forcément les endroits transparents vont laissés apparaitre l'image du dessous c'est à dire la grande image qui fait le fond et au final on aura donc plus de bord arrondi!

On est d'accord qu'avec la méthode des 4 petits coins on peut faire analogie avec photoshop et ses calques. Ainsi le transparent des coins laisse apparaitre la couleur du 1er calque c'est à dire le rectangle qui remplit de couleur l'intérieur du cadre! Etes vous d'accord ?
Modifié par danae (22 Sep 2006 - 09:37)
Sujet clos
Aller à