28111 sujets

CSS et mise en forme, CSS3

Box-shadow + border-radius sur Chrome

Salut,

Après plusieurs tests, je commence à me poser la question si ce n'est pas un bug venant de webkit.

upload/21385-chromeinse.png

Pour voir en live.

CSS :

body {
color: purple;
background-color: #d8da3d;
padding: 50px;}

#content { 
height: 75px; width: 400px; background: #FFF;

-webkit-border-radius: 8px; 
-moz-border-radius: 8px; 
-webkit-box-shadow: 2px 2px 20px #000 inset; 
-moz-box-shadow: 2px 2px 20px #000 inset;}


Si vous avez des infos là dessus (:
Merci !
Modifié par remink (08 May 2010 - 12:29)
Pas d'infos particulières mais ce n'est pas forcément surprenant. Il ne faut pas oublier que le support du css3 et du html 5 par les navigateurs est encore plutôt aléatoire car ces normes sont toujours à l'état de brouillons (bien avancés, mais tout de même).
Essaie de rajouter la propriété border-radius (sans préfixe). Je ne te garanti rien, mais il est possible, selon la version de Chrome/Chromium que tu utilise (4, 5 ou 6), que la propriété propriétaire ne soit plus utilisée.
J'en viens au même constat que toi... Si tu as trouvé une solution, je suis preneur! Smiley cligne

Sous Safari, l'affichage est parfait (identique à Firefox). Chrome pose problème avec l'ombre interne (inset) mais pas l'ombre externe.

Dans mon cas, voici le code:

    -moz-box-shadow:0 0 15px #1F1F1F, inset 0 0 25px #912928;
    -webkit-box-shadow:0 0 15px #1F1F1F, inset 0 0 25px #912928;
    box-shadow:0 0 15px #1F1F1F, inset 0 0 25px #912928;


Et vous trouverez ci-joint la capture d'écran :
upload/29464-chromeinse.png

Existe-t-il un moyen d'utiliser un commentaire conditionnel uniquement pour Google Chrome? (et pas tous les navigateurs webkit) ?
sur mes sites les ombres et les radius se couplent très bien sous tous les navigateurs (pour IE à partir du 9 seulement) sans rien faire de spécial ! étrange !

pour ton lien que ce soit sous firefox ou chrome, les bords sont carrés ! j'vais déjeuner et je regarderai ton code après. Smiley cligne


ps: je te donne déjà le code que j'ai sur mes sites:
border-radius : 8px;
-moz-border-radius : 8px;

-moz-box-shadow: 0 0 10px green; 
-webkit-box-shadow: 0 0 10px green;   
box-shadow: 0 0 10px green;
border-radius est implémenté sans préfixe par Google Chrome à partir de la version 5.

En outre, il est plus judicieux de déclarer une propriété CSS standard après ses équivalents avec préfixe, comme suit :
-moz-border-radius: 8px;
-webkit-border-radius: 8px; /* S'il faut tenir compte des versions de Safari et Google Chrome antérieures à la 5 */
border-radius: 8px;

Modifié par Victor BRITO (22 Sep 2010 - 10:48)
bogs a écrit :
sur mes sites les ombres et les radius se couplent très bien sous tous les navigateurs (pour IE à partir du 9 seulement) sans rien faire de spécial ! étrange !

pour ton lien que ce soit sous firefox ou chrome, les bords sont carrés ! j'vais déjeuner et je regarderai ton code après. Smiley cligne


ps: je te donne déjà le code que j'ai sur mes sites:
border-radius : 8px;
-moz-border-radius : 8px;

-moz-box-shadow: 0 0 10px green; 
-webkit-box-shadow: 0 0 10px green;   
box-shadow: 0 0 10px green;


Seulement les ombres portées (ombres "externes" par opposition aux ombres internes -inset).

J'ai trouvé plusieurs sujets relatifs à mon soucis chez les forums anglophones, mais encore aucune solution (du coup j'ai désactivé l'ombre interne pour les navigateurs webkit)
Julien1926 a écrit :


Seulement les ombres portées (ombres "externes" par opposition aux ombres internes -inset).

J'ai trouvé plusieurs sujets relatifs à mon soucis chez les forums anglophones, mais encore aucune solution (du coup j'ai désactivé l'ombre interne pour les navigateurs webkit)

avec 2 divs on arrive à ton résultat Smiley cligne 

<head><style type="text/css">
body{background-color:yellow;}
#a {
	border-radius : 10px; 
	-moz-border-radius : 10px; 
	overflow:hidden;
}

#b{
	background-color:white;
	height:50px;	
	padding:20px;
	
	border-radius : 10px; 
	-moz-border-radius : 10px; 

	-webkit-box-shadow: 0 0 20px black inset; 
	-moz-box-shadow: 0 0 20px black inset; 
	box-shadow: 0 0 20px black inset; 
}

</style>
</head>

<body>
<div id="a"><div id="b">asa</div></div>
</body>

Modifié par bogs (22 Sep 2010 - 14:08)
résultat en image sous chrome :

http://img535.imageshack.us/img535/5536/titreb.jpg

testé sous : chrome + safari + opéra + firefox (download de ie9 en cours^^)


edit: zut ça bug sous IE9 avec les 2 divs imbriqués ..alors qu'avec un seul ça marche, il te reste plus qu'à : 

<!--[if !IE]><!-->
<div id="a">
<!--<![endif]-->
<div id="b">asa</div>
<!--[if !IE]><!-->
</div>
<!--<![endif]-->


Smiley lol

edit2: en fait, c'est "très" bizarre sous IE, le simple DIV "a", même sans border ni rien, juste avec le overflow:hidden, détruit l'affichage du div "b" ... par contre il suffit de lui("a") donner un padding de 1px et le div "b" se réaffiche normalement. Vive IE Smiley langue
Modifié par bogs (22 Sep 2010 - 20:43)
Sujet clos
Aller à