inputSatu hal yg menarik, kok kepikiran dapat ide itu! Sobat bisa lihat di cdpn.io/uldIj Di sini juga bisa kalau malas :DKetikan 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 HTMLfont-family:sans-serif;
background:#545254;
color:#fff;}
.
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;
}
.
color:#fff;
text-shadow:none;
border-bottom:2px solid #f00;
}
.
text-shadow:none;
}
.
text-shadow:none;
}
.
text-shadow:none;
}
.
text-shadow:none;
}
<input type='text' class='input-blur ' placeholder='Isi yang benar, awas salah!' />Koben menemukan artikel
CSS3 GRADIENTSmenampilkan 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 HTMLwidth: 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);
}
<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> jsfiddle.net/bebenkoben/ND4C3/show
Ini kalau mau tools gradients generator sederhana, Koben kasih jsdo.it/laphroaig/z2lH & jsdo.it/gct256/gz0uHappy coding \m/
Files source:
Files source:
Files source:
Ketika sudah memilih, pilihan akan terlihat pada konten select. Sebelum itupun ada efek border yg terlihat sebelah kiri kala memilih! Lebih full stylish lagi semua itu di bangun hanya memakai kode CSS b-) Aslinya mah pake code