Discussion :

[Lillie CHARLOTTE]

Bonjour,

pour

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
.bouton { background:transparent; border:4px outset #D4D4D4; } 
.bouton:active { border:4px inset #D4D4D4; }

J'obtient bien sous Chrome, Opera et Safari (Windows), la couleur RVB: 212 correspondant au code #D4D4D4

Mais avec Firefox j'ai RVB: 235 - #EBEBEB (gris encore plus claire)

Et Internet Eplorer, j'ai RVB:142 - #BEBEBE (gris trop foncé)

Que dois-je rajouter comme code dans ma feuille de style pour, avoir la même couleur principale de bordure sur Firefox et Internet Explorer ?

[Lillie CHARLOTTE]

En fouillant le code CSS de développez.net et la toile, j'ai trouvé ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

border:4px outset rgba (212, 212, 212 0.4);

ça me permet d'avoir la bonne couleur à gauche et en haut de la bordure du bouton sous Internet Explorer.

Mais du coups elle est différente sur les autres navigateurs ...

[NoSmoking]

Bonjour,
dans le cas des borders type outset chaque navigateur a sa propre façon de calculer le rendu "3D" à partir de la seule couleur indiquée. Dans ton cas si tu souhaites une homogénéité inter-navigateurs passe plutôt par une déclaration du type

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
.bouton{
  border-width:4px;
  border-style:solid;
  border-color:#F4F4F4 #D4D4D4 #D4D4D4 #F4F4F4; /* couleur pour top right bottom et left */
}

[Lillie CHARLOTTE]

Merci pour ta réponse NoSmoking !

Dire que c'était sous mes yeux et que je ne le voyais pas !

Pour moi SOLID c'était forcement un bord plat en couleur, je ne pensais pas pouvoir créer un relief outset/inset avec.
Mais si, ça fonctionne !

Voici donc, mon code fonctionnel:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
.bouton { background:transparent; border:4px solid; border-color: #D4D4D4 #707070 #707070 #D4D4D4; } 
.bouton:active { border:4px solid; border-color: #707070 #D4D4D4 #D4D4D4 #707070;}

Problème , encore