Create Amazing Mac(OS X) Dock UI Using Pure CSS3

Published on October 9, 2012

When I was working on  Amazing Windows7 Start Menu Using Pure CSS3 , I want to create something on Mac OS X UI also. So today I will explain you how to create Amazing Mack Dock UI using CSS3. In this code I am using pure css3 properties for different effects. Have a look at the demo below.

index.html

<div class="dock_left"></div>
<div class="dock">
  <ul>
    <li>
      <a href="//techumber.com/"><img src="icons/home.png" alt="Home"/></a>
    </li>
    <li>
      <a href="//techumber.com/"><img src="icons/apple.png" alt="Apple"/></a>
    </li>
    <li>
      <a href="//techumber.com/"><img src="icons/safari.png" alt="Safari"/></a>
    </li>
    <li>
      <a href="//techumber.com/"><img src="icons/harddrive.png" alt="harddrive"/></a>
    </li>
    <li>
      <a href="//techumber.com/"><img src="icons/tools.png" alt="Tools"/></a>
    </li>
  </ul>
</div>
<div class="dock_right"></div>

This is the simple html on which we will apply our css properties. style.css

.dock ul {
  display: inline-block;
  float: left;
  width: auto;
  margin: 0px;
  padding: 0px;
  list-style: none;
  background: rgba(0, 0, 0, 0.3);
  padding-right: 76px;
}
.dock ul li {
  width: auto;
  height: auto;
  display: inline-block;
  bottom: 0;
  vertical-align: bottom;
  margin-top: -43px;
}
.dock ul li a {
  display: block;
  height: 100px;
  width: 100px;
  position: relative;
  -webkit-transition-property: width, height, margin-top;
  -webkit-transition-duration: 0.5s;
  -o-transition-property: width, height, margin-top;
  -o-transition-duration: 0.5s;
  -moz-transition-property: width, height, margin-top;
  -moz-transition-duration: 0.5s;
}
.dock ul li a:hover {
  width: 150px;
  height: 150px;
  margin-top: -50px;
}
.dock ul li a img {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border: none;
  padding: 0px 0px 0px 30px;
}
.dock_left {
  width: 31px;
  -webkit-transform: rotate(33deg);
  -moz-transform: rotate(33deg);
  -o-transform: rotate(33deg);
  position: relative;
  background: #eee;
  overflow: hidden;
  float: left;
  height: 100px;
  z-index: 2;
  margin: -18px;
}
.dock_right {
  width: 36px;
  -webkit-transform: rotate(-33deg);
  -moz-transform: rotate(-33deg);
  -o-transform: rotate(-33deg);
  position: relative;
  background: #eee;
  overflow: hidden;
  float: left;
  height: 100px;
  z-index: 2;
  margin: -18px;
}

In this we applying CSS3 properties transform and transition to get the effects. Hope you like it!