Tuesday, April 28th, 2009

Even designers are using CSS3? :)

Category: CSS, Design

Sean Martell is my hero. He did the Bespin logos and a bunch of the Mozilla works in general. When Ben and I were in Toronto we got to see him at work at his WACOM tablet, and it is a sight to behold.

I wish I could do that kind of design work, but for me it isn’t to be…. my design is left to code :/

Anyway, he has been working a lot on the Fennec (Firefox mobile) design and just
wrote about using CSS3 to build flexible UI elements without recutting UI graphics all over:

Designing UI elements for a mobile browser has taught me a great deal when it comes to creating interactive graphical elements that are to be used in a very small space. Of course, when I say small space, I mean a small space that has the potential to be different for each handset out there. Not only are we talking resolution differences, but the screen DPI can change from device to device as well.

So after resizing and re-slicing the Fennec UI for the second time, I quickly realized that this could be a full-time job for a team of designers depending on the list of handsets Fennec will be appearing on.

Hold the phone… whats this? Firefox 3.5 enables a new slew of fun CSS3 design styles eh? Rounded edges eh? Embedded fonts eh?

* gears turning, monkeys typing, hamsters running *

What if we could replace almost all of the graphical UI elements within Fennec with CSS created equivalents? As a designer, am I comfortable bypassing Photoshop and letting CSS run the pixel rodeo? After a few initial tests, the answer to both of those questions was a very solid “yes”. A solid “friggin’ right” if in Cape Breton.

Here are some nice dark toggles:

with code looking like:

  1. .toggleONleft {
  2.     font-family: ‘DroidSans-Bold’;
  3.     text-transform:uppercase;
  4.     padding: 0px 8px 0px 12px;
  5.     -moz-border-radius-topleft: 0.5em;
  6.     -moz-border-radius-bottomleft: 0.5em;
  7.     -webkit-border-top-left-radius: 0.5em;
  8.     -webkit-border-bottom-left-radius: 0.5em;
  9.     border-top: 4px solid #aaa;
  10.     border-left: 4px solid #ccc;
  11.     border-right: 4px solid #ccc;
  12.     border-bottom: 4px solid #ccc;
  13.     -moz-border-top-colors:#aaa #bbb #ccc #ddd;
  14.     -moz-border-left-colors:#aaa #bbb #ccc #ddd;
  15.     -moz-border-bottom-colors:#aaa #bbb #ccc #ddd;
  16.     -moz-border-right-colors:#aaa #bbb #ccc #ddd;
  17.     background-color: #ddd;
  18.     display: inline;
  19. }
  21. .toggleOFFright {
  22.     font-family: ‘DroidSans-Bold’;
  23.     text-transform:uppercase;
  24.     color:#414141;
  25.     padding: 0px 12px 0px 8px;
  26.     -moz-border-radius-topright: 0.5em;
  27.     -moz-border-radius-bottomright: 0.5em;
  28.     -webkit-border-top-right-radius: 0.5em;
  29.     -webkit-border-bottom-right-radius: 0.5em;
  30.     border-top: 4px solid #ccc;
  31.     border-left: 4px solid #ccc;
  32.     border-right: 4px solid #ccc;
  33.     border-bottom: 4px solid #aaa;
  34.     -moz-border-top-colors:#aaa #fff #fff #fff;
  35.     -moz-border-right-colors:#aaa #dedede #efefef #fafafa;
  36.     -moz-border-left-colors:#aaa #dedede #efefef #fafafa;
  37.     -moz-border-bottom-colors:#aaa #dedede #efefef #fafafa;
  38.     background-color: #fff;
  39.     display: inline;
  40. }

Posted by Dion Almaer at 5:26 am

4.3 rating from 26 votes


Comments feed TrackBack URI

What is “-moz-border-top-colors” with 4 colors specified??
I did a quick check of css3 spec and didn’t spot anything like that.

Also, the text in the image doesn’t look uppercase at all except for the first letter (text-transform:uppercase;).

Finally, those border colors specified .toggleONleft don’t seem to correspond to way darker tones evident in the image above. Heck background itself is #414141, and other than text every color of the On button looks darker.

Maybe it’s the lack of coffee, maybe I’m still not fully awake but something here doesn’t add up. :)

Comment by iliad — April 28, 2009

iliad, click through to the article and all will be revealed.

Comment by PJC — April 28, 2009

text-transform: uppercase? I’m not seeing it….

aside: OpenId login would be *very* cool here on Ajaxian….

Comment by xmlblog — April 28, 2009

Way to much “code” in CSS for “simple” stuff like this. We need a better syntax or so. Who wants to write THAT much?

Comment by Aimos — April 28, 2009

To me “design” implies form AND function. So if all you do is photoshop you’re just another graphics artist. But if you implement it in css/html THEN you’re a designer (web).

I just wish more “designers” would get their hands dirty and get a feel for the canvas like this guy. Photoshop is Lala-land. Sure every design may go through several iterations in it (and may even start from scratch there) but a layered psd-file doesn’t constitute a finished design in my book.

And the sooner the design makes a leap from photoshop layers to tags, ids and classnames the better.

Comment by rasmusfl0e — April 28, 2009

@iliad see http://developer.mozilla.org/en/CSS/-moz-border-bottom-colors

Comment by GordonT — April 29, 2009

Would have been even more impressive if Firefox weren’t the only browser to not do gradient backgrounds. :(

Comment by AnM8tR — April 29, 2009

All very nice, but indeed -moz-border-top-colors (plural!) isn’t part of the CSS3 specification ( http://www.w3.org/TR/2008/WD-css3-background-20080910/ ). So, the *cool* part of this article (ie. the part that allows you to dump PS to create the nice borders) isn’t supported by any browser accept Firefox.

Comment by mvcoile — April 29, 2009

AnM8tR – I thought webkit did this too:

Comment by blinkingmarquee — April 30, 2009

Never mind AntM8tR – read you wrong.

Can’t SVG in FF3 do gradients?

Comment by blinkingmarquee — April 30, 2009

Ah yes, thank you for pointing out that I missed the most obvious part – the article itself :)

@Aimos: There are ways to shorten that code, I think the designer just put it this way so that there are no ambiguities.

Anyway, I agree with the general consensus, until these are adopted as part of official CSS3 spec and become supported by all major browsers, it’s too early to be jumping on the “replace Photoshop with CSS” band wagon. :D

Comment by iliad — April 30, 2009

Leave a comment

You must be logged in to post a comment.