Ombre de la boîte sur un seul côté

Question

J'ai souvent besoin de créer l'ombre d'un élément de bloc mais seulement (par exemple) sur son côté droit. La façon dont je le fais est d'envelopper l'élément intérieur de box-shadow dans un autre avec padding-right et overflow:hidden; donc les 3 autres côtés de l'ombre ne sont pas visibles.

Y a-t-il un meilleur moyen d'y parvenir ? Comme box-shadow-right ?

EDIT : Mes intentions sont de créer uniquement la partie verticale de l'ombre. Exactement la même chose que ce qui repeat-y de la règle background:url(shadow.png) 100% 0% repeat-y faire.

Answer 1

Oui, vous pouvez utiliser la propriété "shadow spread" de la règle "box-shadow" :

.myDiv
{
    border: 1px solid #333;
    width: 100px;
    height: 100px;
    -webkit-box-shadow: 10px 0 5px -2px #888;
            box-shadow: 10px 0 5px -2px #888;
}

La quatrième propriété -2px est l'étalement de l'ombre, vous pouvez l'utiliser pour modifier l'étalement de l'ombre, en donnant l'impression que l'ombre est d'un seul côté.

Cela utilise également les règles de positionnement de l'ombre 10px l'envoie vers la droite (décalage horizontal) et 0px le maintient sous l'élément (décalage vertical).

5px est le rayon du flou :)

Exemple pour vous ici .

Answer 2

Ma solution personnelle qui est facile à modifier :

HTML :

<div id="anti-shadow-div">
    <div id="shadow-div"></div>
</div>​

css :

#shadow-div{
    margin-right:20px; /* Set to 0 if you don't want shadow at the right side */
    margin-left:0px; /* Set to 20px if you want shadow at the left side */
    margin-top:0px; /* Set to 20px if you want shadow at the top side */
    margin-bottom:0px; /* Set to 20px if you want shadow at the bottom side */
    box-shadow: 0px 0px 20px black; 
    height:100px;
    width:100px;
    background: red;
}

#anti-shadow-div{
    margin:20px;
    display:table;
    overflow:hidden;
}​

Démonstration :
http://jsfiddle.net/jDyQt/103

Answer 3

Pour obtenir l'effet de coupure sur deux côtés au maximum, vous pouvez utiliser des pseudo-éléments avec des dégradés d'arrière-plan.

header::before, main::before, footer::before, header::after, main::after, footer::after {
    display:    block;
    content:    '';
    position:   absolute;
    width:      8px;
    height:     100%;
    top:        0px;
}

header::before, main::before, footer::before {
    left:       -8px;
    background: linear-gradient(to left, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}

header::after, main::after, footer::after {
    right:      -8px;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}

ajoutera un bel effet d'ombre à gauche et à droite des éléments qui composent normalement un document.

Answer 4

C'est difficile avec box-shadow mais ce que vous pouvez faire, c'est utiliser border-image et y mettre un gradient CSS3.

fonctionne dans webkit : http://jsfiddle.net/Hs3qU/1/ Je ne peux pas le dire pour l'autre navigateur...

Answer 5

Voici une petite astuce que j'ai faite.

<div id="element"><!--element that I want an one-sided inset shadow from the bottom--></div> 
<div class="one_side_shadow"></div>

1. Créer un <div class="one_side_shadow"></div> juste en dessous de l'élément pour lequel je veux créer l'ombre d'un côté de la boîte (dans ce cas, je veux une ombre d'un côté de la boîte pour l'élément en question). id="element" venant du bas)

2. Ensuite, j'ai créé une ombre en boîte régulière en utilisant un décalage vertical négatif pour pousser l'ombre vers le haut sur un côté.

   box-shadow : 0 -8px 20px 2px #DEDEE3 ;