LEARN HOW TO CREATE A GLOWING BULB WITH HTML AND CSS
How to create a glowing bulb with HTML and CSS?
- Use HTML to structure the glowing bulb web page.
- Use a CSS file to style the glowing bulb web page.
The source code for this project is available for download by clicking ‘Download Now’ or cloning the GitHub repository.
Source code of HTML file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Glowing Bulb</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<input type="checkbox" id="button">
<img src="bulb-off.jpg" id="off" id="button">
<img src="bulb-on.jpg" id="on" id="button">
<label for="button"><span></span></label>
</div>
</body>
</html>
Save this code with the .html extension.
Explanation.
Head tag:
- Content in the head section is invisible to the visitor.
body tag:
- This contains the visible content of the webpage.
- div class=”wrapper”: This creates a field detail with the class “wrapper” that can preserve all of the interactive factors
- input type=”checkbox” id=”button”: This creates a checkbox detail with the ID “button”. This checkbox might be used to control the state of the bulb.
- img src=”bulb-off.jpg” id=”off” id=”button”: This creates an image element with the ID “off” and “button”. The image source is “bulb-off.jpg”, which presumably shows a picture of an off bulb. However, having two IDs on the same element is invalid HTML. It’s likely meant to be just one ID, either “off” or “button”.
- img src=”bulb-on.jpg” id=”on” id=”button”: This creates another image element with the ID “on” and “button”. The image source is “bulb-on.jpg”, presumably showing a picture of an on the bulb. Similar to the previous element, having two IDs is invalid.
- label for=”button”><span></span></label>: This creates a label element with an empty span inside. The “for” attribute associates the label with the checkbox element that has the ID “button”. This means clicking on the label will also toggle the checkbox.
Source code of CSS file.
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body
{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #ffffff;
}
.wrapper
{
position: relative;
height: 500px;
width: 450px;
}
.wrapper img
{
position: absolute;
height: 450px;
width: 100%;
margin-top: -50px;
}
.wrapper label
{
position: absolute;
bottom: 40px;
left: 45%;
transform: translate(-50px);
}
.wrapper label span
{
color: #413232;
font-size: 23px;
letter-spacing: 1px;
border: 2px solid #413232;
padding: 10px 20px 10px 20px ;
border-radius: 5px;
transition: all 0.3s ease;
}
.wrapper label span::before
{
content: "TURN OFF";
}
.wrapper label span:hover
{
background: #ffffff;
color: #000000;
}
.wrapper img#on
{
opacity: 0;
animation: animate 3s linear infinite;
}
@keyframes animate
{
0%
{
opacity: 1;
}
5%
{
opacity: 1;
}
70%
{
opacity: 1;
}
75%
{
opacity: 0;
}
80%
{
opacity: 1;
}
85%
{
opacity: 0;
}
90%
{
opacity: 1;
}
100%
{
opacity: 1;
}
}
#button:checked ~ img#on
{
animation: none;
}
#button:checked ~ label span::before
{
content: "TURN ON";
}
.wrapper input
{
display: none;
}
Save this file as style.css
Explanation.
1. Resetting Defaults:
- The first block (*) resets the default browser styles for all elements. It units margin, padding, and field-sizing to 0 for all elements, making sure of constant behavior across special browsers.
2. Body Styles:
- The frame segment defines the general appearance of the page.
- Display: flex; This makes the content of the body a flexbox, allowing us to set up elements in a specific way.
- Align-items: center; This vertically aligns the content within the body to the center.
- Justify-content: center; This horizontally aligns the content material to the center of the body.
- Min-height: 100vh; This sets the minimal top of the body to the viewport height, making sure the content fills the complete visible vicinity.
- Background: #ffffff; This sets the history shade of the body to white.
3. Wrapper Styles:
- The .Wrapper class defines the box for the toggle switch.
- position: relative; This allows other elements inside the wrapper to be positioned relative to its obstacles.
- height: 500px; This units the peak of the wrapper to 500 pixels.
- Width: 450px; This units the width of the wrapper to 450 pixels.
4. Image Styling:
- The .Wrapper img selector patterns the image used for the toggle transfer.
- Position: absolute; This positions the image relative to the wrapper element, permitting it to be layered over other elements.
- Height: 450px; This sets the height of the photograph to 500 pixels, matching the wrapper height.
- Width: 100%; This units the width of the photo to 100% of the wrapper width.
- Margin-top: -50px; This moves the photo 50 pixels upwards from its herbal position, ensuring it is targeted inside the wrapper.
5. Label Styling:
- The .Wrapper label selector styles the label textual content for the toggle switch.
- position: absolute; Positions the label element relative to the wrapper.
- Bottom: 40px; This adjusts the vertical position of the label forty pixels from the lowest of the wrapper.
- Left: 45%; Sets the horizontal position of the label to 45% from the left edge of the wrapper.
- transform: translate(-50px); Moves the label horizontally 50 pixels to the left, centering it inside the 45% position.
6. Label Text Styles:
- The .Wrapper label span selector patterns the textual content within the label detail.
- Color: #413232; Sets the text coloration to a darkish grey.
- Font-size: 23px; Sets the font length to 23 pixels of text in a label.
- Letter-spacing: 1px; Adds 1 pixel of spacing between every letter in a label.
- Border: 2px strong #413232; Creates a 2-pixel strong border across the text in a label with the same dark gray color.
- Transition: all 0.3s ease; Defines a smooth animation for all homes (shade, background, and so on.) with a period of 0.3 seconds and an ease timing function.
7. Label Content:
- The .Wrapper label span::earlier than selector inserts the text “TURN OFF” earlier than the real text content material of the span. This permits pseudo-element styling, creating a visual impact for the label text.
8. Label Hover Effect:
- The .Wrapper label span:hover selector defines the behavior when the person hovers over the label.
- background: #ffffff; Changes the heritage coloration to white.
- Color: #000000; Changes the text shade to black.
9. Image Visibility and Animation:
- The .Wrapper img#on selector targets the photograph with the identification “on”.
- Opacity: 0; Sets the preliminary opacity of the photograph to zero, making it invisible.
- `animation: animate 3s linear infinite.
Thanks for reading this article.