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

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="http://techumber.com/"><img src="icons/home.png" alt="Home"></a></li>  
<li><a href="http://techumber.com/"><img src="icons/apple.png" alt="Apple"></a></li>  
<li><a href="http://techumber.com/"><img src="icons/safari.png" alt="Safari"></a></li>  
<li><a href="http://techumber.com/"><img src="icons/harddrive.png" alt="harddrive"></a></li>  
<li><a href="http://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!

Get posts by email

Like what you're reading? Get these posts delivered to your inbox.