Dear friends today we will discuss about how to design flushed emoji using css only. It is best css creatives and you can make more emoji using css only because this is the best for designing purpose. We are make more css creatives 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.
How to Start?
First of all learn html, css for design this flushed emoji 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.
Musician Player 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 flushed emoji project make a fast with visual studio code editor.
HTML for Musician Player
Here we are used the html for this Flushed Emoji. So first give the div tag with class and class name is emoji like this <div class=”emoji”></div>. After that give the again div tag with class like this <div class=”eye-brow-1”></div> after this give the again div tag with class and class name is eye-brow-2 like this <div class=”eye-brow-2″></div>. After this give the one more div tag with class like this <div class=”eye-1″></div> then give the again div tag with class like this <div class=”eye-2″></div> and now give the div with class for black circle in the eye class like this <div class=”circle”></div> again give the div tag with class like this <div class=”mouth”></div>. If you not understand by reading then copy this source code and you code editor for make easily.
Source Code..
<div class="emoji">
<div class="eye-brow-1"></div>
<div class="eye-brow-2"></div>
<div class="eye-1">
<div class="circle"></div>
</div>
<div class="eye-2">
<div class="circle"></div>
</div>
<div class="mouth"></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 rgb somthing like this.
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: rgb(216,230,228);
}
After that have to take emoji class and keep its width 300px and height also 300px then take background color rgb and save border radius 50%, box shadow inset 0 0 30px rgb. For example.
.emoji{
width: 300px;
height: 300px;
background-color: rgb(255,196,0);
border-radius: 50%;
box-shadow: inset 0 0 30px rgb(204,56,7);
}
After this you have to take eye brow 1 class. And take its width 80px and height 50px. Then save the position by keeping it absolute. After that you have to pay 35% from the top, and 42% from the left. Then make the border top 15px solid rgb and the transform rotate -10deg for example.
.eye-brow-1{
width: 80px;
height: 50px;
position: absolute;
top: 35%;
left: 42%;
border-top: 15px solid rgb(90,48,34);
transform: rotate(-10deg);
border-radius: 50%;
}
After this you have to take eye brow 2 class. And take its width 80px and height 50px. Then save the position by keeping it absolute. After that you have to pay 35% from the top, and 42% from the right. Then make the border top 15px solid rgb and the transform rotate 10deg for example.
.eye-brow-2{
width: 80px;
height: 50px;
position: absolute;
top: 35%;
right: 42%;
border-top: 15px solid rgb(90,48,34);
transform: rotate(10deg);
border-radius: 50%;
}
Now you have to take eye 1 class and keep its width 100px and height also 100px, then you have to keep its border radius 50%. After that put the background color #fff and the border 3ps solid yellow. Then keeping its position absolute has to be made 42% from the top, and 565px from the left. Then in it box shadow inset 0 0 15px rgb and display flex justify content center align items center. So that whatever content we write in it, it will be visible to us in the center for example.
.eye-1{
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #fff;
border: 3px solid yellow;
position: absolute;
top: 42%;
left: 565px;
box-shadow: inset 0 0 15px rgb(90,48,34);
display: flex;
justify-content: center;
align-items: center;
}
After that we have to take circle class. width 30px and height also 30px and border 2ps solid rgb border radius 50%, then background will take linear gradient for example.
.circle{
width: 30px;
height: 30px;
border: 2px solid rgb(90,48,34);
border-radius: 50%;
background: linear-gradient(rgb(0,0,0),rgba(27,27,27,0.582));
}
If you want to make easily then copy the code and paste in your code editor.
CSS Source Code…
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: rgb(216,230,228);
}
.emoji{
width: 300px;
height: 300px;
background-color: rgb(255,196,0);
border-radius: 50%;
box-shadow: inset 0 0 30px rgb(204,56,7);
}
.eye-brow-1{
width: 80px;
height: 50px;
position: absolute;
top: 35%;
left: 42%;
border-top: 15px solid rgb(90,48,34);
transform: rotate(-10deg);
border-radius: 50%;
}
.eye-brow-2{
width: 80px;
height: 50px;
position: absolute;
top: 35%;
right: 42%;
border-top: 15px solid rgb(90,48,34);
transform: rotate(10deg);
border-radius: 50%;
}
.eye-1{
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #fff;
border: 3px solid yellow;
position: absolute;
top: 42%;
left: 565px;
box-shadow: inset 0 0 15px rgb(90,48,34);
display: flex;
justify-content: center;
align-items: center;
}
.circle{
width: 30px;
height: 30px;
border: 2px solid rgb(90,48,34);
border-radius: 50%;
background: linear-gradient(rgb(0,0,0),rgba(27,27,27,0.582));
}
.eye-2{
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #fff;
border: 3px solid yellow;
position: absolute;
top: 42%;
right: 565px;
box-shadow: inset 0 0 15px rgb(90,48,34);
display: flex;
justify-content: center;
align-items: center;
}
.mouth{
width: 60px;
height: 15px;
border-radius: 10px;
background-color: rgb(90,48,34);
position: absolute;
left: 650px;
bottom: 34%;
}
