Menu of Tutorial now CSS and jQuery - Hallo friend Cara Mudah Posting Gratisan, In the article you read this time with the title Menu of Tutorial now CSS and jQuery, we have prepared well for this article you read and download the information therein. hopefully fill posts Article Coded, Article CSS, Article CSS3, Article jQuery, Article Snippet, Article Trik dan Tips, Article Tutorial, we write this you can understand. Well, happy reading.

Title : Menu of Tutorial now CSS and jQuery
link : Menu of Tutorial now CSS and jQuery

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/AVvXsEijGSQaMDtrZ3TCsqrIEAbcqIf9Kb9TeVbXOj-eUAfMDobvhejgXFNBRM796AuvSP03msS2P5qTA_XRinhA0noQ9afKlGEB0aqdJJnAS8eY8wWBCWvYPRYYIJ8C_6SuVy52KnFXa2rzfbc/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/

Thus articles Menu of Tutorial now CSS and jQuery

that is all articles Menu of Tutorial now CSS and jQuery This time, hopefully can provide benefits to all of you. Okay, see you in another article posting.

You now read the article Menu of Tutorial now CSS and jQuery with the link address https://autopostingblogspot.blogspot.com/2014/04/menu-of-tutorial-now-css-and-jquery.html