My effort at replicating Mac OSX Dock using only CSS :)
A Pen by vineet chopdekar on CodePen.
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') |
My effort at replicating Mac OSX Dock using only CSS :)
A Pen by vineet chopdekar on CodePen.
/* 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; | |
} |