keyboard shortcuts: ← previous shot → next shot L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
112,722,572,260 pixels dribbbled
Copyright © 2009–2013 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.
30 Responses (page 1 of 2)
Pro
Cameron Moll
The only images above are the logos. The rest is CSS using box-shadows, transforms, and generated content.
Stumbled on the demo code by Matt Hamm yesterday, already playing with it in a project.
over 2 years ago
Rebound
CSS page curls (Photoshop version)
by Cameron Moll
Here's the original comp in Photoshop.
over 2 years ago
Pro
Jory Raphael
Very nice.
over 2 years ago
Pro
Rogie
Rad!
over 2 years ago
Pro
Trent Walton
I love to see stuff like this. And kudos to Matt for sharing!
over 2 years ago
Really nice.
(Hmmm... how quickly can I work these into a new project?)
over 2 years ago
Pro
Chris Wallace!
I prefer your implementation to Matt's, looks more realistic. His shadows sort of flare out to the corners, yours stay within the bounds of the box horizontally.
over 2 years ago
Brilliant.
over 2 years ago
Sweet! Totally have to try this out...
over 2 years ago
Pro
Rogie
Agreed with Wallace. His are a great attempt, but lack in realism, whereas yours look legit.
over 2 years ago
Very neat! Thanks for sharing, looks great...
Although I hate to be so cynical, I have to say it: the shadow isn't really curling the box, it's showing that the background is warped. =)
If there was only a way to trim a pixel or two off of the boxes edges near the corners. CSS layer masks sure would be nice. Sigh.
over 2 years ago
Pro
Dave Ruiz
Looks even better than the original, which was already great. Are you planning on posting the code?
over 2 years ago
Mmmh, not bad!
Hopefully IEX will be on par with today's browsers CSS3 capabilities, so we'll be finally able to see this awesomeness everywhere! ;)
over 2 years ago
PS I mean IE v.10, of course... whenever it is released... :-P
over 2 years ago
Pro
Matt Hamm
Hello Cameron. Thanks for taking this forward. This looks really, really lovely. I particularly love the inset shadow on the boxes too. Please share the new code once finished! :)
@Chris I totally agree with you too. Mine do look a little too flared.
I also had a problem using z-index on the :before :after. For example when you want to give the containing a background color. The shadows would sit behind the and become invisible, would be great to see a solution to this problem in particular.
over 2 years ago
hot
over 2 years ago
Pro
Andy Johnson
The subtle inset shadow on the boxes are a nice touch.
over 2 years ago
Pro
Gerren Lamson
awesome.
over 2 years ago
Pro
Cameron Moll
Good clarification, Jason.
over 2 years ago
Pro
Cameron Moll
Hope you'll all forgive me for abusing the comment space, but here's the modified code by request. Took out the moz and IE browser prefixes while I was testing. (You can find the syntax for those in Matt's original code.)
ul.box li {
list-style-type: none;
margin: 0 30px 30px 0;
padding: 0;
width: 204px;
height: 113px;
position: relative;
float: left;
background: #ffffff; /* old browsers */
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
}
ul.box li:after {
z-index: -1;
position: absolute;
background: transparent;
width: 70%;
height: 55%;
content: '';
right: 10px;
bottom: 10px;
-webkit-transform: skew(15deg) rotate(6deg);
-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}
ul.box li:before {
z-index: -2;
position: absolute;
background: transparent;
width: 70%;
height: 55%;
content: '';
left: 10px;
bottom: 10px;
-webkit-transform: skew(-15deg) rotate(-6deg);
-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}
over 2 years ago
Pro
Chris Wallace!
@Jason Robb I wish this were closer to being implemented in all major browsers: http://webkit.org/blog/181/css-masks/
over 2 years ago
Don't forget to add the non vendor prefixed properties for box-shadow and transform as well for future proofing! (I'm guessing you've missed -moz- out in your paste because you copied from Safari).
over 2 years ago
Pro
Cameron Moll
Correct. Left out anything not specific to Safari for now, as I was (and still am) testing in Safari.
over 2 years ago
@Chris Wallace: Ditto! You just made me squeal with joy.
over 2 years ago
Pro
Allison Grayce
Very cool, Cameron! Thanks so much for sharing!
over 2 years ago