Selection Tutorial CSS in Codepen by Beben Koben

AA Koben akan berbagi source pilihan dari web codepen.io Murni kode CSS-an, simpel dan tentunya full stylish! Sebenarnya tut's lawas, akan tetapi penulisan code CSS yang sudah diperbaharui. Pertama-tama tutorial seputaran hover effect by Sergio, he's talk about bubble active navigation codepen.io/Sergioandrade/pen/hxJpa Berikut bumbu-bumbu yg mesti sobat tambahkan pada style link...a {
BLAH
BLEH
BLOH
}

a {
padding-top: 20px;
position: relative;
}
a:after {
content: "";
position: absolute;
right: 35%;
top: 0;
width: 16px;
height: 16px;
background: #0066FF;
border-radius: 50%;
opacity: 0;
}
a:before {
content: "";
position: absolute;
right: 45%;
top: 0;
width: 8px;
height: 8px;
background: #0099FF;
border-radius: 50%;
opacity: 0;
}
a:hover:before {
animation: bubbles infinite 1s linear;
}
a:hover:after {
animation: bubbles infinite 2s linear;
}
@keyframes bubbles{
from {
opacity: 0;
top: 40px;
}
20% {
opacity: 0.5;
top: 20px;
}
70% {
opacity: 1;
top: 0px;
}
90% {
opacity: 0;
top: -10px;
}
100%{
opacity: 0;
top: -20px;
}
}

SAVE.

Info kedua cara membuat search box dengan gaya click to expand. Master Sam D bercerita tentang expanding text box/button codepen.io/llamaswill/pen/rmqfB

.search-box {
width: 40px;
height: 40px;
border-radius: 20px;
border: none;
cursor: pointer;
background: #ebebeb;
-webkit-transition: width 0.6s, border-radius 0.6s, background 0.6s, box-shadow 0.6s;
transition: width 0.6s, border-radius 0.6s, background 0.6s, box-shadow 0.6s;
}
.search-box + label .search-icon {
color: black;
}
.search-box:hover {
color: white;
background: #c8c8c8;
box-shadow: 0 0 0 5px #3d4752;
}
.search-box:hover + label .search-icon {
color: white;
}
.search-box:focus {
border: none;
outline: none;
box-shadow: none;
padding-left: 15px;
cursor: text;
width: 300px;
border-radius: auto;
background: #ebebeb;
color: black;
-webkit-transition: width 0.6s cubic-bezier(0, 1.22, 0.66, 1.39), border-radius 0.6s, background 0.6s;
transition: width 0.6s cubic-bezier(0, 1.22, 0.66, 1.39), border-radius 0.6s, background 0.6s;
}
.search-box:focus + label .search-icon {
color: black;
}
.search-box:not(:focus) {
text-indent: -5000px;
}
#search-submit {
position: relative;
left: -5000px;
}
.search-icon {
position: relative;
left: -33px;
top: 6px;
color: white;
cursor: pointer;
}

Planing HTML<form class="search-container" action="http://YOUR-BLOG.blogspot.com/search">
<input id="search-box" type="text" class="search-box" name="q" />
<label for="search-box"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0TPgBuj0XyePnaQMaN-FN99X1QskRiyYyB7FULAaAWqYnUPKZsLLkUaZDoGZcO4dwVzK1c3vydA1Pf1f6aBidEJNV4-oYBbMKUAEdBoA9ZBciCt5Y9h6xmBV046JQOXu2rmwwbK9vJicy/s1600/search.png" alt="" class="search-icon" /></label>
<input type="submit" id="search-submit" />
</form>Info ketiga gue sharing mengenai focus style by Hugo Giraudel codepen.io/HugoGiraudel/pen/FJuBb Pada sumber konten dibuatkan kotak login/register, tetapi di sini AA ganti dengan kotak berlangganan saja yah :D

#langgan {
border: 0.5em solid #99e5ff;
border-radius: .2em;
max-width: 400px;
margin: 1em auto;
padding: 1em;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#langgan h1 {
font-size: 2em;
margin-top: 0;
text-align: center;
}
#langgan label {
display: block;
margin-bottom: .5em;
cursor: pointer;
}
#langgan input[type="text"] {
display: block;
width: 100%;
padding: .5em;
-moz-transition: .5s ease-out;
-webkit-transition: .5s ease-out;
-o-transition: .5s ease-out;
-ms-transition: .5s ease-out;
transition: .5s ease-out;
}
#langgan input[type="text"]:focus {
-moz-transform: scale(1.75);
-webkit-transform: scale(1.75);
-o-transform: scale(1.75);
-ms-transform: scale(1.75);
transform: scale(1.75);
outline: 100em solid rgba(0, 0, 0, 0.75);
}
#langgan button {
display: block;
border: none;
padding: 1em;
width: 100%;
font-weight: bold;
color: white;
background: deepskyblue;
text-transform: uppercase;
font-size: .8em;
}
#langgan button:hover {
background: #888;
}
#langgan p {
margin-bottom: 0;
}

<form id="langgan" action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open("http://feedburner.google.com/fb/a/mailverify?uri=YOUR-ACCOUNT", "popupwindow", "scrollbars=yes,width=550,height=520"); return true' target='popupwindow'>
    <h1>Langganan</h1>
    <p>
        <label for="login">Your Email</label>
        <input type="text" name="email" id="email" placeholder="Your.Email@email.com" autocomplete="off" required>
    </p>
     <p>
      <button type="submit">Subscribe</button>
<input name='uri' type='hidden' value='YOUR-ACCOUNT'/>
<input name='loc' type='hidden' value='id_ID'/>
    </p>       
</form>

Terakhir membuat tab murni pakai CSS CSS tab Pure CSS tabs by Pure CSS Tabs codepen.io/andornagy/pen/CFekj

.tabs input[type=radio] {
display:none;
}
.tabs {
width: 98%;
float: none;
list-style: none;
position: relative;
padding: 0;
}
.tabs li{
float: left;
}
.tabs label {
display: block;
padding: 5px 10px;
color: #FFFFFF;
font-size: 20px;
font-weight: normal;
background: #2c3e50;
cursor: pointer;
position: relative;
}
.tabs label:hover {
background: #3498db;
}
.tab-content {
z-index: 2;
display: none;
left: 0;
width: 100%;
font-size: 20px;
padding: 10px;
position: absolute;
box-sizing: border-box;
border-top: 5px solid #08C;
background-color:#ffffff;
}
[id^=tab]:checked + label {
background: #08C;
color: white;
top: 0;
}
[id^=tab]:checked ~ [id^=tab-content] {
display: block;
}

<ul class="tabs">
    <li>
        <input type="radio" checked name="tabs" id="tab1">
        <label for="tab1">tab 1</label>
        <div id="tab-content1" class="tab-content">
            Content tab 1
            <!-- Your content goes here -->
        </div>
    </li>
    <li>
        <input type="radio" name="tabs" id="tab2">
        <label for="tab2">tab 2</label>
        <div id="tab-content2" class="tab-content">
            Content tab 2
            <!-- Your content goes here -->
        </div>
    </li>
    <li>
        <input type="radio" name="tabs" id="tab3">
        <label for="tab3">tab 3</label>
        <div id="tab-content3" class="tab-content">
            Content tab 3
            <!-- Your content goes here -->   
        </div>
    </li>
</ul>

Bonus for inspiration...;)

• codepen.io/gpyne/pen/gItif
• codepen.io/xmark/pen/bEAys
• codepen.io/cleric/pen/dIuFj
• codepen.io/gumetis/pen/gzHDs
• codepen.io/robooneus/pen/BLKIa
• codepen.io/chuckneely/pen/ronfx
• codepen.io/chriscoyier/pen/AdaKr
• codepen.io/nickmoreton/pen/fstrx
• codepen.io/samsurysites/pen/zukFj
• codepen.io/commander-clifford/pen/vmDEh

See you :-h