MAC OSX Dock

index.jade

ul
  li.icon
    a(href='')
      img(src='http://i1350.photobucket.com/albums/p769/vineetrok/Finder_23_256x256x32_zps06bed0d4.png')
    img(src='http://i1350.photobucket.com/albums/p769/vineetrok/Finder_blurredReflect_zpse1b4026b.png')
  li.icon
    a(href='')
      img(src='http://i1350.photobucket.com/albums/p769/vineetrok/AppStore_23_256x256x32_zps64e3a022.png')
    img(src='http://i1350.photobucket.com/albums/p769/vineetrok/AppStore_blurredReflect_zps8e844042.png')
  li.icon
    a(href='')
      img(src='http://i1350.photobucket.com/albums/p769/vineetrok/Calendar_23_256x256x32_zps8bb56c61.png')
    img(src='http://i1350.photobucket.com/albums/p769/vineetrok/Calendar_blurredReflect_zps74b5a77b.png')
  li.icon
    a(href='')
      img(src='http://i1350.photobucket.com/albums/p769/vineetrok/iTunes_23_256x256x32_zps48cce610.png')
    img(src='http://i1350.photobucket.com/albums/p769/vineetrok/iTunes_blurredReflect_zps67519475.png')

MAC-OSX-Dock.markdown

MAC OSX Dock

My effort at replicating Mac OSX Dock using only CSS :)

A Pen by vineet chopdekar on CodePen.

License.

style.css

/* http://thetecherra.com/wp-content/uploads/2012/07/615083096.jpg */
/*http://s9.postimg.org/ife6uyfcv/OS_X_Mountain_Lion_Galaxy_Wallpaper.jpg */


body { 
  background: url('http://s9.postimg.org/ife6uyfcv/OS_X_Mountain_Lion_Galaxy_Wallpaper.jpg') no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='(http://s9.postimg.org/ife6uyfcv/OS_X_Mountain_Lion_Galaxy_Wallpaper.jpg', sizingMethod='scale')";
  overflow:hidden;
}

ul{
  
  display:inline-block;
  position: absolute;
  bottom:4px;
  left:50%;
  list-style:none;
  z-index:1;
  margin:0;
  padding:20px 10px;
  perspective:260px;
  -webkit-perspective:260px;
  
}

ul:before{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index:-1;
  background:green;
  height:42px;
  display:inline-block;
  vertical-align:baseline;
  transform: rotateX(18deg);
  -webkit-transform:rotateX(18deg);
  background: rgb(115,139,159); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(115,139,159,1) 0%, rgba(195,207,215,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(115,139,159,1)), color-stop(100%,rgba(195,207,215,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(115,139,159,1) 0%,rgba(195,207,215,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(115,139,159,1) 0%,rgba(195,207,215,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(115,139,159,1) 0%,rgba(195,207,215,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(115,139,159,1) 0%,rgba(195,207,215,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#738b9f', endColorstr='#c3cfd7',GradientType=0 ); /* IE6-9 */
  outline:1px solid transparent;
  -webkit-border-radius: 1px;
  -moz-border-radius: 1px;
  border-radius: 2px;
  box-shadow: 0 -2px 0px -1px #FFFFFF inset;
  
}

ul:after{
  content:"";
  position:absolute;
  bottom:-4px;
  left:0;
  width:100%;
  height:5px;
  margin-left:-3px;
  background-color:#889196;
  z-index:-2;
  border-right:6px solid #889196;
  border-radius:0 0 1px 1px;
}


.icon{
  display:inline;
  position:relative;
}
.icon > img{
  opacity:0.2;
}
.icon a > img,.icon > img{
  width:52px;
  height:52px;
  transition:width .2s ,height .2s;
  transition-timing-function:ease;
}


.icon:hover img{
  width:72px;
  height:72px;
}

.icon > img{
  position:absolute;
  margin-top:10px;
  top: 0;
  left:0;
}
a{
  text-decoration:none;
}