Skip to content

Instantly share code, notes, and snippets.

@nrrrdcore
Last active April 22, 2024 20:54
Show Gist options
  • Save nrrrdcore/2650276 to your computer and use it in GitHub Desktop.
Save nrrrdcore/2650276 to your computer and use it in GitHub Desktop.
Simple Bended-Shadow CSS: Create the Bended Photo Effect without writing a million divs.
.bended-shadow {
position: relative;
width: 500px;
margin: 200px auto;
}
.bended-shadow::before, .bended-shadow::after {
content: '';
position: absolute;
width: 60%;
height: 30px;
-webkit-box-shadow: 0 0 36px rgba(0,0,0,1);
-moz-box-shadow: 0 0 36px rgba(0,0,0,1);
-ms-box-shadow: 0 0 36px rgba(0,0,0,1);
-o-box-shadow: 0 0 36px rgba(0,0,0,1);
box-shadow: 0 0 36px rgba(0,0,0,1);
-webkit-transform: rotate(-3deg) skew(-10deg);
-moz-transform: rotate(-3deg) skew(-10deg);
-o-transform: rotate(-3deg) skew(-10deg);
-ms-transform: rotate(-3deg) skew(-10deg);
transform: rotate(-3deg) skew(-10deg);
left: 16px; /* Decrease px to increase spread */
bottom: 17px; /* Decrease to lower shadow */
z-index: 0; /* Important! should be (-1) beneath your content container */
}
.bended-shadow::after {
-webkit-transform: rotate(3deg) skew(10deg);
-moz-transform: rotate(3deg) skew(10deg);
-o-transform: rotate(3deg) skew(10deg);
-ms-transform: rotate(3deg) skew(10deg);
transform: rotate(3deg) skew(10deg);
left: auto;
right: 16px; /* Decrease px to increase spread */
}
#content {
position: relative;
bottom: 4px;
padding: 3px;
background-color: #FFF;
min-height: 400px;
border: 1px solid #D0D0D0;
border-bottom: 1px solid #CACACA;
z-index: 1;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.1);
-moz-box-shadow: 0 1px 1px rgba(0,0,0,.1);
-ms-box-shadow: 0 1px 1px rgba(0,0,0,.1);
-o-box-shadow: 0 1px 1px rgba(0,0,0,.1);
box-shadow: 0 1px 1px rgba(0,0,0,.1);
}
#photo {
background-color: #EEE;
border: 1px solid #D0D0D0;
min-height: 408px;
-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,.09);
-moz-box-shadow: inset 0 0 3px rgba(0,0,0,.09);
-ms-box-shadow: inset 0 0 3px rgba(0,0,0,.09);
-o-box-shadow: inset 0 0 3px rgba(0,0,0,.09);
box-shadow: inset 0 0 3px rgba(0,0,0,.09);
}
h1 {
font-family: 'Helvetica Neue';
font-weight: bold;
font-size: 90px;
text-align: center;
padding-top: 70px;
color: #818486;
letter-spacing: 0;
text-shadow: 0 -1px 0 rgba(0,0,0,.5), 0 2px 1px rgba(255,255,255,.6);
}
<div class="bended-shadow">
<div id="content">
Put your Content/Image here.
</div>
</div>
@rustyeddy
Copy link

Way cool, thanks for sharing!!! I thought I'd have to use PS to get this done.. Not being a designer I'm so stoked it is possible in css and that you shared!!!

@Rasha88
Copy link

Rasha88 commented Jan 26, 2014

great work!!,
Thank u so much

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment