Test your skills:
One of these was created in Photoshop, the other crafted in HTML/CSS with the following markup:
Can you tell them apart?
over 3 years ago
The only difference I can see (with the sun on my monitor at the moment) is a slight variation in hue between the two. The rendering of the corners and the borders looks near identical even when I zoom right in, but I might be missing something.
That's about the only difference, probably thanks to Photoshop's color management (unless the CSS3 gradients are doing something weird compared to the Photoshop gradient, which is possible).
But you still have to guess which is which :)
Almost positive the bottom is CSS and the top is Photoshop.
I'm going against the grain here.
I say that because it seems the anti-aliasing and color blend on the rounded corners seems just slightly smoother on the bottom one. I'm guessing the browser isn't capable of that level of smoothing.
Either way, well done, sir!
I'm thinking the highlight on the top, and its rounding, is the give away.
The gradient on the top one is a lot more balanced than the one below it. Bottom one looks like there's a layer effect on the gradient.
I love how hard this is — Webkit's rendering of CSS3 is so slick, we can actually do stuff like this instead of using an image, and it fools even designers :)
If you said:
You are correct!
@J.: Way to go against the grain :) It's remarkable how similar the rendering is though, Webkit does a *really* nice job (especially compared to Mozilla, which has a few inconsistencies that ruin the effect).
@Shaun: If you zoom in you'll see both have highlights that are nearly identical. The shades in the gradient are the main difference, which leads me to:
@Bryan: You nailed it (not surprising). The Photoshop gradient is set to Soft Light, so even though the start/end colors are the same, the way it gets there is different. Good eyes!
That was fun :-D -- more, more!
So this is what you were tweeting about, you're such a geek! ;)
@Matthew: guilty as charged, I'm afraid ;) And yes, Firefox/Mozilla doesn't render this nearly as well (the border-top in particular, but also the outer border... plus weird positioning issues), which means that even though we can do really cool stuff without any images, we're still at the mercy of browser developers when it comes to things working properly. *sigh*
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.
Copyright © 2009–2013 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.
Follow Dribbble on Twitter