agung wisudhatama April 03, 2022 Komentar

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Senter adalah benda yang dapat mengeluarkan cahaya terang benderang guna menerangi kegelapan malam yang gulita. Info terkini senter sudah merambah dengan teknologi led.

Memang tidak dapat dipungkiri bila malam tiba dan mati lampu, maka senterlah yang menjadi penerang utama selain lilin atau alat penerang lainnya. Fungsinya guna melihat sebuah benda dalam kegelapan.

Baca Juga : Membuat Efek Sudut Melengkung atau Border Radius dengan CSS

Untuk hari ini kita akan membuat code untuk senter atau flashlight terang benderang dengan CSS. Penerapannya hanya pada element HTML, CSS dan Java. Ketiga element disatukan akan menampilkan sesuatu yang baru.

Dengan teknologi koding yang begitu dahsyat berkembang dari hari ke hari. Maka tidak heran kreativitas pembuatan animasi koding dengan menggunakan ketiga element tersebut pun sudah mencapai puncak dan kita bisa menyebutnya "Kecanggihan Coding".

Baca Juga : Membuat Gambar atau Foto Bergetar Saat Disentuh dengan Mouse

Okelah sekarang kita mulai saja tutorialnya :

Senter Terang Benderang Ala CSS3

Langsung masuk saja ke Tema terus klik Sesuaikan / Edit HTML kemudian masuk ke dapur komponen template. Nah disitu temukan kode ]]></b:skin> dan kemudian tempelkan kode dibawah ini persis diatas kode ]]></b:skin> tersebut. Kodenya dibawah ya :

.flashlight{
	width: 300px;
	height: 300px;
	position: absolute;
	margin: auto;
	right: 0;
	left:0;
	bottom: 145px;
}
.upper{
	background-color: #8c8c8c;
	height: 50px;
	width: 180px;
}
.lower{
	height: 0px;
	width: 120px;
	border-top:80px solid #595959;
	border-left: 30px solid transparent;
	border-right: 30px solid transparent;
}
.body{
	height: 310px;
	width: 120px;
	background-color: #8c8c8c;
	position: relative;
	left: 30px;
	border-radius: 0px 0px 20px 20px;
}
#button{
	height: 40px;
	width: 40px;
	background-color: white;
	position: relative;
	top:80px;
	left:40px;
	border-radius: 8px;
	outline: none;
	border: none;
	box-shadow: 0px 5px #666666;
}
#light{
	height: 0px;
	width: 160px;
	border-top:300px solid rgba(255,255,51,0.9);
	border-left:70px solid transparent;
	border-right:70px solid transparent;
	position: relative;
	bottom: 740px;
	right: 60px;
	visibility: hidden;

}
.s1,.s2{
	background-color: white;
	height: 15px;
	width: 100%;
	position: relative;
}
.s1{
	height:22px;
	top:13px; 
}
.s2{
	top:210px;
}

Masih di template ya, temukan segera kode </body>. Dan tempelkan kode dibawah persis diatas kode </body> tersebut. Kodenya adalah

<script type='text/javascript'> 
//<![CDATA[
var i;
    i=0; //indicating light is off initially
    function glow(){
    if(i==0){
    document.getElementById("light").style.visibility = "visible";
    i=1; //indicating light is now on
    document.getElementById("button").style.top="85px";
    document.getElementById("button").style.boxShadow="none";
    }
    else{
    document.getElementById("light").style.visibility = "hidden";
    document.getElementById("button").style.top="80px";
    document.getElementById("button").style.boxShadow="0px 5px #666666";
    i=0; //indicating light is now off
    }
}
//]]> 
</script>

Kemudian terakhir, letakkan kode dibawah ini di postingan terkait senter ini ya teman-teman. Dibawah ini kodenya

<div class="flashlight">
<div class="upper">
<div class="s1"></div>
</div>
<div class="lower"></div>
<div class="body">
<button type="button" id="button" onclick="glow()"></button>
<div class="s2"></div>
</div>
<div id="light"></div>
</div>

Nah seperti itulah bentuk senter yang sudah kita uprek-uprek lewat template ya teman-teman. Sekarang saatnya kalian mempraktekkan pembuatan senter ini. Siapa tahu blog kamu tidak gelap lagi karena sudah terang khan? ada senter hehe. Terima kasih yang sudah mampir ke sini di artikel Senter Terang Benderang Ala CSS3. Salam dan sampai jumpa esok ya.

Result

Bagikan ke teman-teman kamu

Label Postingan : CSS

Terima kasih ya udah mempraktekkan tutorial blog di web alifacode.com dengan judul Senter Terang Benderang Ala CSS3 . Semoga tutorial blog ini dapat bermanfaat. Salam Blogger.