28106 sujets

CSS et mise en forme, CSS3

Bonjour,

Il me semble qu'avec border-radius on peut faire de jolis onglets en CSS, sans employer des images en background.

1) Connaissez-vous des exemples ?

2) Sur les navigateurs qui ne gèrent pas border-radius, les coins seront carrés car je n'ai pas envie de coder une alternative pour les vieux coucous.

3) Se pose néanmoins le problème de collapse de deux bordures adjacentes.
Dans un menu en liste, est-il possible de gérer les fusiosn de bordures ?
Il me semble que non.

Pour obtenir l'effet de collapse, dans un menu à coins carrés il suffit de mettre à 0 une des deux bordures adjacentes.
Mais avec border-radius l'arrondi n'aurait plus de bordure.
Modifié par boteha_2 (01 Sep 2015 - 21:42)
Modérateur
Bonsoir,

Hop un article qui va bien : http://www.alsacreations.com/tuto/lire/891-coins-arrondis-css-sans-images.html

1/ Non mais sur internet doit bien y avoir ça...

2/ IE8 et Opera mini (http://caniuse.com/#feat=border-radius) Tu as le choix de faire un fallback en image ou de laisser les coins carré; C'est pas super joli mais c'est que pour ces deux là, ca n'enlève rien de fonctionnel, c'est gratuit. Ca s'apelle de la dégradation gracieuse Smiley langue

3/ Que veux tu dire par "fusion de bordure" ? Si c'est le fait de n'avoir un arrondi que sur le coin haut gauche du premier élément et un autre bord arrondi sur le coin haut droit du dernier élément tu as le choix entre plusieurs solutions :
- Faire que ce soit le parent qui ai un fond avec ses deux coins haut arrondi et les élément dedans son juste transparent
- Ne donner un bord arrondi qu'a premier et au dernier élément et là on peut passer par les sélecteurs css :first-child et :last-child
Bonjour,

Merci de ta réponse.

2) Je laisse les coins carrés.

3) Par fusion de bordure, je veux dire que si tu as un élément avec un border-right à 1px et adjacent un border-left à 1px tu te retrouves avec un gros paté de 2px.

Je connais mal border-collapse mais je suppose que cela sert dans les tableaux à fusionner les deux bordures, donc 1px entre deux adjacents.

Dans le cas d'un menu en liste, je vois mal comment faire.
Ta piste de styler le parent semble intéressante mais je ne vois pas comment obtenir l'effet désiré.

Je vais travailler dessus pendant le week-end.