Techumber

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

Github avatar
Dimpu
October 09, 2012. 2 min read

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. Create Amazing Mack Dock UI Using Pure CSS3(techumber.com)

Demo

Download

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(0undefined 0undefined 0undefined 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: widthundefined heightundefinedmargin-top;
-webkit-transition-duration: 0.5s;
-o-transition-property: widthundefined heightundefinedmargin-top;
-o-transition-duration: 0.5s;
-moz-transition-property: widthundefined heightundefinedmargin-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!


...