Welcome to today’s tutorial. Today we are going to create an interactive Lamp with no javascript at all. Yes, you heard it right, we will interactivity to the lamp using pure CSS. On click event in CSS? Sounds tricky right? But with this tutorial, I will show you one of the few ways you can add on click event using just CSS.
Video Tutorial:
If you are someone who prefers to code along to a video tutorial, check out the video tutorial version of this post down here:
Folder Structure:
The folder structures consist of a Folder Lamp Checkbox. Within this folder, we have two files: index.html and style.css. The first one is the HTML document, while the second is the stylesheet.
HTML:
We begin with the HTML section. Copy the code below and paste it into your HTML document.
I have created the lamp shape and switch with minimal elements. In the HTML code, we have a div with the class container. This div wraps other elements and centres them. Inside this is a div that has a class name lamp. Lastly, we have a checkbox inside the lamp.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Lamp Checkbox</title>
<!--Stylesheet-->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="lamp">
<input type="checkbox">
</div>
</div>
</body>
</html>
CSS:
Now coming to the CSS, copy the code provided below into your stylesheet.
In CSS we begin by doing the usual CSS reset. We add a black background colour to the body.To centre the container we use a combination of absolute positioning and transforms. The container has a fixed dimension of 500px x 500px.
We create the top of the lamp by creating a trapezoid. You can check how you can create various shapes with CSS in this tutorial. Other parts of the lamp are created using the before and after pseudo-elements.
Other Tutorials You Might Like:
- Auto-resize Textarea With Javascript
- Random Joke Generator | Javascript Project
- CSS Glassmorphism Button
We use the checkbox to create the lamp switch string. For this, we need to hide the default appearance of the checkbox using the appearance property. The light from the lamp is used using the before pseudo-element of the checkbox. I have used the clip-path property to create the trapezium.
When the checkbox is clicked, the height increases to 40px making it look like the string has been pulled down. Also, the light changes colour from no background to a gradient background. Your interactive lamp with no javascript is now ready. You can now customize it the way you want.
body{
padding: 0;
margin: 0;
background-color: #000000;
}
.container{
height: 500px;
width: 500px;
position: absolute;
transform: translate(-50%,-50%);
left: 50%;
top: 50%;
}
/* Lamp Top */
.lamp{
height: 0;
width: 170px;
border-bottom: 150px solid #2987e4;
border-right: 30px solid transparent;
border-left: 30px solid transparent;
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 100px;
}
/* Lamp Stand */
.lamp:before{
content: "";
position: absolute;
height: 100px;
width: 10px;
background-color: #ffffff;
margin: auto;
left: 0;
right: 0;
top: 150px;
}
/* Lamp Base */
.lamp:after{
content: "";
position: absolute;
height: 50px;
width: 100px;
background-color: #2987e4;
top: 230px;
margin: auto;
left: 0;
right: 0;
border-radius: 50px 50px 0 0;
}
/* Lamp Switch String */
input[type="checkbox"]{
-webkit-appearance: none;
appearance: none;
background-color: #ffffff;
height: 25px;
width: 5px;
position: absolute;
top: 147px;
left: 170px;
outline: none;
cursor: pointer;
transition: 0.5s;
}
/* Lamp Switch String 2 */
input[type="checkbox"]:after{
content: "";
position: absolute;
height: 15px;
width: 15px;
background-color: #ffffff;
border-radius: 50%;
left: -5px;
bottom: -2px;
}
/* Light */
input[type="checkbox"]:before{
content: "";
position: absolute;
height: 130px;
width: 200px;
left: -188px;
z-index: -5;
clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%);
transition: 0.5s;
pointer-events: none;
}
input[type="checkbox"]:checked{
height: 40px;
}
input[type="checkbox"]:checked:before{
background: linear-gradient(
rgba(41,135,228,0.5),
rgba(41,135,228,0.1)
);
}
You can download the code by clicking on the download button below. Drop your suggestions and feedbacks in the comments below. Also, don’t forget to subscribe to my youtube channel.
Interesting but no idea what you would use it on site wise