Problème avec box-shadow

Bonjour à tous,

J'aimerais mettre une légère ombre sur ma page, mais le problème c'est que le bloc n'est pas de forme simple et du coup, ça complique les choses.

Bref je vous ai fais une image pour mieux vous montrer mon problème.
http://img15.hostingpics.net/pics/684829problemeboxshadow.gif

Pourtant j'ai trouvé des exemples avec de nombreux effet étonnant tout géré en CSS
voir ici : http://www.creativejuiz.fr/trytotry/css3-box-shadow-after-before/
Mais je n'ai rien trouver qui puisse solutionner mon problème.

Est-ce seulement possible ? vous avez des idées ?

Merci à vous
Modifié par Senka (31 Jan 2013 - 09:14)

Sans bidouille ça me semble compromis mais après ça dépend la souplesse que tu veut.

Le plus simple serais de faire 3 images en png transparent de ce type :
http://img15.hostingpics.net/pics/691996Sanstitre1.jpg
(celui du milieu peut faire que 1px de haut, je les fait plus gros ici pour que ça sois visible)
Ensuite tu utilise la premier image pour le haut, celle du milieu avec un repeat-y pour le contenue et celle du bas en bas évidement !

Sinon avec un peut d'huile de de coude, tu peut ajouter un div qui contiendra le contenu et s’occupera de cacher l'effet de superposition des ombres, mais c'est vraiment crado
et reste un point plus sombre (superposition des ombrage des 2 cadre en bas au millieu)
Peut-etre en jouant un peu plus on peut faire mieux, mais je suis vraiment pas au point sur ce genre de technique.
Résultat & script : http://cdpn.io/prywu

y'a peut être une façon de faire avec du SVG
Modifié par Cancre (31 Jan 2013 - 10:52)

Bonjour,

ce n'est pas possible car il faut ajouter le box-shadow sur un seul élément (enfin tu as droit à 3 éléments en comptant :before et :after pour IE8+).
Si tu ajoutes box-shadow sur 2 éléments proches, les ombrages transparents vont se superposer là où les éléments "se recoupent". Donc être plus foncés à certains endroits.

Il faut donc utiliser des images mais QUE des images (voir l'explication de Cancre ci-dessus), plus de box-shadow parce que chaque navigateur a ses méthodes de calcul et ce ne sera pas "raccord" entre box-shadow et transparence de l'image sur l'un ou l'autre navigateur. Fun hein ?
Je me suis bien amusé sur -http://www.sirtin.fr (sidebar fixe à gauche, et encore il manque le footer arrondi en bas, qui a dû être enlevé pour une autre raison) en n'utilisant pas le positionnement absolu sur :before/:after mais des div/span vides pour être compatible avec IE7-
Modifié par Felipe (31 Jan 2013 - 11:14)

Okay, Merci pour vos réponses

En fait, c'est pour personnalisé un theme déjà existant d'un CMS, de ce fait les possibilités de modifications sont assez restreintes. Je voulais juste avoir la confirmation sur les fonctionnalités de "box-shadow" et ses limites et visiblement il n'est pas possible de "coupé" la diffusion de l'ombre pour la mettre en raccord avec un autre bloc car sinon effectivement, il y a une superposition des ombres.
Je crois aussi qu'il y a peu être une solution avec SVG mais ça à l'air assez fastidieux.
J'avais également pensé à l'ancienne méthodes des images répétitives mais difficilement à mettre en place dans mon cas.

Donc finalement je vais opter pour dessiner l'ombre via l'image de fond du thème qui reste fixe et centré. Je ne pourrais ombrer que la parti haute en faisant disparaître l'ombrage progressivement. Je pense que c'est la solution la plus simple et la plus propre.

Sur ce, merci beaucoup pour votre contribution, ça m'a bien aider, vous êtes super !

Bonjour il y a une solution en full CSS qui marche bien

html {
	background: #dedede;
}
div {
	position: relative;
	width: 328px;
	height: 176px;
	margin: 0 auto;
	margin-top: 100px;
	background: #fff;
	text-align: center;
	line-height: 176px;
	-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .9);
	-moz-box-shadow: 0 0 10px rgba(0, 0, 0, .9);
	box-shadow: 0 0 10px rgba(0, 0, 0, .9);
	-webkit-border-radius: 10px 0 0 0;
	-moz-border-radius: 10px 0 0 0;
	border-radius: 10px 0 0 0;
}
div:before, div:after {
	content: "";
	position: absolute;
	z-index: -1;
	top: -25px;
	left: 55%;
	right: 0;
	height: 25px;
	background: #fff;
	-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .9);
	-moz-box-shadow: 0 0 10px rgba(0, 0, 0, .9);
	box-shadow: 0 0 10px rgba(0, 0, 0, .9);
	-webkit-border-radius: 10px 0 0 0;
	-moz-border-radius: 10px 0 0 0;
	border-radius: 10px 0 0 0;
}
div:after {
	z-index: 0;
	top: -10px;	
	height: 10px;				
	-webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
	-moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
	box-shadow: 0 0 0 rgba(0, 0, 0, 0);
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
}

<div>Effet désiré</div>

ou avec des box-shadow multiple sans que ce soit 100% nickel (raccord et IE <9 dixit Felipe)

demo sans pseudo elements :
http://result.dabblet.com/gist/4962484
http://dabblet.com/gist/4962484

Cdt,

Bravo à @psykhe et @gc-nomade.

Comme quoi les css sont plus souples qu'il n'y parait.
Modifié par rodolpheb (16 Feb 2013 - 09:09)