Menu of Tutorial now CSS and jQuery

Kadang kala ide muncul hanya dengan melihat sebuah konten! Hal sederhana dapat menjadi sesuatu yang begitu enak di lihat. Tidak salah, ternyata satu ide itu tidak datang dengan kebetulan, melainkan kerja otak yg sudah terbiasa dengan kegiatan tafakur :) Gue lagi² bertemu dengan tutorial seputar tagging input Satu hal yg menarik, kok kepikiran dapat ide itu! Sobat bisa lihat di cdpn.io/uldIj Di sini juga bisa kalau malas :D

Ketikan apapun ke dalam kotak, kemudian klik di luar area kotak, maka akan terlihat blur kan? Simple but full creativity b-)

#kotak {
font-family:sans-serif;
background:#545254;
color:#fff;}
.input-blur {
display:inline-block;
height:40px;
font-size:18px;
color:transparent;
text-shadow:0 0 8px #f5f5f5;
border:1px solid #555;
padding:2px;
outline:none;
width:250px;
background:#545254;
transition:text-shadow .2s, border .2s;
}
.input-blur:focus {
color:#fff;
text-shadow:none;
border-bottom:2px solid #f00;
}
.input-blur::-webkit-input-placeholder {
text-shadow:none;
}
.input-blur:-moz-placeholder { /* Firefox 18- */
text-shadow:none;
}
.input-blur::-moz-placeholder { /* Firefox 19+ */
text-shadow:none;
}
.input-blur:-ms-input-placeholder {
text-shadow:none;
}

Planning HTML<input type='text' class='input-blur' placeholder='Isi yang benar, awas salah!' />

Koben menemukan artikel CSS3 GRADIENTS menampilkan contoh beberapa warna gradients yg sudah jadi www.designskilz.com/css3-gradients. Melihat tampilan kode yg disembunyikan di balik konten, wow sungguh aneh tapi nyata. Hal itu yg akan AA share ;))

Syntax pemakaian akan lumayan banyak dan trick ini terintegrasi dengan jQuery script!

.area-code {
width: 100%;
height: 300px;
}
.code {
padding: 0;
margin: 0;
border: 0;
width: 100%;
resize: none;
height: 300px;
outline: none;
overflow: auto;
cursor: pointer;
font-size: 15px;
background: #EAEBE6;
font-family: "Courier New",Courier,monospace;
}
.muka {
cursor: help;
background: #333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAaWIv8uCHNwpOJRwYUzw2_mbLn6in76GNMwdRCntRgQyr8J3r-mnCR_ngN-czlxPayaMrcMsD8IUbJl_YSMkPJQmtgWGYJvtrDEN2VfXjsG-vcu03cvS1qHXVOweu0w6x2oG4gMY7zT0/s800/Matrix.jpg) no-repeat center center;
}
.section {
width: 100%;
height: 300px;
overflow: hidden;
position: relative;
-webkit-perspective: 600px;
-moz-perspective: 600px;
}
.section .front {
position: absolute;
top: 0;
z-index: 900;
width: 100%;
height: 300px;
-webkit-transform: rotateX(0deg) rotateY(0deg);
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-transform: rotateX(0deg) rotateY(0deg);
-moz-transform-style: preserve-3d;
-moz-backface-visibility: hidden;
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition:all .4s ease-in-out;
}
.section.flip .front {
z-index:900;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
}
.section .back {
position: absolute;
top: 0;
z-index: 800;
width: 100%;
height: 300px;
-webkit-transform: rotateY(-180deg);
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-transform: rotateY(-180deg);
-moz-transform-style: preserve-3d;
-moz-backface-visibility: hidden;
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.section.flip .back {
z-index: 1000;
-webkit-transform: rotateX(0deg) rotateY(0deg);
-moz-transform: rotateX(0deg) rotateY(0deg);
}

Syntax HTML<div class="click section">
<div class="front">
<div class="area-code muka"></div>
</div>
<div class="back">
<div class="muka">
<textarea readonly="readonly" class="code">

------- YOUR CODED HERE -------

</textarea>
</div>
</div>
</div>Silahkan sobat tambahkan/rubah kode CSS yg ada sesuai keinginan. Panjang, tinggi, warna latar, gambar atau apapun.

<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
  $('.click').click(function(){
    $('.flip').not(this).removeClass('flip');
      $(this).toggleClass('flip');
  });
});
$(".code").mouseover(function(){
  $(this).select();
});
//]]>
</script>

DEMO.

jsfiddle.net/bebenkoben/ND4C3/show

Ini kalau mau tools gradients generator sederhana, Koben kasih jsdo.it/laphroaig/z2lH & jsdo.it/gct256/gz0u

Happy coding \m/