One of these things is not like the other.

14 Responses

1. Pro Dan Rubin

   Test your skills:

   One of these was created in Photoshop, the other crafted in HTML/CSS with the following markup:

   <button><span></span></button>

   Can you tell them apart?

   over 3 years ago

2. Ben Bodien

   Wow, tough!

   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.

   over 3 years ago

3. Pro Dan Rubin

   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 :)

   over 3 years ago

4. Jeremy Swinnen

   Bottom: CSS
   Top: Photoshop

   over 3 years ago

5. Sebastian Torresi

   Top: Photoshop
   Bottom: CSS

   over 3 years ago

6. Jesse Gardner

   Almost positive the bottom is CSS and the top is Photoshop.

   over 3 years ago

7. Ben Bodien

   Very well.

   Top: Photoshop
   Bottom: CSS3

   over 3 years ago

8. J. Cornelius

   I'm going against the grain here.

   Top: CSS
   Bottom: Photoshop

   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!

   over 3 years ago

9. Shaun Andrews

   Top: CSS
   Bottom: Photoshop

   I'm thinking the highlight on the top, and its rounding, is the give away.

   over 3 years ago

10. Pro Bryan Veloso

    Top: CSS
    Bottom: Photoshop

    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.

    over 3 years ago

11. Pro Dan Rubin

    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:

    Top: CSS
    Bottom: Photoshop

    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!

    over 3 years ago

12. Pro Dick

    That was fun :-D -- more, more!

    over 3 years ago

13. Pro Matthew Smith

    So this is what you were tweeting about, you're such a geek! ;)

    over 3 years ago

14. Pro Dan Rubin

    @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*

    over 3 years ago