Selection Tutorial CSS in Codepen by Beben Koben - Hallo friend Cara Mudah Posting Gratisan, In the article you read this time with the title Selection Tutorial CSS in Codepen by Beben Koben, we have prepared well for this article you read and download the information therein. hopefully fill posts Article Coded, Article CSS, Article CSS3, Article HTML, Article Informasi, Article Tutorial, we write this you can understand. Well, happy reading.

Title : Selection Tutorial CSS in Codepen by Beben Koben
link : Selection Tutorial CSS in Codepen by Beben Koben

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/AVvXsEikkm0KBUrYHJoVFbDCEijqN-WoiiBwCFGEML07d6nMcuraglRwLHgVCVLYXdSyUPaNpxPNRUy1a7Wdcl89d8E8XLI0ETMoY1eyLat2cwKtUFDuZxazdqly3a3lrHUpNHNu2wWM6dppv6vk/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

Thus articles Selection Tutorial CSS in Codepen by Beben Koben

that is all articles Selection Tutorial CSS in Codepen by Beben Koben This time, hopefully can provide benefits to all of you. Okay, see you in another article posting.

You now read the article Selection Tutorial CSS in Codepen by Beben Koben with the link address https://autopostingblogspot.blogspot.com/2014/09/selection-tutorial-css-in-codepen-by.html