Dear Friends, In this article we will tell you How to Design Music Player Using CSS? So i hope you like our artcle and if you want to get the source code related this artcle then you can get the given below code and paste your code editor for make changes.
How to Start?
First of all learn html, css for design this Music Player because it is make for javascript projects. 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 Music Player project make a fast with visual studio code editor.
HTML for Musician Player
Here we are used the html for this music player. So first give the div tag with class and class name is palyer like this <div class=”player”></div>. After that give the again give the div tag with class like this <div class=”back”></div> after this get the icon from ionicon site. If you don’t know how to use ionicon so learn this for used easily ionicons. First go the the ionicons.com website and press the usage button then get the cdn link and paste in your codes under the body tag. Then go to the again ionicons.com website then click on icons button and search back button then cody button source code and paste in the back class.
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?
HTML Source Code..
<div class="player">
<div class="back"><ion-icon name="return-down-back-outline"></ion-icon></div>
<div class="radio">
<ion-icon name="radio-button-on-outline"></ion-icon>
<ion-icon name="radio-button-off-outline"></ion-icon>
</div>
<div class="more"><ion-icon name="ellipsis-vertical-outline"></ion-icon></div>
<div class="img-circle"></div>
<div class="img"></div>
<h3>WE DON'T TALK ANYMORE</h3>
<p>Singer - Beyonce</p>
<div class="share-like">
<ion-icon style="margin-right: 10px;" name="share-social-outline"></ion-icon>
<ion-icon name="heart-outline"></ion-icon>
</div>
<span class="start-time">03:20</span>
<span class="end-time">05:01</span>
<div class="progress">
<div class="blue-line"></div>
</div>
<div class="progress-circle"></div>
<div class="all-song-button">
<div class="back-song"><ion-icon name="play-back-outline"></ion-icon></div>
<div class="pause-song"><ion-icon name="play-outline"></ion-icon></div>
<div class="next-song"><ion-icon name="play-forward-outline"></ion-icon></div>
</div>
</div>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 guve 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 font-family.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: ‘League Gothic’, sans-serif;
}
Now you have to take the body tag and flex the display in it. Then you have to keep justify content center, after that you have to center the align items and keep the minimum height 100vh. Then finally you have to save it by keeping the background rgb. Exactly like this.
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #333;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #333;
}
After that you have to take player class and keep its width 270px and height 500px then take box shadow 3px 5px rgba then -3px -5px 5px rgba after that you have to keep border radius 10px something like this.
Then you have to take the icon and give it some style. As did the color.
.player{
width: 270px;
height: 500px;
box-shadow: 3px 5px 5px rgba(0,0,0,0.438),
-3px -5px 5px rgba(255,255,255,0.1);
border-radius: 10px;
}
ion-icon{
color: rgb(163,163,163);
}
Then you have to take player class after that take back class after that take icon and keep its font size 20px so that we can be well visible after that you have to take player class again and after that you have to take radio class . And keep its position absolute, then keep it 90px from the top and 665px from the left. Again you have to take player button and this time you have to take radio class then take icon. And its font size has to be kept 25px somthing like this.
.player .back ion-icon{
font-size: 20px;
}
.player .radio{
position: absolute;
top: 90px;
left: 665px;
}
.player .radio ion-icon{
font-size: 10px;
}
Now we have to take player class again then we will take more class after that we will keep its postive absolute and 85px from top then 555px from right.
.player .more{
position: absolute;
top: 85px;
right: 555px;
}
For more information look the css code given below.
CSS Source Code…
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'League Gothic', sans-serif;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #333;
}
.player{
width: 270px;
height: 500px;
box-shadow: 3px 5px 5px rgba(0,0,0,0.438),
-3px -5px 5px rgba(255,255,255,0.1);
border-radius: 10px;
}
ion-icon{
color: rgb(163,163,163);
}
.player .back{
position: absolute;
top: 85px;
left: 560px;
}
.player .back ion-icon{
font-size: 20px;
}
.player .radio{
position: absolute;
top: 90px;
left: 665px;
}
.player .radio ion-icon{
font-size: 10px;
}
.player .more{
position: absolute;
top: 85px;
right: 555px;
}
.player .more ion-icon{
font-size: 20px;
}
.player .img-circle{
width: 160px;
height: 160px;
border-radius: 50%;
border: 4px dotted rgb(0,255,213);
margin: 100px 0 0 55px;
box-shadow: 0 0 50px rgba(255,255,255,0.459);
animation: animate 2s ease-in-out infinite;
}
@keyframes animate{
0%{
transform: rotate(360deg);
}
}
.player .img{
width: 153px;
height: 153px;
border-radius: 50%;
background-image: url(./authentic-vocal-style.jpg);
background-position: center;
background-size: 100% 100%;
position: absolute;
top: 166px;
left: 607px;
}
h3{
margin: 50px 0 0 15px;
color: rgb(156,155,155);
font-weight: 100;
}
p{
margin: 0 0 15px 15px;
color: rgb(104,104,104);
}
.share-like{
position: absolute;
top: 375px;
right: 565px;
}
.share-like ion-icon{
font-size: 20px;
}
.start-time{
margin-left: 15px;
color: rgb(160,160,160);
}
.end-time{
position: absolute;
right: 565px;
bottom: 175px;
color: rgb(160,160,160);
}
.progress{
width: 240px;
height: 7px;
position: absolute;
left: 562px;
bottom: 165px;
border-radius: 5px;
border: 1px solid rgb(122,122,122);
}
.progress .blue-line{
width: 65%;
height: 100%;
background-color: rgb(0,195,255);
}
.progress-circle{
position: absolute;
left: 707px;
bottom: 161px;
width: 15px;
height: 15px;
background: #fff;
box-shadow: inset 0 0 5px black;
border-radius: 50%;
}
.all-song-button{
display: flex;
position: absolute;
left: 615px;
bottom: 100px;
}
.all-song-button ion-icon{
font-size: 25px;
}
.all-song-button .back-song{
margin-right: 30px;
}
.all-song-button .next-song{
margin-left: 30px;
}
