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: rotateposition: 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: rotate
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);
}
<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<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>
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
Tool untuk melihat kode lawan warna. Ada juga yg menyebutnya color complementary!
Tool untuk melihat jumlah karakter kata di dalam teks dan mengurutkan berdasarkan frekuensi banyak.
Menampilkan jumlah karakter kata dengan menghilangkan terlebih dahulu kata yang sama.
