6

estou em um projeto onde a designer responsável me deu o seguinte layout pra passar pra HTML + CSS:

O que tenho que implementar

Alguém sabe me dizer se tem uma forma de fazer isso com CSS3? Pensei inicialmente em um box-shadow, mas não tem como implementar da forma que foi feito com essa imagem. E essa distorção nas bordas inferiores também não conheço uma forma de fazer. Alguém pode ajudar?

1

2 Respostas 2

8

Sim, isso é possível com CSS3. O Bacco já deixou uma alternativa, com uma imagem de fundo, aqui fica com CSS3:

A ideia é criar elementos virtuais com efeito de sombra por detrás da imagem. Esses elementos virtuais levam uma rotação e colocam-se por trás da imagem. Exemplo de CSS em baixo, e exemplo com a imagem transparente aqui, para poder vêr o que se passa por trás.

.lifted:before, .lifted:after {
    bottom:15px;
    width:50%;
    height:5%;
    max-width:300px;
    -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
    -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
    box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
}
.lifted:before {
    left:5px;
    -webkit-transform:rotate(-3deg);
    -moz-transform:rotate(-3deg);
    -ms-transform:rotate(-3deg);
    -o-transform:rotate(-3deg);
    transform:rotate(-3deg);
}
.lifted:after {
    right:5px;
    left:auto;
    -webkit-transform:rotate(3deg);
    -moz-transform:rotate(3deg);
    -ms-transform:rotate(3deg);
    -o-transform:rotate(3deg);
    transform:rotate(3deg);
}

Exemplo

6

Uma solução CSS2 (para uma CSS3, veja o link do @Sergio):

Crie uma imagem com a sombra:

sombra

CSS

.sombra {
   width:530px;
   padding: 0 10px 20px 10px;
   background: #fff url('/sombra.png') center bottom no-repeat;
}

HTML

<div class="sombra"><img src="/foto.jpg" alt="" width="530" height="300"></div>

Veja funcionando no JS Fiddle

2
  • Opa! Obrigado! Vou tentar. E quanto à distorção nas bordas inferiores? A imagem aparenta estar um pouco dobrada... É possível também? Commented 3/05/2014 às 13:56
  • 1
    @PedroVinícius Atualizei a resposta, veja o JSFiddle que eu pus. A imagem em si não está distorcida, mas a curva da sombra dá essa impressão.
    – Largato
    Commented 3/05/2014 às 14:21

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 .