Tucked Corners
An Experiment in Awesomeness
Best viewed in a webkit browser
Skip to the updated, mozilla friendly code
Ever since I first visited the Gravatar home page, I knew that the corner effect could be achieved via CSS. After receiving some good news last night, I was having trouble sleeping so I thought I'd give it a shot.
My first experiment utilized box shadows. But I was unaware of the negative spread in the box shadow property. My second experiment utilized gradients, which nearly did the trick. Example, below:
It wasn't until I was getting ready to pass out that I thought of posting on forrst. Not a minute later, I received a response from Last Rose Studios. You can see it as a fork of my original idea:
When I woke up, I saw that Joshua Hibbert had posted exactly what I was looking for. Below is his final version. I've amended it for flexability.
There are still some issues with mozilla rendering box shadow. So, for now, it's pretty much webkit only.
Scott Parry apparently helped fix the code to render better in mozilla.
Check below for the code:
div.tucked-corners {
background: #f6f6f6;
height: 380px;
margin: 50px auto;
padding: 10px;
position: relative;
width: 580px;
box-shadow: 0 1px 7px hsla(0,0%,0%,.2);
}
span.tucked-corners {
background: #c4453c;
display: block;
height: 380px;
position: relative;
width: 580px;
box-shadow: inset 0 0 10px hsla(0,0%,0%,.25);
}
/* Top Corner Effect */
.top-corners:after,
.top-corners:before {
background: #e6e6e6;
content: '';
height: 50px;
position: absolute;
top: -25px;
width: 100px;
z-index: 10;
box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);
}
.top-corners:after {
left: -50px;
transform: rotate(-45deg);
}
.top-corners:before {
right: -50px;
transform: rotate(45deg);
}
/* Bottom Corner Effect */
.bottom-corners:after,
.bottom-corners:before {
background: #e6e6e6;
content: '';
height: 50px;
position: absolute;
bottom: -25px;
width: 100px;
box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);
}
.bottom-corners:after {
left: -50px;
transform: rotate(-135deg);
}
.bottom-corners:before {
right: -50px;
transform: rotate(135deg);
}
We're sure this can still be improved on. So, feel free to grab a fiddle and work it out.
Update: Here's a bit of a different take, using overflow:hidden:
All code is Unlicensed. Do with it what you will.
About this post
This post is a collaborative effort between myself, Joshua Hibbert, Scott Parry and Last Rose Studios via forrst.com.
The effect is achieved using pseudo elements. Unfortunately, until we can nest generated content, only two corners can be created without adding another element to the mix. In this example, the bottom corners are created using the footer element. It’s rare that that there is only one element on a page, so this shouldn’t be a big deal.
There’s still a bit of discrepancy between browsers, especially in the way Mozilla handles shadows, but I think it’s a good start.