Dear friends today we will discuss about How to design notification bell icon using css? It is best notification bell icon and you can make more design using css only because this is the best for designing purpose. We are make more notification bell icon if you want to learn more and get source code my all creatives so go to the search bar and type css creatives then you can find all creatives using css and if you want to get source code this article then go to the bottom section and code html, css source code.
Table of Contents
How to Start?
First of all learn html, css for design this notification bell icon and make a best css creatives because css is the most important for any web designs. If you want to lean html, css then visit w3school website. It is a best site for learning programing languages and them get the manual try run button. After this doownload visual studio code for coding and install it in your system then you are ready for make it.
Bell Icon Design
Now open your vs code editor and go to the right top section and click on file and select new file then save filename.html after this press ctrl+1 then html syntax generate automatically on your editor. This feature inbuild only visual code editor so i suggested you download this editor and make projects easily because it is a best code editor software. And this design for notification bell icon project make a fast with visual studio code editor.
HTML for Musician Player
Here we will tell you how to use html codes for make a notification bell icon and create a beautiful design. So first give the div tag with class and class name is main like this <div class=”main”> then close it. After this give the one more div tag with class and class name is alert like this <div class=”alert”> again give the div tag with class and class name is circle. We are give the many time div tag with class for make a beautiful design. Again you have to take the div and name the class in it as Circle 2. After this we will take another div whose name will be bell this time and inside it will take a div whose class name will be bell top then take another div and name its class as bell bottom then take another div whose class name will be bell circle .
So if you not understand by read then you can copy this html source code and paste in your code editor for make easily.
HTML Source Code.
<div class="main">
<div class="alert">1</div>
<div class="circle">
<div class="circle2"></div>
<div class="bell">
<div class="bell-top"></div>
<div class="bell-bottom"></div>
<div class="bell-circle"></div>
</div>
</div>
</div>Popular Articles
How to make progress bar using css?
How to make flipbook using css?
How to make portfolio website with dark mode enable or disable using javascript?
How to create avatar using css only?
CSS for Designing
If you want to give the style then you have three ways for using css first you can give using inline css and second you can give the internal css and third you can give the external css. But we are using internal css in this project so if you want to choose another way for give the css style then this is depend on of your requirement. Here we are using internal css so go to your starting head tag and give the style tag under head tag in this tag give *{} tag and give margin 0, padding 0, box-sizing border-box. and after this give the body tag in this tag use some properties like background color and display flex, justify-content center, align-items center, min-height 100vh, background color rgb.
Now we will take main class and set its width to 300px and height to 295px. And then keep the border radius 20% in it and keep its background color as #fff. After this, Justify will keep the Content Center and Align Items Center and then take the Display Flex. Then take the box shadow 0 0 50px rgba Something like this.
.main{
width: 300px;
height: 295px;
border-radius: 20%;
background: #fff;
justify-content: center;
align-items: center;
display: flex;
box-shadow: 0 0 50px rgba(0,0,0,0.37);
}
Now we will take the Alert class and position absolute in it and do 22% from the top, and 57% from the left so that we see the fix instead. After that we will take width 80px and height as 80px then set background color red then set border radius to 50% and keep color #fff. Display Flex and Justify Content Center Align Items Center With this, the content that we will not put inside it will be visible to us in the center. In this, the font size will be 50px and the font family will take sans-sarif. Something like this.
.alert{
position: absolute;
top: 22%;
left: 57%;
width: 80px;
height: 80px;
background-color: red;
border-radius: 50%;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
font-size: 50px;
font-family: sans-serif;
}
Now we have to take circle 2 class. and set some property inside that like margin top to 150px and rest to 0 0 0, then width has to be taken 100px then height is to be taken 100px then clip path property has to be used so that we can make polygon after that background color is rgb and then rotate the transform to -130deg. So that it gets fixed in its place, something like this.
.circle2{
margin: 150px 0 0 0;
width: 100px;
height: 100px;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
background-color: rgb(3,140,194);
transform: rotate(-130deg);
}
Now we have to take circle class. And its width has to be kept 240px, then the height has to be taken and its height has to be kept 240px. After that we have to take background color rgb. And then in the last we have to make the border radius 50% like this.
.circle{
width: 240px;
height: 240px;
background-color: rgb(3,140,194);
border-radius: 50%;
}
For more information look the css code given below.
CSS Source Code…
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: rgb(211,218,217);
}
.main{
width: 300px;
height: 295px;
border-radius: 20%;
background: #fff;
justify-content: center;
align-items: center;
display: flex;
box-shadow: 0 0 50px rgba(0,0,0,0.37);
}
.alert{
position: absolute;
top: 22%;
left: 57%;
width: 80px;
height: 80px;
background-color: red;
border-radius: 50%;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
font-size: 50px;
font-family: sans-serif;
}
.circle2{
margin: 150px 0 0 0;
width: 100px;
height: 100px;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
background-color: rgb(3,140,194);
transform: rotate(-130deg);
}
.circle{
width: 240px;
height: 240px;
background-color: rgb(3,140,194);
border-radius: 50%;
}
.bell{
position: absolute;
top: 39%;
left: 47%;
width: 90px;
height: 100px;
border-radius: 40px 40px 0 0;
background-color: #fff;
transform: rotate(20deg);
}
.bell-top{
margin: -8px 0 0 38px;
width: 15px;
height: 15px;
background: #fff;
border-radius: 50%;
}
.bell-bottom{
margin: 90px 0 0 -10px;
border-radius: 5px;
width: 110px;
height: 12px;
background: #fff;
}
.bell-circle{
margin: -10px 0 0 50px;
width: 25px;
height: 25px;
border-radius: 50%;
background-color: #fff;
}
