An OSX style animated dock with CSS

CSS Dock Clone

While, playing around with some CSS3 transitions I came up with a pretty cool little dock clone. I’m sure there’s some refactoring that can be done, sure you could use javascript for more cross-browser compatibility, you could even use CSS3 Transforms for the scaling effects, but I just wanted to sit down with CSS3 transitions alone to familiarize myself with them more and to see what could be accomplished with them.

So Please don’t bug me about any issues you may encounter along the way and for god’s sake don’t use this code on your site most of it *only* works well in WebKit based browsers anyway so… you’ve been warned/told.

If you’re already familiar with CSS transitions and just want see the “OS X style dock”, feel free to skip ahead below, otherwise enjoy.

Shapeshifting Boxes
Pseudo Dock
OS X Style Dock

Shapeshifting Boxes

Onward, below are some boxes gettin’funky with their bad collective selves if you mouse over them, that’s cool. It’s just some beginnings of noodling with CSS transitions. Just some various boxes changing size, shape, and colors(background). It’s pretty straight forward, but it got the ball rolling and I had to start tinkering.

Code/Example

Demo

Box 1

Box 2

Box 3

Html

<div id="box1" class="box">
<h2>Box 1</h2>
</div>
<div id="box2" class="box">
<h2>Box 2</h2>
</div>
<div id="box3" class="box">
<h2>Box 3</h2>
</div>

CSS

.box {
  position: relative;
  margin: 0 0px 0 300px;
  width: 150px;
  height: 150px;
  background-color: #4589f4;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
}
.box h2 {
  text-align: center;
  position: relative;
  top: 60px;
  font-weight: bold;
  letter-spacing: 3px;
}
#box1 {
  background: #facd45;
  color: #fff;
  left: 0px;
  -webkit-transition: all 0.3s ease-in;
  -moz-transition: all 0.3s ease-in;
  -o-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
}
#box1:hover {
  width: 300px;
  background-color: #000000;
  color: #fff;
  left: 0px;
}
#box2 {
  -webkit-transition: all 0.3s ease-in;
  -moz-transition: all 0.3s ease-in;
  -o-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
}
#box2:hover {
  position: relative;
  width: 300px;
  background-color: #000000;
  color: #fff;
  margin: 0 0 0 150px;
}
#box3 {
  background: #ff4415;
  color: #fff;
  left: 0px;
  -webkit-transition: all 0.3s ease-in;
  -moz-transition: all 0.3s ease-in;
  -o-transition: all 0.3s ease-in;
  transition: all 0.3s
  ease-in;
}
#box3:hover {
  width: 300px;
  background-color: #000000;
  color: #fff;
  left: 0px;
}

Pseudo Dock

Here are a few more boxes this time as a list and positioned horizontally with floats. The position/movement of the text is accomplished in transitioning the top margin of the anchor element inside the list-item element, while also transitioning the size of the list-item.

Code/Example

Demo

HTML

<div id="dock">
<ul>
	<li><a href="#">Item 1</a></li>
	<li><a href="#">Item 2</a></li>
	<li><a href="#">Item 3</a></li>
	<li><a href="#">Item 4</a></li>
</ul>
</div>

CSS

#dock { width:800px; height:75px; margin:70px; }
#dock ul { width:800px; }
#dock ul li{
  display:inline;
  float:left;
  margin:10px 6px 0 0;
  width:65px;
  height:65px;
  background-color:#000;
  color:#fff;
  text-align:center;
  border-radius:5px;
  -moz-border-radius:5px;
  -webkit-transition: all 0.12s ease-in;
  -moz-transition: all 0.12s ease-in;
  -o-transition: all 0.12s ease-in;
  transition: all 0.12s ease-in;
}
#dock ul li a{
  display:block;
  color:#fff;
  width:100%;
  height:100%;
  text-decoration:none;
  margin:0 0 0 0;
  padding:22px 0 0 0;
  -webkit-transition: all 0.12s ease-in;
  -moz-transition: all 0.12s ease-in;
  -o-transition: all 0.12s ease-in;
  transition: all 0.12s ease-in;
}
#dock ul li a:hover{
  margin:-30px 0 0 0;
  padding:0 0 50px 0;
  color:#000;
}
#dock ul li:hover{
  font-size:1.4em;
  width:85px;
  height:85px;
  margin:-22px 8px 20px 0;
}

Hmmm… does that work with background-images and the new CSS3 “background-size” declaration?If so, I think I could make an OSX style dock complete with the zoom effect on the icon.

OS X Style Dock

Here I’ve taken what I learned from the previous experiments and tried to recreate/approximate an OS X style dock using nothing but CSS transitions and some other new CSS3 declarations (background-size, text-shadow,box-reflection etc…) to create this navigation element without any javascript. Like before this is just an unordered list in the html, but one more container element was needed for the background-image of the dock itself and span element around the text/label was added to allow for the current page to be indicated with the orby/glowy indicator ball (see the Captain Beefheart Record below).

For the time being this code is only fully working in WebKit based browsers (Safari, Chrome) and reasonably well (a decent approximation of the effect) in Firefox 4 (no-reflections, no text-stroke). I wouldn’t even look at this in IE I’m sure it’s crazy, wonky. Even the future-slotted IE 9, will only be implementing limited support for css transforms and no support for transitions.

Code/Example

Demo

HTML

<div id="dock2-background">
<div id="dock2">
<ul>
	<li id="item1"><a href="#"><span>Coffee</span></a></li>
	<li id="item2"><a class="current" href="#"><span>Captain Beefheart</span></a></li>
	<li id="item3"><a href="#"><span>Comedian</span></a></li>
	<li id="item4"><a href="#"><span>Cones</span></a></li>
	<li id="item5"><a href="#"><span>Contemplate</span></a></li>
	<li id="item6"><a href="#"><span>Computer</span></a></li>
</ul>
</div>
</div>

CSS

#dock2-background {
  display: block;
  background-image: url("../../../images/dock.png");
  background-repeat: no-repeat;
  height: 86px;
  width: 550px;
  margin: 100px 50px 100px 50px;
  font-size: 1.2em;
  line-height: 1.2em;
}
#dock2 {
  margin: -18 0 0 0;
  height: 73px;
  -webkit-box-reflect: below 1px;
  -webkit-gradient(
     linear,
     left top,
     left bottom,
     from(transparent),
     color-stop(0.83, transparent),
     to(white)
   );
}
#dock2 ul {
  display: block;
  width: 100%;
  height: 88px;
  margin: 0 0 0 18px;
}
#dock2 ul li {
  display: inline;
  float: left;
  margin: 10px 8px 0 6px;
  width: 65px;
  height: 65px;
  color: #f0f0f0;
  text-align: left;
  -webkit-transition: all 0.12s ease-in;
  -moz-transition: all 0.12s ease-in;
  -o-transition: all 0.12s ease-in;
  transition: all 0.12s ease-in;
  -moz-background-size: 100%;
  background-size: 100%;
  background-repeat: no-repeat;
}
#dock2 ul li:hover {
  width: 85px;
  height: 85px;
  margin: -10px 8px 0px 0;
  padding: 0;
}
#dock2 ul li a {
  display: block;
  color: #000;
  width: 100%;
  height: 100%;
  text-decoration: none;
  margin: 0 0 0 0;
  padding: 22px 0 0 0;
  -webkit-transition: all 0.12s ease-in;
  -moz-transition: all 0.12s ease-in;
  -o-transition: all 0.12s ease-in;
  transition: all 0.12s ease-in;
  -webkit-text-stroke: 1px #666;
  font-weight: bold;
  opacity:0;
}
#dock2 ul li a:hover, #dock2 ul li a:focus {
  text-shadow: #333 0px 1px 3px;
  margin: -35px 0 0 0;
  padding: 0 0 55px 0;
  color: #fff;
  opacity: 100;
}
#dock2 ul li a span {
  display: block;
  width: 100%;
  height: 100%;
}
#dock2 ul li a span:hover, #dock2 ul li a span:focus {
  opacity: 100;
  -webkit-transition: all 0.10s ease-out;
  -moz-transition: all 0.10s ease-out;
  -o-transition: all 0.10s ease-out;
  transition: all 0.10s ease-out;
  padding: 0 7px 55px 0px;
}
#item1 {
  background-image: url("images/Coffeematic.png");
}
#item2 {
  background-image: url("images/vinyl.png");
}
#item3 {
  background-image: url("images/microphone.png");
}
#item4 {
  background-image: url("images/speaker.png");
}
#item5 {
  background-image: url("images/SmileCreature.png");
}
#item6 {
  background-image: url("images/iMac.png");
}                        

#dock2 ul li a.currentosxdock {
  background-image: url("images/current.png");
  background-repeat: no-repeat;
  background-position: 50% 90%;
  opacity:100;
}
.currentosxdock span {
  opacity:0;
 }
.currentosxdock span:hover, .currentosxdock span:focus {
   opacity: 100;
   -webkit-transition: all 0.10s ease-out;
   -moz-transition: all 0.10s ease-out;
   -o-transition: all 0.10s ease-out;
   transition: all 0.10s ease-out;
   padding: 0 7px 55px 0px;
 }

CSS Transitions are Powerful, Fast, and Beautiful

The sooner we can use this in real world projects with a reliable level of support across the browser ecosystem, the better. These animations are hardware accelerated, native, and smooth as silk. I can easily envision implementing some progressive enhancement with CSS transitions today. Simple animations on normal css hovers degrade nicely in those browsers that don’t support them, but for the time being complex animations are still probably best done through javascript, but work is being done to implement many of the traditional javascript effects like fade and css animate natively in the browsers that support it, which means that soon we’ll only have to do the work in javascript and let our javascript library handle the appropriate rendering method. Either way it all pans out, I think it’s clear that the web is going to become a lot more animated and I am excited to see what’s going to be created.

CSS3 and HTML5 are on their way and it’s going to be awesome.

An OSX style animated dock with CSS

Shapeshifting Boxes

Code/Example

Demo

Box 1

Box 2

Box 3

Html

CSS

Pseudo Dock

Code/Example

Demo

HTML

CSS

OS X Style Dock

Code/Example

Demo

HTML

CSS

CSS Transitions are Powerful, Fast, and Beautiful

Latest Blog Posts

An OSX style animated dock with CSS

Remembering to Draw

New Music For A New Year.