How to Design iPhone Mobile using CSS only | CSS Creative Tutorial
Dear friends in this articles we learn about How to Design iPhone Mobile using CSS only | CSS Creative Tutorial. If you like our article then visit more.
Creative Design
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 iPhone Mobile design from further coding do.
Used well, CSS animation is an incredibly useful and powerful tool. It can add interest or creative excitement, direct the user’s eye, explain something quickly and succinctly, and improve usability. For that reason, recent years have seen more and more animation on sites and in app.
In this article, we round up some of the coolest iPhone Mobile with animation examples we’ve seen, and show you how to recreate them. Read on for a range of in-depth tutorials and inspiring effects (and links to their code) to explore.
What is CSS animation?
CSS animation is a method of animating certain HTML elements without having to use processor and memory-hungry JavaScript or Flash. There’s no limit to the number or frequency of CSS properties that can be changed. CSS animations are initiated by specifying keyframes for the animation: these keyframes contain the styles that the element will have.
While it may seem limited when it comes to animation, CSS is actually a really powerful tool and is capable of producing beautifully smooth 60fps animations. “Delivering thoughtful, fluid animations that contribute meaningful depth to your site doesn’t have to be difficult,” says front end web developer. “Modern CSS properties now hand you nearly all of the tools you’ll need to create memorable experiences for your users.”
The best animations still have their roots in Disney’s classic 12 principles of animation – you’ll see several mentions of that throughout these CSS animation examples, so it’s worth checking out that article before you get started. You might also want to explore our roundup of great animated music videos for further examples and inspiration.
HTML for make IPhone Mobile
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 stand fan project make a fast with visual studio code editor and design this iphone mobile.
CSS for Design IPhone Mobile
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 and make a stand fan using iphone mobile.
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.
Dear friends, in this article we will tell you how to make a stand fan using html and css and how to give animation together. So let’s know how to make a fan. First of all you should have knowledge of html and css because if you don’t understand then what is the use of seeing code, so I would advise you to first learn html and css, after that you can read this article and use our given source code on your own. Can add to the project. If you want to learn html and css well. So you can learn by going to w3school, there you will also get the option of running, so that you can easily run the code after reading and see, so I will recommend you to w3school itself.
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>iPhone by Code with Nizami</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Kanit&family=Poppins:wght@200&family=Righteous&family=Russo+One&family=Ubuntu+Mono&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: rgb(54, 54, 54);
}
.body{
width: 230px;
height: 430px;
background-color: rgb(228, 210, 176);
border-radius: 30px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 3px 3px 13px rgb(0, 0, 0),
inset 0 0 10px rgb(153, 153, 153);
}
.display{
width: 210px;
height: 330px;
background-color: rgb(32, 32, 32);
box-shadow: inset 0 0 5px black;
display: flex;
justify-content: center;
align-items: center;
}
.display ion-icon{
font-size: 120px;
color: rgb(140, 247, 224);
}
.btn{
position: absolute;
bottom: 104px;
left: 665px;
width: 38px;
height: 38px;
border: 1px solid rgb(95, 6, 6);
border-radius: 50%;
box-shadow: inset 0 0 5px rgb(66, 0, 0);
}
.camera{
position: absolute;
top: 112px;
left: 620px;
width: 12px;
height: 12px;
border-radius: 50%;
background-color: black;
justify-content: center;
align-items: center;
display: flex;
}
.small-camera{
width: 5px;
height: 5px;
border-top: 1px solid rgb(58, 58, 58);
border-left: 1px solid rgb(58, 58, 58);
border-radius: 50%;
}
.speaker{
position: absolute;
top: 115px;
left: 655px;
width: 50px;
height: 6px;
border-radius: 50px;
background-color: black;
}
.back-side{
position: absolute;
top: 100px;
left: 300px;
width: 230px;
height: 430px;
background-color: rgb(228, 210, 176);
border-radius: 30px;
box-shadow: 3px 3px 13px rgb(0, 0, 0),
inset 0 0 10px rgb(153, 153, 153);
}
.back-camera{
position: relative;
width: 30px;
height: 30px;
margin: 15px 0 0 15px;
border-radius: 50%;
background-color: black;
border: 2px solid rgb(99, 99, 99);
display: flex;
justify-content: center;
align-items: center;
}
.small-camera-2{
width: 15px;
height: 15px;
border-radius: 50%;
border-top: 1px solid rgb(82, 82, 82);
border-left: 1px solid rgb(82, 82, 82);
}
.flash{
position: absolute;
top: 25px;
left: 65px;
width: 15px;
height: 10px;
background-color: white;
border-radius: 10px;
box-shadow: inset 0 0 3px black;
}
.icon{
position: relative;
margin: 20px 0 0 80px;
}
.icon ion-icon{
font-size: 60px;
color: rgb(255, 255, 255);
}
.content{
margin: 190px 0 0 0;
}
.content h3{
text-align: center;
}
.content p{
margin-top: 5px;
text-align: center;
font-size: 10px;
line-height: 10px;
}
</style>
</head>
<body>
<div>
<div>
<div></div>
</div>
<div></div>
<div>
<ion-icon name="logo-apple"></ion-icon>
</div>
<div></div>
</div>
<div>
<div>
<div></div>
</div>
<div></div>
<div>
<ion-icon name="logo-apple"></ion-icon>
</div>
<div>
<h3>iPhone</h3>
<p>Lorem ipsum, dolor sit amet<br>
consectetur adipisicing elit
</p>
</div>
</div>
<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…
