Dear friends in this articles we learn about how to make Dark Dark Mobile Icons using CSS only. If you like our article then visit more.
Mobile Icon
Now you have to do coding, your file has also been created, now time has come to do your coding, so before starting coding, you must know about html css because whatever code we will write, it is in html and css only. That’s why these languages are very important to you, so let’s start coding now for dark Dark Mobile Icons.
First of all, you have to download a code editor in which we can write our code, we are telling you the names of some code editors, Visual Studio Code, this is the most used and most people use it because some of its features are very Works easily in writing our code quickly and it has built-in tags and properties, with the help of which we make our code very easy for dark Dark Mobile Icons using css.
How to start
Press ctrl + 1 and see the shortcut feature of Visual Studio Code in front of you, using which makes our work easy and very quick, when you do ctrl + 1, then the complete syntax of html will open in front of you, using which we create a website We can create web applications, all the code that is written is written inside it, so it is very important for us to learn html if we want to become a web developer, then well then we know how login form design from further coding do.
Neumorphism (aka neomorphism) is a relatively new design trend and a term that’s gotten a good amount of buzz lately. It’s aesthetic is marked by minimal and real-looking UI that’s sort of a new take on skeuomorphism — hence the name. It got its name in a UX Collective post from December 2019, and since then, various design and development communities have been actively discussing the trend, usually with differing opinions. Chris poked fun at it on Twitter. Adam Giebl created an online generator for it. Developers, designers, and UX specialists are weighing in on the topic of aesthetics, usability, accessibility, and practicality of this design trend.
Clearly, it’s stricken some sort of chord in the community.
Let’s dip our toes into the neumorphism pool, showcasing the various neumorphic effects that can be created using our language of choice, CSS. We’ll take a look at both the arguments for and against the style and weigh how it can be used in a web interface.
Neumorphism Dark Mobile Icons as a user interface
We’ve already established that the defining quality of neumorphism is a blend of minimalism and skeuomorphism. And that’s a good way to look at it. Think about the minimal aesthetic of Material Design and the hyper-realistic look of skeuomorphism. Or, think back to Apple’s design standards circa 2007-12 and compare it to the interfaces it produces today.
HTML for make Mobile Icons
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 dark mobile icon project make a fast with visual studio code editor.
Now we will learn how to write html for dark mobile icon. So let’s know that first you have to go to the body tag, after that you will take the div tag and together with the class whose name is to be named main. Then after that we will take div tag again and we will name its class as icons. Again we will take div tag and name its class as icon 1 after that we will take div tag again and we will name its class as icon 2. Again we will take div tag and name its class as icon 3, then again take div tag and name its class as icon 4. Now in the last we will take the div tag and name its class as center.
CSS for mobile icons design
Now we will design the dark mobile icons using css. So let’s design, first of all you have to know how we write css. We write css in 3 ways first we can write inline and second we can write it internal and third we can write it external so that we have to create new css file but in this article we have used internal css so that We will not have to create css file separately and we can work inside the same file.
First of all we have to go inside the head section and going inside we have to take style tag then we will take * tag and by applying curly braces open and close in it we will keep margin as 0 and padding as 0. And will keep its box sizing border box. Then we will take the body tag and flex the display in it, then we will center the justify content, after that we will center the align items and also make the background color rgb.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: rgb(22, 22, 22);
}
Source Code..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dark Mobile Icons</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #5c5c5c;
}
ul{
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
border-radius: 10px;
padding: 20px;
width: 240px;
background: linear-gradient(to bottom, rgb(73,73,73), rgb(44,44,44));
box-shadow: -1px -1px 5px rgba(0,0,0,0.753),
2px 2px 5px rgba(0,0,0,0.753);
}
ul li{
position: relative;
list-style: none;
text-align: center;
margin: 15px;
}
ul li label{
position: relative;
}
ul li label input[type="checkbox"]{
position: absolute;
opacity: 0;
cursor: pointer;
}
ul li label .icon-box{
width: 60px;
height: 60px;
background: #3a3a3a;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid rgb(44,44,44);
border-radius: 10px;
}
ul li label .icon-box ion-icon{
font-size: 30px;
color: rgb(94,94,94);
}
ul li label input[type="checkbox"]:checked ~ .icon-box{
box-shadow: -1px -1px 5px rgb(253,1,1),
1px 1px 5px rgb(253,1,1);
}
ul li label input[type="checkbox"]:checked ~ .icon-box ion-icon{
transform: scale(0.94);
color: rgb(253,1,1);
}
</style>
</head>
<body>
<ul>
<li>
<label>
<input type="checkbox" name="checkbox">
<div>
<ion-icon name="call-outline"></ion-icon>
</div>
</label>
</li>
<li>
<label>
<input type="checkbox" name="checkbox">
<div>
<ion-icon name="moon-outline"></ion-icon>
</div>
</label>
</li>
<li>
<label>
<input type="checkbox" name="checkbox">
<div>
<ion-icon name="wifi-outline"></ion-icon>
</div>
</label>
</li>
<li>
<label>
<input type="checkbox" name="checkbox">
<div>
<ion-icon name="airplane-outline"></ion-icon>
</div>
</label>
</li>
<li>
<label>
<input type="checkbox" name="checkbox">
<div>
<ion-icon name="volume-high-outline"></ion-icon>
</div>
</label>
</li>
<li>
<label>
<input type="checkbox" name="checkbox">
<div>
<ion-icon name="bluetooth-outline"></ion-icon>
</div>
</label>
</li>
</ul>
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
</body>
</html>Watch video related this article…
