Skip to content

Instantly share code, notes, and snippets.

@ryanknutson
Created April 22, 2015 14:06
Show Gist options
  • Save ryanknutson/a0c3a53695d279731f80 to your computer and use it in GitHub Desktop.
Save ryanknutson/a0c3a53695d279731f80 to your computer and use it in GitHub Desktop.
ZGEeQM
<main>
<div class="centered login">
<div class="dock_left"></div>
<div class="dock">
<ul>
<li><a href="http://techumber.com/"><img src="http://placekitten.com/490/490" alt="Tools"></a></li>
<li><a href="http://techumber.com/"><img src="http://demo.techumber.com/MackDockWithCSS3/icons/apple.png" alt="Tools"></a></li>
<li><a href="http://techumber.com/"><img src="http://demo.techumber.com/MackDockWithCSS3/icons/apple.png" alt="Tools"></a></li>
</ul>
</div>
<div class="dock_right"></div>
</div>
</main>
.centered {
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}
html {
background: url(http://p1.pichost.me/640/66/1912532.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.login{
display: block;
margin:auto;
padding:40px 40px 30px;
position: absolute;
background-color:#f8f8f8;
background-image:-webkit-linear-gradient(top, #f0f0f0, #ddd);
background-image:-moz-linear-gradient(top, #f0f0f0, #ddd);
background-image:linear-gradient(top, #f0f0f0, #ddd);
border-radius:5px;
border:#fff 1px solid;
box-shadow: rgba(0,0,0,0.5) 0px 3px 20px;
text-align: center;
}
.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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment