Make Light Bulb Using HTML,CSS,JS [SourceCode]
6 July 2018
css,
how to,
html,
js
Hi Readers,
here in this article i am sharing a code snippet with you by which you can create dynamic light bulb with html css and operate it using Javascrpit,
its easy enough lets get start,
Here is HTML CODE
<!DOCTYPE html> <html> <head> <title>Light Bulb</title> </head> <body> <button onclick="toggleBulb()">Bulb Toggle</button> <div id="bulb"> <div id="circle-on"></div> <div id="circle-off"></div> <div id="cylender"></div> </div> </body> </html>
And This is CSS CODE
#bulb{
position: relative;
height: 400px;
margin: 10% 30%;
}
#circle-on{
height: 300px;
width: 300px;
box-shadow: 0 0 140px #ffff00;
border-radius: 50%;
background: #cccc33;
display: none;
}
#circle-on:after{
content: '';
display: block;
position: absolute;
bottom: 110px;
left: 60px;
border-radius: 0px 0px 50px 50px;
height: 20px;
width: 180px;
background: lightgrey;
}
#circle-off{
height: 300px;
width: 300px;
box-shadow: 0 0 130px grey;
border-radius: 50%;
display: block;
}
#circle-off:after{
content: '';
display: block;
position: absolute;
bottom: 110px;
left: 60px;
border-radius: 0px 0px 50px 50px;
height: 20px;
width: 180px;
background: lightgrey;
}
#cylender{
height: 110px;
width: 150px;
background: url(jojo.png);
position: absolute;
bottom: 0;
left: 75px;
border-radius: 0px 0px 30px 30px;
}
#cylender:after{
content: '';
display: block;
background: grey;
height: 15px;
width: 30px;
position: absolute;
bottom: -10px;
left: 61px;
border-radius: 10px 10px 50px 50px;
}
and Javascript
function toggleBulb()
{
var on = document.getElementById('circle-on').style;
var off = document.getElementById('circle-off').style;
if(on.display == 'none' && off.display == 'block')
{
on.display = 'block';
off.display = 'none';
document.body.style.background = "#000";
}else{
on.display = 'none';
off.display = 'block';
document.body.style.background = "#fff";
}
}
Final Look At Complete Code
Download Bulb Strip Image ->
<!DOCTYPE html>
<html>
<head>
<title>Light Bulb</title>
<style>
#bulb{
position: relative;
height: 400px;
margin: 10% 30%;
}
#circle-on{
height: 300px;
width: 300px;
box-shadow: 0 0 140px #ffff00;
border-radius: 50%;
background: #cccc33;
display: none;
}
#circle-on:after{
content: '';
display: block;
position: absolute;
bottom: 110px;
left: 60px;
border-radius: 0px 0px 50px 50px;
height: 20px;
width: 180px;
background: lightgrey;
}
#circle-off{
height: 300px;
width: 300px;
box-shadow: 0 0 130px grey;
border-radius: 50%;
display: block;
}
#circle-off:after{
content: '';
display: block;
position: absolute;
bottom: 110px;
left: 60px;
border-radius: 0px 0px 50px 50px;
height: 20px;
width: 180px;
background: lightgrey;
}
#cylender{
height: 110px;
width: 150px;
background: url(jojo.png);
position: absolute;
bottom: 0;
left: 75px;
border-radius: 0px 0px 30px 30px;
}
#cylender:after{
content: '';
display: block;
background: grey;
height: 15px;
width: 30px;
position: absolute;
bottom: -10px;
left: 61px;
border-radius: 10px 10px 50px 50px;
}
</style>
</head>
<body>
<button onclick="toggleBulb()">Bulb Toggle</button>
<div id="bulb">
<div id="circle-on"></div>
<div id="circle-off"></div>
<div id="cylender"></div>
</div>
<script>
function toggleBulb()
{
var on = document.getElementById('circle-on').style;
var off = document.getElementById('circle-off').style;
if(on.display == 'none' && off.display == 'block')
{
on.display = 'block';
off.display = 'none';
document.body.style.background = "#000";
}else{
on.display = 'none';
off.display = 'block';
document.body.style.background = "#fff";
}
}
</script>
</body>
</html>
Share with your Friends and if you have any suggestion please comment below for improvements. Thanks
0 Response to "Make Light Bulb Using HTML,CSS,JS [SourceCode]"
Post a Comment
Note: only a member of this blog may post a comment.