Get W3 CSS for Responsive Web Sites and Web Dock

Malas mosting sebenarnya :)) Dalam postingan sebelumnya what your choice bootstrap or material design google gue memberikan satu link extra source ke halaman w3schools yang berbicara tentang "faster and more beautiful responsive web sites inspired by google material design" Nah, AA Koben sudah buatkan versi offline halaman tersebut bagi kalian! Tetapi hanya berjalan pada browser mozilla ;)) Bagi yg mau silahkan download Google Material Design.zip downloads.ziddu.com/download/24947130/Google-Material-Design.zip.html Ekstrak file.zip kemudian buka pada address bar browser file dengan nama W3.CSS Home.htm Dari codepen dengan nama user Akshay Nair, saya mencomot beberapa tutorial ringan. Yang akan ane bahas yaitu tentang web dock

#dock {
position: fixed;
bottom: 0;
width: 100%;
min-height: 30px;
}
#dock .dock {
margin: 0 auto -17px;
transform-style: preserve-3d;
transform: translateY(100px);
perspective: 5000px;
perspective-origin: 50% 0;
transition: all 0.4s ease;
text-align: center;
}
#dock .dock ul {
list-style-type: none;
padding: 0;
z-index: 100;
margin-bottom: -119px;
transform: translateZ(100px);
}
#dock .dock ul li {
display: inline-block;
}
#dock .dock ul li a {
display: inline-block;
background: #fff;
border: 2px solid #aaa;
width: 50px;
height: 50px;
border-radius: 50%;
vertical-align: center;
text-decoration: none;
transition: all 0.4s ease;
text-align: center;
line-height: 50px;
font-size: 13px !important;
color: #555;
font-family: Helvetica,sans-serif;
}
#dock .dock ul li a:hover ~ .label {
opacity: 1;
top: -20px;
}
#dock .dock ul li span.label {
position: absolute;
top: -5px;
margin-left: -50px;
opacity: 0;
transition: all 0.2s ease;
color: #888;
}
#dock .dock .back-dock {
width: 400px;
margin: 0 auto -80px;
z-index: -1;
height: 200px;
background: #333;
transform: rotateX_(260deg);
border-radius: 10px;
}
#dock .dock .back-dock ul {
text-align: center;
opacity: 0.2;
-webkit-filter: blur(3px);
filter: url(#blur-effect);
/********
This Is Snippet CSS Blur for Mozilla
http://beben-koben.blogspot.com/2013/12/snippet-inline-css-filter-for-mozilla-ii.html
http://codepen.io/beben-koben/pen/ckKzh
*********/
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'blur-effect\'><feGaussianBlur stdDeviation=\'3\' /></filter></svg>#blur-effect");
transform: scale(1.01, 2);
}
#dock .dock .back-dock ul a {
cursor: default;
}
#dock:hover > .dock {
transform: translateY(0px);
}

Tolong ganti kode transform: rotateX_(260deg); tanpa garis bawah X_( (bentrok ama kode emot)

<div id='dock'>
<div class='dock'>
<ul>
<li><a href='#'>Home</a><span class='label'>Home</span></li>
<li><a href='#'>Post</a><span class='label'>Link1</span></li>
<li><a href='#'>Project</a><span class='label'>Link2</span></li>
<li><a href='#'>About</a><span class='label'>Link3</span></li>
<li><a href='#'>Contact</a><span class='label'>Link4</span></li>
</ul>
<div class='back-dock'>
<ul>
<li><a>A</a></li>
<li><a>B</a></li>
<li><a>C</a></li>
<li><a>D</a></li>
<li><a>E</a></li>
</ul>
</div>
</div>
</div>

Jika efek CSS tidak berjalan, maka code CSS harap di fix/prefix terlebih dahulu :D
Demo and other source:
>> WebDock - codepen.io/phenax/pen/LVqLdK
>> Custom Context Menu - codepen.io/phenax/pen/BNGjBO
>> Pure CSS Sidemenu - codepen.io/phenax/pen/GJPwKg
>> Fixed-width buttons - www.steliosconstantinides.com/FormButtons
>> FontCDN - fontcdn.org