4

Tenho uma div de 950x350 pixels e gostaria de criar uma sombra em perspectiva (e desfocada) como mostrado no código abaixo (execute em tela cheia):

#slider{
   width: 950px;
   height: 350px;
   background: blue;
   position: relative;
}

#slider img{
   width: 962px;
   height: 31px;
   position: absolute;
   left: -6px;
   bottom: 0px;
}
<div id="slider">
   <img src="https://i.stack.imgur.com/OGKsw.png">
</div>

Fiz criando uma imagem no Photoshop e colocando-a abaixo da div, porém gostaria de não usar imagem pra isso, seria 1 requisição a menos. É possível e como obter esse efeito usando HTML/CSS?

2 Respostas 2

4

Segue uma versão com 3D transform:

#slider{
  position:relative;
    width: 300px;
    height: 150px;
    background: blue;
    position: relative;
}

#slider:after {
  display:block;content:"";
  position:absolute;
  width:100%;height:30px;
  top:135px;
  border-radius:5px;
  transform: perspective(10px) translateZ(-2.5px) rotateX(5deg);
  background:#666;
  box-shadow:0 0 10px 10px #666;
  z-index:-1;
}
<div id="slider"></div>

Basicamente pegamos o after e rotacionamos com rotateX. Os valores eu "chutei" rapidamente só para demonstrar a técnica, mas experimentando alterar individualmente cada um, dá pra ter uma noção boa de como funciona.

5
  • Bem massa mestre, tb acabei de incluir uma opção, mas usei só o rotatX e perspective no pai... Acho que seu resultado fico até mais fácil de customizar
    – hugocsl
    24/09/2018 às 23:19
  • Ficou legal, apenas fiz umas mods e ficou perfeito, veja: i.stack.imgur.com/6jWUA.png
    – Sam
    24/09/2018 às 23:26
  • Se tiver paciência, não faça como eu fiz de rodar pelo meio, tente pegar o eixo no "pé" do retângulo, que dá uma enxugada no CSS
    – Largato
    24/09/2018 às 23:36
  • Se bem que como tá trabalhando com tamanho fixo, não faz muita diferença. Se for fazer em algo "responsivo" (odeio esse termo) precisa mudar o centro de rotação pra ficar mais "automático" o tamanho (sem precisar deslocar no Z)
    – Largato
    24/09/2018 às 23:37
  • E pior que vai ser responsivo rs... mas eu me viro aqui, valeu pelas dicas.
    – Sam
    24/09/2018 às 23:40
2

Opção 1

Opção usando a sombra em um elemento ::after, um rotateX() para inclinar a sombra e um filter:blur para fazer o elemento ficar com aspecto de sombreado.

#slider{
    width: 950px;
    height: 350px;
    position: relative;
    perspective: 300px;
}
#slider::after{
    content: "";
    position: absolute;
    width: 950px;
    height: 350px;
    background: blue;
    top: 0;
    left: 0;
    z-index: 1;
}
#slider::before{
    content: "";
    background: rgba(0, 0, 0, 0.5);
    width: 90%;
    height: 40px;
    position: absolute;
    bottom: -20px;
    right: 0;
    left: 0;
    margin: auto;
    border-radius: 5px;
    filter: blur(5px);
    z-index: -1;
    transform: rotateX(45deg);
}
<div id="slider"></div>


Opção 2

Também é possível usando um valor negativo para o quarto atributo do Box-shadow (o qurto valor é conhecido como o spread ). https://developer.mozilla.org/pt-BR/docs/Web/CSS/box-shadow

Vc pode ir ajustando esse valores até chegar em um que mais te agrade, mas lembre-se que o quarto valor sempre deve ser negativo para ter o efeito que vc quer

#slider{
    width: 950px;
    height: 350px;
    background: blue;
    position: relative;
    box-shadow: 0 40px 20px -20px rgba(0, 0, 0, 0.5);
}
<div id="slider"></div>

5
  • Valeu jovem, mas não é exatamente o mesmo que eu gostaria. Se vc notar na sombra que coloquei, há uma inclinação para dentro nas laterais, um tipo de "skew".
    – Sam
    24/09/2018 às 23:04
  • É eu até reparei, to aqui matutando olhando pa imagem e jantando ao mesmo tempo, mas acho que já vou atualizar a minha resposta com mais uma opção rss
    – hugocsl
    24/09/2018 às 23:06
  • Tranquilo jovem... janta em paz aí rs.
    – Sam
    24/09/2018 às 23:06
  • @sam resposta editada. Mas acho que a do Bacco ficou mais fácil de entender rss
    – hugocsl
    24/09/2018 às 23:21
  • 1
    Ficou bom jovem. Realmente a do Baco ficou um pouco mais fácil.
    – Sam
    24/09/2018 às 23:33

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .