Monday, May 31st, 2010

OS X Leopard-style Stacks in CSS3 only

Category: CSS

Gordon Brander has a fun demo implementing
the “Stacks” dock concept from Leopard using CSS3 only, including the following:

  • :target pseudo-class
  • transform
  • transition
  • border-radius
  • border-image
  • CSS gradients
  • rgba colors
  • text-overflow: ellipsis

Check out the source to see it at work, with code such as:

  1. .stack:target > ul {
  2.     opacity: 1;
  3.     -moz-transform: scale(1); /* FF3.5+ */
  4.     -webkit-transform: scale(1); /* Saf3.1+, Chrome */
  5.     -o-transform: scale(1); /* Opera 10.5 */
  6.     transform: scale(1) ;
  7. }
  9. .stack > ul > li > a:focus {
  10.     background-image: gradient(linear,left top,left bottom, color-stop(0, rgba(221, 221, 221, .8)), color-stop(1, rgba(61, 61, 61, .8)));
  11.     background-image: -moz-linear-gradient(top, rgba(221, 221, 221, .8), rgba(61, 61, 61, .8)); /* FF3.6 */
  12.     background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, rgba(221, 221, 221, .8)), color-stop(1, rgba(61, 61, 61, .8))); /* Saf4+, Chrome */
  13.     outline: 0;
  14. }

Posted by Dion Almaer at 6:01 am

4 rating from 1 votes


Comments feed TrackBack URI

I’m gonna tell you right now. I do not like ‘pure css’ for things like this. Of course, I think css is pretty idiotic anyway so I may be biased.

Comment by okonomiyaki3000 — May 31, 2010

I agree that CSS is silly but this is also a very unexciting post. Simply reposting simple css transitions.. again! but this time someone stole apple graphics! COOLIO …

Comment by igl — May 31, 2010

CSS is for presentation. Is everything in this demo not about presentation?

You might say “click events”, but other events like :hover and :focus are super useful. So bring on the CSS events.

However, this demo is not very polished. It doesn’t animate like the actual stack, and when you hit the Button, the stack turns back on. Annoying!

Comment by Baryn — May 31, 2010

The above was meant to read “…when you hit the Back button, the stack turns back on.”

Comment by Baryn — May 31, 2010

Nice. I did the slanting stacks version with CSS3, and it supports IE as well:

Comment by robnyman — May 31, 2010

Yes, the :target pseudo-class can simulate a click-handler :) However, all clicks in the demo are adding a new page to the browser history, so after playing a little with the demo, I had to hit Back a dozen times to actually go back to the previous page.

As far as I know, this cannot be avoided (without JS)…

Comment by simevidas — June 1, 2010

I don’t know how it looks like in Leopard, but I think it should be more beautiful with the property

.stack:target> ul {
-webkit-transform-origin: center bottom;
-moz-transform-origin: center bottom;
-o-transform-origin: center bottom;

Comment by Astat — June 2, 2010

font-family: 'lucida grande', sans-serif; would help.

Comment by mjuhl — June 2, 2010

Leave a comment

You must be logged in to post a comment.