I'm in a project where the responsible designer gave me the following layout to go to HTML + CSS:
Can anyone tell me if I have a way to do this with CSS3? I initially thought of a box-shadow, but it has no way to implement the way it was done with that image. And this distortion at the lower edges also do not know a way to do. Can anyone help?
A CSS2 solution (for a CSS3, see the @Sergio link):
Create an image with the shadow:
CSS
.sombra{width:530px;padding:010px20px10px;background:#fffurl('/sombra.png')centerbottomno-repeat;}HTML
<divclass="sombra"><img src="/foto.jpg" alt="" width="530" height="300"></div>
See working at JS Fiddle
Yes, this is possible with CSS3. Bacco has already left an alternative, with a background image, here is CSS3:
The idea is to create virtual elements with a shadow effect behind the image. These virtual elements take a spin and stand behind the image. CSS example below, and example with the transparent image , to see what goes 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);
}