Image distortion with CSS?

Asked

Viewed 1,559 times

6

I am in a project where the responsible designer gave me the following layout to pass to HTML + CSS:

O que tenho que implementar

Can anyone tell me if there’s a way to do this with CSS3? I initially thought of a box-shadow, but there’s no way to implement it the way it was done with this image. And this distortion in the lower edges also do not know a way to do. Someone can help?

css css3
  • 1

    http://jsfiddle.net/FN38d/

2 answers

8

Yes, this is possible with CSS3. Bacco has already left an alternative, with a background image, here it is with CSS3:

The idea is to create virtual elements with a shadow effect behind the image. These virtual elements take a spin and place behind the image. Example of CSS below, and example with the transparent image here, so you can see what’s going on behind.

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

Example

6


A CSS2 solution (for a CSS3, see @Sergio link):

Create an image with the shadow:

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>

See working on JS Fiddle

  • Oops! Thanks! I’ll try. What about the distortion on the lower edges? The image appears to be a little bent... It’s possible too?

  • 1

    @Pedrovinícius I updated the answer, see the Jsfiddle I put. The image itself is not distorted, but the curve of the shadow gives this impression.

Browser other questions tagged css css3

You are not signed in. Login or sign up in order to post.