keyboard shortcuts: ← previous shot → next shot L or F like
Show and tell for designers.
44,289,173,567 pixels dribbbled
Copyright © 2009-2012 Dribbble LLC. All screenshots © their respective owners.
Handcrafted in Salem, Massachusetts. Hosted by (mt) Media Temple.
12 Responses
It’s time for another PSD-vs-CSS3 test. Can you tell which is which?
Note: the pixel-and-radius icon is an image in both cases, but everything else is done with web fonts and CSS3 (in the CSS3 version, that is).
over 1 year ago
Pro
Chris Johnson
I think TOP is CSS3
over 1 year ago
If it weren't for the text, I'd have no idea.
Top: CSS3 -> browsers don't handle kerning pairs generally, and this has a few kerning issues.
Bottom: PSD -> Photoshop produces slightly blurrier text and has better kerning.
over 1 year ago
Pro
Christopher Magruder I Une...
Top is PSD. I think. Gradient seems more "finessed" to fit the design. But what do I know may just be the turkey hangover.
Bottom line, nice work!
over 1 year ago
Top is CSS3 -- subpixel antialiasing
over 1 year ago
Pro
Dan Rubin
It's getting harder to tell :) I'd say top is CSS, based on the border-radius rendering (assuming you used a Webkit browser).
over 1 year ago
Chris Clark checked for exactly the same thing as I did. It's an easy method :)
over 1 year ago
Pro
simurai
I was wrong on Drew's quiz. So new chance.. I think top is CSS3.. less sharp text rendering?
over 1 year ago
I did the same thing recently. http://drbl.in/Eui
Pretty awesome these don't have to be graphics anymore!
over 1 year ago
THE CORRECT ANSWER IS:
Top is CSS3, bottom is PSD.
The presence of type certainly made this one a lot easier, so I commend Dan Rubin for having spotted it based on the border-radius rendering. Matt Wiebe and Chris Clark get a mention for knowing their type rendering engines very well.
A method I'm surprised no one used / noticed: if you zoom up close to the top one, you'll see that there is a top-line bezel in a lighter color. This is an artifact of CSS Box Shadow set to inset, which is how the inner shadow is created. If you look at the corners of this bezel, you'll see the obvious CSS rendering gotcha. Photoshop (and I believe Firefox, too) is smart about rendering semi-translucent borders; Webkit isn’t as it doubles them up.
For me, however, the easiest way to spot (right now) it is by looking at the gloss: it's non-aliased, which I made more difficult to notice by using a perfect 45-degree angle, but it's still visible enough. Getting diagonal lines NOT anti-aliased in Photoshop is a lot more difficult than it is to get them anti-aliased, which is a good thing. Webkit's CSS Gradients are, at this time at least, rendered without anti-aliasing at the edges.
Anyway, it was fun to see how for the first half hour, everyone responding on Twitter was wrong and everyone responding on Dribbble was right. It’s also a lot of fun to see just how much we can accomplish in CSS3 these days. :)
Thanks for playing, everyone!
over 1 year ago
The banding on Photoshop's gradient is pretty noticeable, too. Yow. Nice to see that WebKit dithers by default.
over 1 year ago
True, though in fairness that could’ve been partly caused by JPEG compression + whatever processing the Dribbble servers may do as well. Still, a noteworthy catch (I was wondering if anyone would).
over 1 year ago