Aku bingung membuat judulnya dalam bahasa indonesia, jadi biar gak terlalu panjang aku pake bahasa inggris aja. postingan ini juga masih berkaitan dengan pembuatan elemen pembuka, seperti yang sudah saya tulis sebelumnya.
1. Membuat elemen pembuka
2. Javascript And Css3 Opening
3. Unlock Effect With Css3 And Javascript
Bisa dibilang ini adalah versi keempat dari ketiga post diatas, dan kali ini aku membuat elemen pembukaan mirip seperti windows 7. bahasa inggrisnya welcome screen kali ya hehe
ILUSTRASI
Jawabannya kurus.
Sumber Kodenya dibawah ini...
//belajar function @zhinto
// # http://zhinto.blogspot.com/ #
//<![CDATA[
function fade(){
var c = document.getElementById("c");
c.className += " cF";
}
function cek() {
var p = document.getElementById("d");
var d = document.getElementById("b");
// kurus adalah jawaban dari pertanyaanya
if (p.value == "kurus"){
d.className += " cF";
}else{
alert("Jawaban yang anda masukan salah, silahkan isi jawaban dari pertanyaan yang disediakan dengan menggunakan huruf kecil");
}
}
//4000 = 4 detik adalah waktu tampilnya gambar loading
setTimeout("fade()", 4000);
//]]>
.b, .c {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
-moz-transition: 1s linear;
-o-transition: 1s linear;
-webkit-transition: 1s linear;
-ms-transition: 1s linear;
transition: 1s linear;
}
.b {
background: rgb(50,188,242);
background: -moz-radial-gradient(center, ellipse cover, rgba(50,188,242,1) 0%, rgba(68,153,244,1) 43%, rgba(0,71,226,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(50,188,242,1)), color-stop(43%,rgba(68,153,244,1)), color-stop(100%,rgba(0,71,226,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(50,188,242,1) 0%,rgba(68,153,244,1) 43%,rgba(0,71,226,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(50,188,242,1) 0%,rgba(68,153,244,1) 43%,rgba(0,71,226,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(50,188,242,1) 0%,rgba(68,153,244,1) 43%,rgba(0,71,226,1) 100%);
background: radial-gradient(ellipse at center, rgba(50,188,242,1) 0%,rgba(68,153,244,1) 43%,rgba(0,71,226,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#32bcf2', endColorstr='#0047e2',GradientType=1 ); text-align: center
}
#e {
padding: 3px;
background: #0F2435;
display: inline-block;
cursor: pointer;
color: #EEE;
font: bold 20px/20px Arial, sans-serif;
vertical-align: middle;
margin: 10px 0 0 0;
}
.b input {
padding: 5px;
border: none;
margin: 10px 0 0 0;
color: #000;
width: 65%;
vertical-align: middle;
}
.b input:focus {
outline: none
}
.b .g {
position: absolute;
width: 250px;
height: 50px;
left: 50%;
top: 75%;
margin: -50px 0 0 -125px
}
.c {
background: #111 url("URL-gambar-loading-anda") no-repeat center 90%
}
.foto {
position: absolute;
width: 100px;
height: 100px;
border: 5px solid #F0F0F0;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
margin: -55px 0 0 -55px;
left: 50%;
top: 40%;
background: #000 url("logo-windows.png") no-repeat center
}
.f {
margin: 0;
font: normal 14px/20px Arial,sans-serif;
}
.cF {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
visibility: hidden
}<div id='b' class='b'>
<div class='foto'></div>
<div class='g'><p class='f'>Orang yang tinggal tulang disebut..?</p><input id='d' type='password'></input><a id='e' onclick='cek()'>➨</a></div>
</div>
<div id='c' class='c'></div>
Oh iya jawaban kurus pada javascriptnya bisa juga anda ganti dengan angka misalnya 20 tapi tanpa tanda petik karena angka dalam javascript adalah integer. Tapi jika jawabannya teks harus menggunakan tanda petik seperti diatas.
Comments