Wednesday, July 15th, 2009

Aristo look and feel via CSS3

Alex MacCaw has taken the first public cut of the “Aristo” look and feel from 280 North, designed by Sofa, and has CSS3-ified it.

It uses some nice shiny CSS such as:

  1. -webkit-box-shadow: 0 0 15px #A1CAE2;
  2.  
  3. -webkit-border-image: url(../images/hud/button-bezel.png) 9 13 10 13 / 8px 13px 9px 13px repeat repeat;
  4.  
  5. background-image: url(../images/scroller-up-arrow-track.png), url(../images/scroller-vertical-track.png);
  6. background-repeat: no-repeat, repeat-y;

Time to “fork” it on Github and add in the -moz versions too ;)

Posted by Dion Almaer at 6:24 am
4 Comments

+++--
3.6 rating from 50 votes

4 Comments »

Comments feed TrackBack URI

Looks nice but can’t be used by most people, and has a few odd visual glitches.
.
The most offensive one:
http://skitch.com/michaelthompson/ba2ac/aristo

Comment by MichaelThompson — July 15, 2009

Michael,
Yes – that’s a webkit bug – no easy way to get round that unfortunately.
The reason I did it is for a Ruby Desktop GUI framework I’m making, called Bowline, that runs on Titanium (which uses webkit).

Comment by maccman — July 15, 2009

They could’ve used even less images though, using more gradients for example. But nice effort none the less.

Comment by lensco — July 15, 2009

sorry for this stupid question, but there is a tutorial about using the elements (i.e. popup drop down)?

Comment by acarmisc — July 15, 2009

Leave a comment

You must be logged in to post a comment.