Photoshop vs CSS

9 Responses

1. Pro Grant Blakeman

   photoshop comp on the left - html/css build-out on the right. i used css3 for all the fancy circles and lines and i'm pretty happy with the result.

   about 2 years ago

2. Pro Jim Jeffers

   Very nice! Are you using border-radius to create the circles or getting into canvas/svg? Is the background image browser generated as well or just the table and icons? Good stuff!

   about 2 years ago

3. Jason Robb

   Wait, is the background CSS? The leaves and overlaps, too? Impressive, regardless.

   about 2 years ago

4. Pro Grant Blakeman

   no, no - sorry if i was misleading. only the chart stuff is css. this type of background would probably lend itself well to canvas/svg, but i haven't had the time to play with that. for now i draw the backgrounds in illustrator.

   @Jim - yes, using border-radius (and it's browser-specific varieties) for the circles.

   about 2 years ago

5. Jason Robb

   Still, nice work, Grant.

   I assume you've seen Border radius

   about 2 years ago

6. Bruno Monteiro

   Nice work, Grant.

   about 2 years ago

7. Pro Krystyn Heide

   Fantabulous — how does it degrade in older browsers? Plain circles?

   As a sidenote, I just peeked at your design portfolio and discovered you did the Autumn Film's Safe & Sound packaging. I loved that piece (and the music!)

   about 2 years ago

8. Pro Grant Blakeman

   Thanks Krystyn! Glad you like The Autumn Film stuff. I also did all of the stuff for their new album, The Ship and The Sea.

   As far as degradation, for most older browsers, the circles will just become squares. This part of the site is behind a pay-wall and we won't be supporting IE6, so I don't know (and don't care) what mess happens there. Heh.

   about 2 years ago

9. Pro Krystyn Heide

   Lucky! I will be so happy when I can stop writing conditional comments for IE6.

   about 2 years ago