CSS version here - http://heldfree.com/play/clear_mac/
Gave a shot at doing a rebound in pure CSS3. The whole icon is composed of divs. Tools of trade - box shadows, 3d transforms, and perspective.
The tick is composed of two divs, so upper edges couldn't be perfected to match the original. The overlap can expose shadows and borders in the joint area. Also, the lower shadows couldn't be perfected due to this disjoint.
I had hopes to find a font that would suffice for tick, but at that size, getting the right rounded corner is hard. Last easier resort to perfect the tick mark would be SVG.
L or F like
Z toggle zoom
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
We’re Tiny along with
We Work Remotely and more.
© 2018 Dribbble. All rights reserved.
A community of designers sharing their work, process, and current projects.
Minimum 6 characters
Uh oh… We’re still waiting for our spam prevention code to load.
Already a member? Sign in