How to create boAt headphones in CSS
How to create boAt headphones in html and css
In this blog post, I will show you how to create a realistic-looking pair of boAt headphones using only html and css. boAt is a popular brand of headphones that offers a variety of styles and features. I will use the boAt Rockerz 255 model as an example, but you can customize the colors and shapes to your liking.
The basic idea is to use html elements to create the different parts of the headphones, such as the ear cups, the headband, the logo, and the wires. Then, we will use css properties to style them and add effects such as gradients, shadows, borders, and transforms. We will also use css animations to make the headphones look like they are playing music.
Let's start with the html structure. We will use a div element with the class "headphones" as the container for all the other elements. Inside this div, we will have two divs with the class "earcup" for the left and right ear cups. Each ear cup will have a div with the class "logo" for the boAt logo, and a div with the class "wire" for the wire that connects to the device. We will also have a div with the class "headband" for the headband that connects the two ear cups.
Here is the html code:
<div class="headphones">
<div class="earcup left">
<div class="logo"></div>
<div class="wire"></div>
</div>
<div class="earcup right">
<div class="logo"></div>
<div class="wire"></div>
</div>
<div class="headband"></div>
</div>
Now let's move on to the css part. We will use a relative position for the headphones container and an absolute position for all the other elements. This way, we can easily position them relative to each other.
We will also use a box-sizing property of border-box for all the elements. This means that the width and height of an element will include its padding and border, which makes it easier to calculate their sizes.
Here is the css code for the headphones container and its position:
.headphones {
position: relative;
width: 400px;
height: 300px;
margin: 50px auto;
box-sizing: border-box;
}
Next, we will style the ear cups. We will use a border-radius property of 50% to make them circular. We will also use a linear-gradient property to create a gradient effect from dark gray to light gray. We will add some box-shadow properties to create some depth and realism.
We will also use a transform property to rotate and skew the ear cups slightly. This will make them look more natural and dynamic.
Here is the css code for the ear cups:
.earcup {
position: absolute;
width: 150px;
height: 150px;
border-radius: 50%;
background: linear-gradient(to bottom right, #333, #eee);
box-shadow: inset 0 -10px 20px rgba(0,0,0,0.2),
inset 0 10px 20px rgba(255,255,255,0.2),
0 5px 10px rgba(0,0,0,0.5);
}
.left {
top: 50%;
left: -25px;
transform: rotate(-10deg) skew(-10deg);
}
.right {
top: 50%;
right: -25px;
transform: rotate(10deg) skew(10deg);
}
Next, we will style the logo. We will use a pseudo-element (::before) to create a circle with a white border inside each ear cup. We will also use a text-shadow property to create a subtle glow effect around the logo text.
We will also use a transform property to rotate and scale the logo slightly. This will make it look more aligned with the ear cups.
Here is the css code for the logo:
.logo {
position: absolute;
top: calc(50% - 25px);
left: calc(50% - 25px);
}
.logo::before {
content: "";
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
border: 2px solid white;
}
.logo::after {
content: "boAt";
position: absolute;
top: calc(50% - 12px);
left: calc(50% - 15px);
}
This full code
.headphones {
position: relative;
width: 400px;
height: 300px;
margin: 50px auto;
box-sizing: border-box;
}
.earcup {
position: absolute;
width: 150px;
height: 150px;
border-radius: 50%;
background: linear-gradient(to bottom right, #333, #eee);
box-shadow: inset 0 -10px 20px rgba(0,0,0,0.2),
inset 0 10px 20px rgba(255,255,255,0.2),
0 5px 10px rgba(0,0,0,0.5);
}
.left {
top: 50%;
left: -25px;
transform: rotate(-10deg) skew(-10deg);
}
.right {
top: 50%;
right: -25px;
transform: rotate(10deg) skew(10deg);
}
.logo {
position: absolute;
top: calc(50% - 25px);
left: calc(50% - 25px);
}
.logo::before {
content: "";
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
border: 2px solid white;
}
.logo::after {
content: "boAt";
position: absolute;
top: calc(50% - 12px);
left: calc(50% - 15px);
}
css code:
.headphones {
position: relative;
width: 400px;
height: 300px;
margin: 50px auto;
box-sizing: border-box;
}
.earcup {
position: absolute;
width: 150px;
height: 150px;
border-radius: 50%;
background: linear-gradient(to bottom right, #333, #eee);
box-shadow: inset 0 -10px 20px rgba(0,0,0,0.2),
inset 0 10px 20px rgba(255,255,255,0.2),
0 5px 10px rgba(0,0,0,0.5);
}
.left {
top: 50%;
left: -25px;
transform: rotate(-10deg) skew(-10deg);
}
.right {
top: 50%;
right: -25px;
transform: rotate(10deg) skew(10deg);
}
.logo {
position: absolute;
top: calc(50% - 25px);
left: calc(50% - 25px);
}
.logo::before {
content: "";
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
border: 2px solid white;
}
.logo::after {
content: "boAt";
position: absolute;
top: calc(50% - 12px);
left: calc(50% - 15px);
}
CSS Headphones codes sharing by Sasha sashatran) on CodePen.
See the Pen CSS Headphones by Sasha (@sashatran) on CodePen.
SUBSCRIBE to our YouTube channel, visit to:
https://www.youtube.com/Indicoderz
*********************************************
Follow indicoderz on Instagram
https://www.instagram.com/indicoderz/
**********************************************
Follow indicoderz on Website
https://indicoderz.blogspot.com
**********************************************
Follow indicoderz on Twitter
https://www.twitter.com/indicoderz
*********************************************
Follow indicoderz on Iinkedin
https://www.linkedin.com/in/indicoderz
**********************************************
Follow indicoderz on Facebook
https://www.facebook.com/Theindicoderz
******************************************
Subscribe Indicoderz on YouTube
https://www.youtube.com/Indicoderz
********************************************
Post a Comment