Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Simple Bended-Shadow CSS: Create the Bended Photo Effect without writing a million divs.
@import "compass/css3";
@mixin bended-shadow($width: 500px, $spread: 16px, $shadow: 17px, $z-index: 1) {
position: relative;
width: $width;
&::before, &::after {
content: '';
position: absolute;
width: 60%;
height: 30px;
@include box-shadow(0 0 36px rgba(0,0,0,1));
@include transform(rotate(-3deg) skew(-10deg));
left: $spread;
bottom: $shadow;
z-index: $z-index - 1;
}
&::after {
@include transform(rotate(3deg) skew(10deg));
left: auto;
right: $spread;
}
.inner {
position: relative;
bottom: 4px;
padding: 3px;
background-color: #FFF;
min-height: 80px; // Any less and you can see the :before and :after edges
border: 1px solid #D0D0D0;
border-bottom: 1px solid #CACACA;
z-index: $z-index;
@include box-shadow(0 1px 1px rgba(0,0,0,.1));
}
.photo {
@extend .inner;
border: 1px solid #D0D0D0;
@include box-shadow(inset 0 0 3px rgba(0,0,0,.09));
}
}
.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);
}
<html>
<head>
<title>Bending shadows</title>
<link rel="stylesheet" href="stylesheets/screen.css" type="text/css" />
</head>
<body>
<div class="bended-shadow">
<div class="inner">
<div class="content">
Ohai!
</div>
</div>
</div>
</body>
</html>
# Require any additional compass plugins here.
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"
# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed
# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true
# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false
# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
@import "bended-shadow";
.bended-shadow {
@include bended-shadow;
margin: 200px auto;
}
.content {
margin-top: 50px;
margin-bottom: 50px;
text-align: center;
font-size: 150%;
font-weight: bold;
}
@stevenh512

This comment has been minimized.

Copy link
Owner Author

@stevenh512 stevenh512 commented May 19, 2012

Another one I totally stole from @nrrrdcore and converted to SCSS with Compass mixins 😁

Screenshot

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.