web-dev-qa-db-fra.com

Comment puis-je ajouter une zone d'ombre sur un côté d'un élément?

Je dois créer une ombre sur un élément block, mais uniquement (par exemple) sur son côté droit. La façon dont je le fais est d'envelopper l'élément intérieur avec box-shadow dans un élément extérieur avec padding-right et overflow:hidden; pour que les trois autres côtés de l'ombre ne soient pas visibles.

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

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

csscss3shadowbox-shadow
412
tillda

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

.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é ici -2px est la propagation de l'ombre, vous pouvez l'utiliser pour modifier la propagation de l'ombre, en faisant apparaître que l'ombre est d'un seul côté.

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

5px est le rayon de flou :)

Exemple pour vous ici .

538
Kyle

Ma solution personnalisée et 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/1

30
Puyol

Pour obtenir l’effet écrêté 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 constituent normalement un document.

19
Jacek Kuzemczak

Utilisez simplement le pseudo élément :: after ou :: before pour ajouter l'ombre. Faites-le 1px et placez-le sur le côté que vous voulez. Ci-dessous un exemple de top.

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>
10
riegersn

Voici un petit bidouillage 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> juste en dessous de l'élément pour lequel vous voulez créer l'ombre de la boîte d'un côté (dans ce cas, je veux une ombre insérée d'un seul côté pour id="element" à venir. du fond)

2. Ensuite, j'ai créé un box-shadow normal à l'aide d'un décalage vertical négatif pour pousser l'ombre vers le haut.

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

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>
2
Webpixstudio

Cela pourrait être un moyen simple

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

Attribuer ceci à n'importe quelle div

2
madhairsilence

Ce site m'a aidé: https://Gist.github.com/ocean90/1268328 (Notez que sur ce site, les côtés gauche et droit sont inversés à la date de ce message ... mais ils 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>
0
ter24

Ok, voici un essai de plus. Utiliser des pseudo-éléments et appliquer la propriété de la boîte-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

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

Ce que je fais est de créer un bloc vertical pour l'ombre et de le placer à côté de l'emplacement de mon élément de bloc. Les deux blocs sont ensuite emballé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 .

0
jim_kastrin