Long Trip of CSS and HTML Code

Apa yang mau dipostingkan mbro! Perasaan sudah ada semua apa yang ingin kita cari :D Tinggal ketik www.google.com pada address bar browser, cari deh sampai ketemu ;)) Koben akan mengulang tema artikel yang sudah ada, tutorial pilihan dengan daya tarik yg tidak bisa di tolak oleh brother sekalian. Jadi jika dipostingan sedang berbicara tentang kotak pencarian, sobat bisa search sendiri di blog ini yah ;) Dan kebetulan sekali pertama-tama gue mau berbagi mengenai Looong Search Bar.

#search {
-webkit-appearance: none;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
width: 29px;
padding: 0 10px;
height: 29px;
font-size: 14px;
color: #666;
line-height: 29px;
border: 0;
cursor: pointer;
border-radius: 50px;
box-shadow: 0 0 0 1px rgba(0,150,200,.5), inset 0 2px 5px rgba(0,100,150,.3), 0 2px 0 rgba(255,255,255,.6);
position: relative;
z-index: 5;
-webkit-transition: .3s ease;
-moz-transition: .3s ease;
}
#search:focus {
outline: none;
width: 191px;
}
.search {
z-index: 4;
position: relative;
padding: 5px;
line-height: 0;
border-radius: 100px;
background: #b9ecfe;
background-image: -webkit-linear-gradient(#dbf6ff,#b9ecfe);
background-image: -moz-linear-gradient(#dbf6ff,#b9ecfe);
display: inline-block;
box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 2px 5px rgba(0,100,150,.4);
}
.search:hover {
box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 2px 3px 2px rgba(100,200,255,.5);
}
.search:after {
content: '';
display: block;
position: absolute;
width: 5px;
height: 20px;
background: #b9ecfe;
bottom: -10px;
right: -3px;
border-radius: 0 0 5px 5px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
box-shadow: inset 0 -1px 0 rgbA(255,255,255,.6), -2px 2px 2px rgba(0,100,150,.4);
}
.search:hover:after {
box-shadow: inset 0 -1px 0 rgba(255,255,255,.6), -2px 2px 2px 1px rgba(100,200,255,.5);
}

Syntax HTML<div class="search"><input name="search" id="search" type="search"></div>Source by: Loooong Search Bar - Long Search Bar in CSS - How TO - Animated Search Form

Lanjut dengan tut's ulangan yg ke dua tentang Pure CSS lightbox.

.lightbox {
background: #FFF;
padding: 1.1rem;
border: 1px solid #ddd;
width: auto;
position: fixed;
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transition: -webkit-transform .3s ease-in;
transition: -webkit-transform .3s ease-in;
transition: transform .3s ease-in;
transition: transform .3s ease-in, -webkit-transform .3s ease-in;
}
.lightbox:target {
-webkit-transform: scale(1);
transform: scale(1);
margin:auto;
position:absolute;
top:0; bottom:0; left:0; right:0;
}
.close-me::after {
content: "\00D7";
display: inline-block;
position: absolute;
right: 0;
top: 0;
z-index: 3;
color: #FFF;
-webkit-border-radius: 0 0 0 5px;
border-radius: 0 0 0 75%;
width: 2rem;
height: 2rem;
line-height: 2rem;
font-size: 1.8rem;
text-align: center;
margin: 0;
padding: 0 0 5px 5px;
background-color: rgb(97, 93, 81);
font-weight: bold;
cursor: pointer;
}

Planing HTML

<a href="#about-me">YOUR TITLE HERE</a>
<div class="lightbox" id="about-me">
<a href="#" class="close-me"></a>
<h2>YOUR TITLE HERE</h2>
<p>-------- BLAH BLEH BLOH HERE --------</p>
</div>

Source by: Pure CSS lightbox demo

Lanjut ke acara tiga bray dengan topic Funky Pure CSS Accordion.

.right {
margin: 0 auto;
position: relative;
width: 50%;
height: 97vh;
}
.app {
border-radius: 10px;
width: 340px;
margin: 0 auto;
height: 414px;
position: absolute;
left: 0;
top: 45%;
box-shadow: 4px 5px 0px rgba(0, 0, 0, 0.11);
-webkit-animation: intro 0.34s 0.4s cubic-bezier(1, 1.4, 0.41, 1.01) forwards;
animation: intro 0.34s 0.4s cubic-bezier(1, 1.4, 0.41, 1.01) forwards;
-webkit-transform: translateY(-50%) scale(0) rotateX (10deg) rotateY(10deg) rotateZ(10deg);
transform: translateY(-50%) scale(0) rotateX (10deg) rotateY(10deg) rotateZ(10deg);
overflow: hidden;
font-family: 'Roboto Condensed', sans-serif;
}
.app_inner {
position: relative;
}
.app_inner input[type="radio"] {
display: none;
}
.app_inner input[type="radio"]:checked + label .app_inner__tab {
height: 175px;
}
.app_inner input[type="radio"]:checked + label .app_inner__tab .tab_right {
top: 39px;
box-sizing: border-box;
-webkit-transition: all 0.3s 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
transition: all 0.3s 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.app_inner input[type="radio"]:not(checked) + label .app_inner__tab {
height: 80px;
box-sizing: border-box;
border-left: 12px solid rgba(0, 0, 0, 0.12);
}
.app_inner input[type="radio"]:not(checked) + label .app_inner__tab .tab_right {
top: 200px;
-webkit-transition: all 0.3s 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
transition: all 0.3s 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.app_inner input[type="radio"]:checked + label .app_inner__tab .tab_left .tab_left__image {
-webkit-animation: move_in 0.55s 0.05s cubic-bezier(0.455, 0.03, 0.515, 0.955) forwards;
animation: move_in 0.55s 0.05s cubic-bezier(0.455, 0.03, 0.515, 0.955) forwards;
-webkit-transition: all 0.3s 0.36s cubic-bezier(0.455, 0.03, 0.515, 0.955);
transition: all 0.3s 0.36s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.app_inner input[type="radio"]:not(checked) + label .app_inner__tab .tab_left .tab_left__image {
-webkit-animation: move_out 0.75s 0s cubic-bezier(0.455, 0.03, 0.515, 0.955) forwards;
animation: move_out 0.75s 0s cubic-bezier(0.455, 0.03, 0.515, 0.955) forwards;
-webkit-transition: all 0.3s 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
transition: all 0.3s 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.app_inner input[type="radio"]:checked + label .app_inner__tab .tab_left .big {
left: 202px;
}
.app_inner input[type="radio"]:not(checked) + label .app_inner__tab .tab_left .big {
left: 400px;
}
.app_inner input[type="radio"]:checked + label .app_inner__tab h2 i {
opacity: 0;
}
.app_inner input[type="radio"]:not(checked) + label .app_inner__tab h2 i {
opacity: .3;
}
.app_inner label {
display: block;
width: 100%;
}
.app_inner label:nth-of-type(1) .app_inner__tab {
background: #99b998;
height: 200px;
}
.app_inner label:nth-of-type(1) .app_inner__tab:hover {
-webkit-transition: all .2s;
transition: all .2s;
background: #8db18c;
}
.app_inner label:nth-of-type(1) .app_inner__tab .tab_left__image {
background: #EA495F;
}
.app_inner label:nth-of-type(2) .app_inner__tab {
background: #E4B794;
}
.app_inner label:nth-of-type(2) .app_inner__tab:hover {
-webkit-transition: all .2s;
transition: all .2s;
background: #e0ac84;
}
.app_inner label:nth-of-type(2) .app_inner__tab .tab_left__image {
background: #99B998;
}
.app_inner label:nth-of-type(3) .app_inner__tab {
background: #f4837d;
}
.app_inner label:nth-of-type(3) .app_inner__tab:hover {
-webkit-transition: all .2s;
transition: all .2s;
background: #f2716a;
}
.app_inner label:nth-of-type(3) .app_inner__tab .tab_left__image {
background: #E4B794;
}
.app_inner label:nth-of-type(4) .app_inner__tab {
background: #ea495f;
}
.app_inner label:nth-of-type(4) .app_inner__tab:hover {
-webkit-transition: all .2s;
transition: all .2s;
background: #e8374f;
}
.app_inner label:nth-of-type(4) .app_inner__tab .tab_left__image {
background: #F4837D;
}
.app_inner__tab {
width: 100%;
height: 80px;
background: red;
cursor: pointer;
overflow: hidden;
position: relative;
-webkit-transition: all 0.65s cubic-bezier(1, 0, 0.41, 1.01);
transition: all 0.65s cubic-bezier(1, 0, 0.41, 1.01);
}
.app_inner__tab h2 {
position: absolute;
right: 20px;
top: 16px;
color: #1a1c1d;
font-size: 18px;
}
.app_inner__tab h2 i {
position: absolute;
right: 271px;
opacity: 0.3;
-webkit-transition: all .3s;
transition: all .3s;
}
.app_inner__tab .tab_right {
width: 60%;
float: right;
position: relative;
top: 200px;
text-align: right;
padding: 20px;
}
.app_inner__tab .tab_right h3, .app_inner__tab .tab_right h4, .app_inner__tab .tab_right p {
margin: 0;
}
.app_inner__tab .tab_right h3 {
font-size: 14px;
color: rgba(0, 0, 0, 0.65);
}
.app_inner__tab .tab_right h4 {
font-size: 12px;
margin: 4px 0px;
color: rgba(0, 0, 0, 0.33);
}
.app_inner__tab .tab_right p {
font-size: 11px;
color: white;
}
.app_inner__tab .tab_right button {
margin-top: 10px;
border: 2px solid white;
background: none;
border-radius: 5px;
padding: 6px 20px;
cursor: pointer;
font-family: 'Roboto Condensed', sans-serif;
outline: none;
font-size: 11px;
color: white;
-webkit-transition: all .3s;
transition: all .3s;
}
.app_inner__tab .tab_right button:hover {
background: white;
color: black;
}
.app_inner__tab .tab_left {
width: 30%;
float: left;
position: relative;
}
.app_inner__tab .tab_left .big {
position: absolute;
top: -37px;
-webkit-transition: all .3s .3s;
transition: all .3s .3s;
left: 390px;
font-size: 180px;
opacity: 0.08;
}
.app_inner__tab .tab_left__image {
position: relative;
top: -100px;
text-align: center;
background: white;
left: 47px;
border-radius: 20px;
width: 80px;
height: 80px;
}
.app_inner__tab .tab_left__image i {
color: white;
font-size: 40px;
top: 12px;
right: 3px;
position: relative;
}
@-webkit-keyframes move_out {
0% {
top: 47px;
}
100% {
top: 200px;
}
}
@keyframes move_out {
0% {
top: 47px;
}
100% {
top: 200px;
}
}
@-webkit-keyframes move_in {
0% {
top: -200px;
}
100% {
top: 47px;
}
}
@keyframes move_in {
0% {
top: -200px;
}
100% {
top: 47px;
}
}
@-webkit-keyframes bump {
0% {
top: 16px;
}
25% {
top: 13px;
}
50% {
top: 16px;
}
75% {
top: 13px;
}
100% {
top: 16px;
}
}
@keyframes bump {
0% {
top: 16px;
}
25% {
top: 13px;
}
50% {
top: 16px;
}
75% {
top: 13px;
}
100% {
top: 16px;
}
}
@-webkit-keyframes intro {
0% {
-webkit-transform: translateY(-50%) scale(0) rotateX (10deg) rotateY(10deg) rotateZ(40deg);
transform: translateY(-50%) scale(0) rotateX (10deg) rotateY(10deg) rotateZ(40deg);
}
100% {
-webkit-transform: translateY(-50%) scale(1) rotateX (0deg) rotateY(0deg) rotateZ(0deg);
transform: translateY(-50%) scale(1) rotateX (0deg) rotateY(0deg) rotateZ(0deg);
}
}
@keyframes intro {
0% {
-webkit-transform: translateY(-50%) scale(0) rotateX (10deg) rotateY(10deg) rotateZ(40deg);
transform: translateY(-50%) scale(0) rotateX (10deg) rotateY(10deg) rotateZ(40deg);
}
100% {
-webkit-transform: translateY(-50%) scale(1) rotateX (0deg) rotateY(0deg) rotateZ(0deg);
transform: translateY(-50%) scale(1) rotateX (0deg) rotateY(0deg) rotateZ(0deg);
}
}

Plan HTML

<div class='right'>
<div class='app'>
<div class='app_inner'>
<input checked='' id='tab-1' name='buttons' type='radio'>
<label for='tab-1'>
<div class='app_inner__tab'>
<h2>
<i>✎</i>
About
</h2>
<div class='tab_left'>
<i class='big'>✎</i>
<div class='tab_left__image'>
<i>✎</i>
</div>
</div>
<div class='tab_right'>
<h3>Mr. Anonim Ipsum</h3>
<h4>Monday - Thursday</h4>
<p>I talk a bunch of rubbish</p>
<button>More information</button>
</div>
</div>
</label>
<input false='' id='tab-2' name='buttons' type='radio'>
<label for='tab-2'>
<div class='app_inner__tab'>
<h2>
<i>®</i>
Resume
</h2>
<div class='tab_left'>
<i class='big'>♻</i>
<div class='tab_left__image'>
<i>♻</i>
</div>
</div>
<div class='tab_right'>
<h3>Arctic Monkeys Live</h3>
<h4>Monday - Wednesday</h4>
<p>Music for your lug holes</p>
<button>More information</button>
</div>
</div>
</label>
<input false='' id='tab-3' name='buttons' type='radio'>
<label for='tab-3'>
<div class='app_inner__tab'>
<h2>
<i>✉</i>
Email
</h2>
<div class='tab_left'>
<i class='big'>✉</i>
<div class='tab_left__image'>
<i>✉</i>
</div>
</div>
<div class='tab_right'>
<h3>Steven Fry podcast</h3>
<h4>Staurday - Sunday</h4>
<p>Steven Fry says words</p>
<button>More information</button>
</div>
</div>
</label>
<input false='' id='tab-4' name='buttons' type='radio'>
<label for='tab-4'>
<div class='app_inner__tab'>
<h2>
<i>✆</i>
Kontak
</h2>
<div class='tab_left'>
<i class='big'>✆</i>
<div class='tab_left__image'>
<i>✆</i>
</div>
</div>
<div class='tab_right'>
<h3>Massive event</h3>
<h4>Monday - Friday</h4>
<p>Some kind of music festival</p>
<button>More information</button>
</div>
</div>
</label>
</div>
</div>
</div>

Source by: Funky Pure CSS Accordion

Segitu saja yah! Silahkan dinikmati bonusnya dari AA...

Gradient Text w/Drop Shadow - Rainbow Bordered Button - Mutant Cursor - 10 CSS Text Shadows - All System Fonts - Pure CSS Mega Menu Navigation - Flickery Argon Encouragement - Floating Words - Vue.js CRUD application - Pure CSS Tabs With Indicator - Call-to-Action Generator - Floating Labels - CSS / JS - Flat Download Button - Codepen Preview (Hover to Play) - Web Design Tools - IOS 10 IMAGES STYLE SHADOWS - Shaded Text - 3D iPhone CSS controls no JS - Daily Pen #45 - Animated folding (notifications concept) - Material Design Colors - DOM Tree Visualisation - Fork me on GitHub [animated corner style generator] - Non-Intrusive Popup - Bootstrap Side Nav - Text Case Changer - 3d device sketch - Pop up labels when Typing with placeholder-shown - 🎨 (R, G, B, A)-in - Share & Social Semicircles - Menu Concept (using clip) - Infinite Calendar - Buttons css hover effect - Instagram filters - CSSgram Demo - Franchise - Animography Text Editor - Frosted Glass Search - Spinning text - Accessible Floating Labels