Anton Peckkeyboard shortcuts: ← previous shot → next shot L or F like
keyboard shortcuts: ← previous shot → next shot L or F like
42,935,406,797 pixels dribbbled
Copyright © 2009-2012 Dribbble LLC. All screenshots © their respective owners.
Handcrafted in Salem, Massachusetts. Hosted by (mt) Media Temple.
32 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 1 year ago
Rebound
CSS page curls (Photoshop version)
by Cameron Moll
Here's the original comp in Photoshop.
over 1 year ago
Pro
Jory Raphael
Very nice.
over 1 year ago
Pro
Rogie
Rad!
over 1 year ago
Pro
Trent Walton
I love to see stuff like this. And kudos to Matt for sharing!
over 1 year ago
Pro
Chris Cashdollar
Really nice.
(Hmmm... how quickly can I work these into a new project?)
over 1 year ago
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 1 year ago
Brilliant.
over 1 year ago
Pro
Ryan Essmaker
Sweet! Totally have to try this out...
over 1 year ago
Pro
Rogie
Agreed with Wallace. His are a great attempt, but lack in realism, whereas yours look legit.
over 1 year 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 1 year ago
Pro
Dave Ruiz
Looks even better than the original, which was already great. Are you planning on posting the code?
over 1 year ago
Pro
Michel Bozgounov
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 1 year ago
Pro
Anton Peck
I think those would go perfect on my artwork page.
over 1 year ago
Pro
Michel Bozgounov
PS I mean IE v.10, of course... whenever it is released... :-P
over 1 year 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 1 year ago
hot
over 1 year ago
Pro
Andy Johnson
The subtle inset shadow on the boxes are a nice touch.
over 1 year ago
Pro
Gerren Lamson
awesome.
over 1 year ago
Pro
Cameron Moll
Good clarification, Jason.
over 1 year 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 1 year ago
@Jason Robb I wish this were closer to being implemented in all major browsers: http://webkit.org/blog/181/css-masks/
over 1 year 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 1 year ago
Pro
Cameron Moll
Correct. Left out anything not specific to Safari for now, as I was (and still am) testing in Safari.
over 1 year ago
@Chris Wallace: Ditto! You just made me squeal with joy.
over 1 year ago