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. But, me being me, as soon as I'd leave the page, I'd forget all about it.
You see, I have the attention span of a gnat.
After receiving some good news last night, I was having trouble sleeping so I thought I'd give it a shot.
My first experiment was using 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.
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. Close, but no cigar.
When I woke up, I saw that Joshuan Hibbert had posted exactly what I was looking for.
I'm posting this here, but he should definitely get the credit.
Here is his version This is actually his second attempt, as the first only had the top two corners.
The Code For The Original Can Be seen Below
div {
background: #f6f6f6;
height: 700px;
margin: 50px auto;
max-width: 600px;
position: relative;
width: 80%;
-webkit-box-shadow: 0 1px 7px hsla(0,0%,0%,.2);
-moz-box-shadow: 0 1px 7px hsla(0,0%,0%,.2);
box-shadow: 0 1px 7px hsla(0,0%,0%,.2);
}
/* Corner Effect */
.corners:after,
.corners:before {
background: #e6e6e6;
content: '';
height: 50px;
position: absolute;
top: -25px;
width: 100px;
-webkit-box-shadow: 0 5px 10px -7px hsla(0,0%,0%,.5);
-moz-box-shadow: 0 5px 10px -7px hsla(0,0%,0%,.5);
box-shadow: 0 5px 10px -7px hsla(0,0%,0%,.5);
}
.corners:after {
left: -50px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.corners:before {
right: -50px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
The Amended Code, From His Update, Can Be Seen Here:
div {
background: #f6f6f6;
height: 700px;
margin: 50px auto;
max-width: 600px;
position: relative;
width: 80%;
-webkit-box-shadow: 0 1px 7px hsla(0,0%,0%,.2);
-moz-box-shadow: 0 1px 7px hsla(0,0%,0%,.2);
box-shadow: 0 1px 7px hsla(0,0%,0%,.2);
}
/* Corner Effect */
.corners:after,
.corners:before {
background: #e6e6e6;
content: '';
height: 50px;
position: absolute;
top: -25px;
width: 100px;
-webkit-box-shadow: 0 5px 10px -7px hsla(0,0%,0%,.5);
-moz-box-shadow: 0 5px 10px -7px hsla(0,0%,0%,.5);
box-shadow: 0 5px 10px -7px hsla(0,0%,0%,.5);
}
.corners:after {
left: -50px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.corners:before {
right: -50px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.bottom-corners:before,
.bottom-corners:after {
background: #e6e6e6;
content: '';
height: 50px;
position: absolute;
bottom: -75px;
width: 100px;
-webkit-box-shadow: 0 5px 10px -7px hsla(0,0%,0%,.5);
-moz-box-shadow: 0 5px 10px -7px hsla(0,0%,0%,.5);
box-shadow: 0 5px 10px -7px hsla(0,0%,0%,.5);
}
.bottom-corners:after {
left: -400px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.bottom-corners:before {
right: -100px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
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 his code:
div.tucked-corners {
background: #f6f6f6;
height: 380px;
margin: 50px auto;
padding: 10px;
position: relative;
width: 580px;
-webkit-box-shadow: 0 1px 7px hsla(0,0%,0%,.2);
-moz-box-shadow: 0 1px 7px hsla(0,0%,0%,.2);
box-shadow: 0 1px 7px hsla(0,0%,0%,.2);
}
span.tucked-corners {
background: #c4453c;
display: block;
height: 380px;
position: relative;
width: 580px;
-webkit-box-shadow: inset 0 0 10px hsla(0,0%,0%,.25);
-moz-box-shadow: inset 0 0 10px hsla(0,0%,0%,.25);
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;
-webkit-box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);
-moz-box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);
box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);
}
.top-corners:after {
left: -50px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.top-corners:before {
right: -50px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
/* Bottom Corner Effect */
.bottom-corners:after,
.bottom-corners:before {
background: #e6e6e6;
content: '';
height: 50px;
position: absolute;
bottom: -25px;
width: 100px;
-webkit-box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);
-moz-box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);
box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);
}
.bottom-corners:after {
left: -50px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.bottom-corners:before {
right: -50px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
We're sure this can still be improved on. So, feel free to grab a fiddle and work it out.