Como posso adicionar uma sombra de caixa em um lado de um elemento?


445

Preciso criar uma sombra de caixa em algum blockelemento, mas apenas (por exemplo) no lado direito. O modo como faço é envolver o elemento interno box-shadowem um externo padding-righte, overflow:hidden;assim, os três outros lados da sombra não são visíveis.

Existe alguma maneira melhor de conseguir isso? Gosta box-shadow-right?

Edição : Minhas intenções são criar apenas a parte vertical da sombra. Exatamente o mesmo que o que repeat-ya regra background:url(shadow.png) 100% 0% repeat-yfaria.


3
considerando as ferramentas limitadas do css em termos de caixa-sombras, acho que sua abordagem já é bastante boa. Não é muito confuso e tem um impacto bastante pequeno em termos de semântica: apenas uma div sem sentido.
Bazzz

Aqui está uma boa css lado-sombra: stackoverflow.com/a/20596554/1491212
Armel Larcier

Respostas:


567

Sim, você pode usar a propriedade de propagação de sombra da regra box-shadow:

.myDiv
{
  border: 1px solid #333;
  width: 100px;
  height: 100px;
  box-shadow: 10px 0 5px -2px #888;
}
<div class="myDiv"></div>

A quarta propriedade lá -2pxé a propagação da sombra, você pode usá-la para alterar a propagação da sombra, fazendo parecer que a sombra está apenas de um lado.

Isso também usa as regras de posicionamento da sombra e a 10pxenvia para a direita (deslocamento horizontal) e a 0pxmantém sob o elemento (deslocamento vertical).

5px é o raio de desfoque :)

Exemplo para você aqui .


11
Obrigado por apontar algo que eu não sabia, mas minhas intenções eram criar apenas a parte vertical da sombra. Exatamente o mesmo que background: url (shadow.png) 100% 0% repeat-y faria.
Até 25/02

4
@Tillda, você deve marcar isso como a resposta, para que apareça no topo de outras pessoas que procuram uma solução. Eu quase rejeitei esse método de estilizar a leitura dos comentários e aceitei a resposta.
Devin G Rhode

6
Isso funciona muito bem se você não pretende que a sombra atenue nos cantos. Eu também criei essa solução, mas na maioria dos casos (para uma sombra de um lado) é errado que a sombra seja menor que o elemento, quebrando assim a ilusão (se assim for pretendida) de que o referido elemento é " aumentado "ou" 3D ".
9609 Steven

1
@ Mr.Alien Obrigado por isso, acabei de remover o prefixo, pois as box-shadowregras eram padronizadas.
Kyle

5
mas essa sombra não tem desfoque, e incluir desfoque faz com que saia de outras partes. E se você considerar isso reduzindo o spread, ele termina prematuramente do lado que você realmente deseja. UGHHHHH
Muhammad Umer

37

Minha solução feita por você, fácil de editar:

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;
}​

Demonstração:
http://jsfiddle.net/jDyQt/103


1
Parece, de alguma forma, o mais direto - apenas a div do container está me deixando infeliz de alguma forma;) #
BananaAcid

1
Esta é a única solução real. A resposta aceita ainda tem desfoque na parte superior e inferior da sombra, apenas em posições diferentes.
Jelle Blaauw

Isso não funcionou para mim no Microsoft Edge ou no Internet Explorer 11. Ainda havia um pouco de sombra nos outros lados, dependendo do nível de zoom. Outros navegadores estavam bem.
Sam

A resposta em stackoverflow.com/a/24220224/238753 funcionou da mesma forma, mas sem os problemas de compatibilidade do navegador que esta resposta possui
Sam

24

Para obter o efeito cortado em até dois lados, você pode usar pseudo-elementos com gradientes de fundo.

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));
}

adicionará um bom efeito de sombra à esquerda e à direita dos elementos que normalmente compõem um documento.


solução perfeita, pois adiciona um efeito de sombra a um lado de um elemento apenas sem sobrecarregar a marcação.
Liquinaut

1
Comparado ao método de spread negativo, isso tem a vantagem de não encolher nos cantos.
Kevin Christopher Henry

3
@BananaAcid Criei uma demo para quem precisa: jsfiddle.net/jDyQt/1198
zeckdude

Bom, isso funcionou perfeitamente no Chrome, Safari, Firefox, IE11 e Edge sem efeitos colaterais para mim
Sam

15

Basta usar o pseudo elemento :: after ou :: before para adicionar a sombra. Faça 1px e posicione no lado que quiser. Abaixo está um exemplo do topo.

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>


Este ainda transborda além da borda, mas pode ser o que algumas pessoas querem
Sam

5

Aqui está o meu exemplo:

.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>


4

Aqui está um pequeno truque que eu fiz.

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

1. Crie um <div class="one_side_shadow"></div>logo abaixo do elemento em que eu quero criar a sombra da caixa de um lado (nesse caso, eu quero uma sombra de inserção unilateral para id="element"a parte inferior)

2. Então criei um regular box-shadowusando um deslocamento vertical negativo para empurrar a sombra para cima para um lado.

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

2

Esta poderia ser uma maneira simples

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

Atribua isso a qualquer div


1

Aqui está um código de código para demonstrar para cada lado ou um trecho de trabalho:

.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>


0

Este site me ajudou: https://gist.github.com/ocean90/1268328 (Observe que nesse site a esquerda e a direita são invertidas na data desta postagem ... mas funcionam como esperado). Eles são corrigidos no código abaixo.

<!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
div {
 border: 1px solid #666;
    width: 50px;
    height: 50px;
    -webkit-box-shadow: inset 10px 0px 5px -1px #888 ;
}

0

O que faço é criar um bloco vertical para a sombra e colocá-lo ao lado de onde meu elemento de bloco deve estar. Os dois blocos são agrupados em outro bloco:

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

Exemplo de jsFiddle aqui .


0

Ok, aqui está uma tentativa mais. Usando pseudo-elementos e aplicando a propriedade da caixa de sombra sobre eles.

html:

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

sass:

.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

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.