28172 sujets

CSS et mise en forme, CSS3

[Résolu] Box-shadow uniquement sur border left et right.

Bonjour,

je pensais faire simplement c'est à dire styler mes border-left et right d'une balise avec box-shadow. Mais je ne parviens pas à un résultat concluant car il y a des ombres qui apparaissent en top et bottom.
Je parviens au résultat voulu en me compliquant la tâche. Smiley decu

Après avoir cherché, je crains qu'il n'y ait de réponses simples.

Si vous avez une idée, je vous remercie d'avance.
Modifié par rodolpheb (06 Dec 2012 - 10:13)
Qu'est-ce que vous entendez par « il y a des ombres qui apparaissent en top et bottom » ? C'est peut-être à cause du blur-radius ?

Voici un exemple d'ombre à droite et à gauche, avec le blur-radius à zéro :

<!doctype html>
<html lang="fr-FR">
<head>
	<meta charset="UTF-8" />
	<title>box-shadow</title>
	<style type="text/css">
div {
	width: 50%;
	height: 200px;
	margin: 50px auto;
	border: thin solid #333;
	box-shadow: 
		-1em 0 0 #333, /* Pour ombre gauche d'une étendue de 1em */
		1em 0 0 #666; /* Pour ombre droite d'une étendue de 1em */
		/* La troisième valeur (0) correspond à blur-radius */
}
	</style>
</head>
<body>
	<div></div>
</body>
</html>
Merci Muchos, j'ai déjà testé ça mais au lieu de donner une ombre on obtient un trait.

Ce que j'entends par "ombres en haut et en bas" c'est que dans le cas d'un blur-radius et/ou d'un spread-radius renseignés la forme de la boite apparait très légèrement (top et bottom).

Je voudrais faire une séparation de colonnes et pour cela j'utilise before et after mais c'est un peu lourd... Smiley smile
Modérateur
Salut salut,

Je m'y suis intéressé un peu et j'avais trouvé cette solution (j'ai adapté pour bord droite/gauche) :

box-shadow:8px 0 8px -10px #000000,-8px 0 8px -10px #000000;


Il faut jouer avec le spread (4eme param de box-shadow).
Pas parfaite mais c'est le max que j'ai pu trouver. Meilleur rendu pour du inset je trouve.
Modifié par _laurent (15 Dec 2012 - 17:20)
Sujet clos
Aller à