Comment puis-je ajouter une ombre de boîte sur un côté d'un élément?

J'ai besoin de créer une boîte-ombre sur un blockélément, mais seulement (par exemple) sur son côté droit. La façon dont je le fais est d'envelopper l'élément intérieur avec box-shadowun élément extérieur avec padding-rightet overflow:hidden;ainsi les trois autres côtés de l'ombre ne sont pas visibles.

Existe-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 que repeat-yla règle background:url(shadow.png) 100% 0% repeat-yferait.

Oui, vous pouvez utiliser la propriété de propagation de l'ombre de la règle de zone d'ombre:

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

<div class="myDiv"></div>

La quatrième propriété -2pxest la propagation de l'ombre, vous pouvez l'utiliser pour modifier la propagation de l'ombre, ce qui donne l'impression que l'ombre n'est que d'un côté.

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

5px est le rayon de flou :)

Exemple pour vous ici .

Ma solution self-made facile à éditer:

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émo:
http://jsfiddle.net/jDyQt/103

Pour obtenir l'effet écrêté sur deux côtés, 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.

Utilisez simplement le pseudo-élément :: after ou :: before pour ajouter l'ombre. Faites-le 1px et placez-le sur le côté de votre choix. Ci-dessous est un exemple de haut.

footer {
   margin-top: 50px;
   color: #fff;
   background-color: #009eff;
   text-align: center;
   line-height: 90px;
   position: relative;
}

footer::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    top: 0;
    left: 0;
    z-index: -1;
    box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.75);
}

<footer>top only box shadow</footer>

Voici mon exemple:

.box{
        
        width: 400px; 
        height: 80px; 
        background-color: #C9C; 
        text-align: center; 
        font: 20px normal Arial, Helvetica, sans-serif; 
        color: #fff; 
        padding: 100px 0 0 0;
        -webkit-box-shadow: 0 8px 6px -6px black;
           -moz-box-shadow: 0 8px 6px -6px black;
                box-shadow: 0 8px 6px -6px black;
    }

<div class="box">
</div>

Voici un petit hack que j'ai fait.

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

1. Créez un <div class="one_side_shadow"></div>droit sous l'élément que je veux créer l'ombre de boîte d'un côté (dans ce cas, je veux une ombre d'encart unilatérale pour id="element"venir du bas)

2. Ensuite, j'ai créé un régulier en box-shadowutilisant un décalage vertical négatif pour pousser l'ombre vers le haut d'un côté.

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

Cela pourrait être un moyen simple

border-right : 1px solid #ddd;
height:85px;    
box-shadow : 10px 0px 5px 1px #eaeaea;

Attribuez ceci à n'importe quel div

Voici un codepen à démontrer pour chaque côté, ou un extrait de travail:

.boxes {
  display: flex;
  flex-wrap: wrap;
}

.box {
  margin: 20px;
  border: 1px solid #ccc;
  font-family: Helvetica Neue, Arial, sans-serif;
  font-weight: 100;
  letter-spacing: 2px;
  color: #999;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex: 1;
  padding: 40px;
  line-height: 1.4em;
}

.top {
  box-shadow: 0 -5px 5px -5px #333;
}

.right {
  box-shadow: 5px 0 5px -5px #333;
}

.bottom {
  box-shadow: 0 5px 5px -5px #333;
}

.left {
  box-shadow: -5px 0 5px -5px #333;
}

<div class="boxes">
  <div class="box top">Top Only</div>
  <div class="box right">Right Only</div>
  <div class="box bottom">Bottom Only</div>
  <div class="box left">Left Only</div>
</div>

clip-pathest maintenant (2020) l'un des moyens les plus simples pour obtenir des ombres sur des côtés spécifiques d'éléments, en particulier lorsque l'effet requis est une ombre "nette" sur des bords particuliers (ce qui, je crois, était ce que l'OP recherchait à l'origine), comme cette:

.shadow-element {
    border: 1px solid #333;
    width: 100px;
    height: 100px;
    box-shadow: 0 0 15px rgba(0,0,0,0.75);
    clip-path: inset(0px -15px 0px 0px);
}

<div class="shadow-element"></div>

... par opposition à une ombre atténuée / réduite / éclaircie comme celle-ci:

.shadow-element {
    border: 1px solid #333;
    width: 100px;
    height: 100px;
    box-shadow: 15px 0px 15px -10px rgba(0,0,0,0.75);
}

<div class="shadow-element"></div>

Appliquez simplement le CSS suivant à l'élément en question:

box-shadow: 0 0 Xpx [hex/rgba]; /* note 0 offset values */
clip-path: inset(Apx Bpx Cpx Dpx);

Où:

• Apx définit la visibilité des ombres pour le bord supérieur
• Bpx droite
• Cpx bas
• Dpx la gauche

Entrez une valeur de 0 pour tous les bords où l'ombre doit être masquée et une valeur négative (identique au rayon de flou de l'ombre de la boîte - Xpx) pour tous les bords où l'ombre doit être affichée.

Ce site m'a aidé: https://gist.github.com/ocean90/1268328 (Notez que sur ce site, la gauche et la droite sont inversées à la date de ce post ... mais elles fonctionnent comme prévu). Ils sont corrigés dans le code ci-dessous.

<!DOCTYPE html>
<html>
    <head>
        <title>Box Shadow</title>

        <style>
            .box {
                height: 150px;
                width: 300px;
                margin: 20px;
                border: 1px solid #ccc;
            }

            .top {
                box-shadow: 0 -5px 5px -5px #333;
            }

            .right {
                box-shadow: 5px 0 5px -5px #333;
            }

            .bottom {
                box-shadow: 0 5px 5px -5px #333;
            }

            .left {
                box-shadow: -5px 0 5px -5px #333;
            }

            .all {
                box-shadow: 0 0 5px #333;
            }
        </style>
    </head>
    <body>
        <div class="box top"></div>
        <div class="box right"></div>
        <div class="box bottom"></div>
        <div class="box left"></div>
        <div class="box all"></div>
    </body>
</html>

div {
 border: 1px solid #666;
    width: 50px;
    height: 50px;
    -webkit-box-shadow: inset 10px 0px 5px -1px #888 ;
}

Ce que je fais, c'est créer un bloc vertical pour l'ombre, et le placer à côté de l'endroit où mon élément de bloc devrait être. Les deux blocs sont ensuite enveloppés dans un autre bloc:

<div id="wrapper">
    <div id="shadow"></div>  
    <div id="content">CONTENT</div>  
</div>

<style>

div#wrapper {
  width:200px;
  height:258px;      
}

div#wrapper > div#shadow {
  display:inline-block;
  width:1px;
  height:100%;
  box-shadow: -3px 0px 5px 0px rgba(0,0,0,0.8)
}

div#wrapper > div#content {
  display:inline-block;
  height:100%;
  vertical-align:top;
}

</style>

Exemple jsFiddle ici .

Ok, voici un essai de plus. Utilisation de pseudo-éléments et application de la propriété de l'ombre sur eux.

html:

<div class="no-relevant-box">
  <div class="div-to-shadow-1"></div>
  <div class="div-to-shadow-2"></div>
</div>

toupet:

.div-to-shadow-1, .div-to-shadow-2
  height: 150px
  width: 150px
  overflow: hidden
  transition: all 0.3s ease-in-out
  &::after
    display: block
    content: ''
    position: relative
    top: 0
    left: 100%
    height: 100%
    width: 10px
    border: 1px solid mediumeagreen
    box-shadow:  0px 7px 12px rgba(0,0,0,0.3)
  &:hover
    border: 1px solid dodgerblue
    overflow: visible

https://codepen.io/alex3o0/pen/PrMyNQ