Dear friends in this articles we learn about How to Design Ice cream using CSS only | ice cream. If you like our article then visit more.
CSS CREATIVE
After this, you have to open the code editor and save it by selecting a new file and remember that while saving the file, you must write dot html because the browser has to explain it from html itself, without html we can not run any language That’s why it is very important for us to come to html for ice cream.
How to Start
Now you have to do coding ice cream, then 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.
Visual Studio Features
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 for ice cream design.
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 CSS 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 Ice Cream
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 ice cream project make a fast with visual studio code editor.
Friends, you can make this design very easily, just follow our article, so let’s make it. First of all we will go to body tag and after that we will take div tag tag after that we will give class to it and we will name class as ice cream. Then we will take another div tag inside it and give class to it too. But we will name this class as line 1. After that we will again take div tag and name its class as line 2 then we will take another div tag and name its class as stand.
CSS for Design
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, etc. For more information look the css code given below.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: rgb(44, 45, 54);
}
Now we will take ice cream class and give it width 350px and height 200px after that we will give background color rgb then border radius 20px 30% 30% 20px. After this we will take the box shadow inset and in it we will take 0px 0px 10px rgb color.
.icecream{
width: 350px;
height: 200px;
background-color: rgb(73, 23, 23);
border-radius: 20px 30% 30% 20px;
overflow: hidden;
box-shadow: inset 0px 0px 10px rgb(160, 106, 106);
}
Now we will take line 1 class and give margin 50px from top and width 100% height also 100% after that we will give background color rgb then we will give border radius 0px 10px 2px 0px after that we will give box shadow 0px 0px 10px rgb in it.
.line-1{
margin-top: 50px;
width: 100%;
height: 10px;
background-color: rgb(49, 15, 15);
border-radius: 0px 10px 2px 0px;
box-shadow: 0px 0px 10px rgb(112, 60, 60);
}
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>IceCream by Code with Nizami</title>
</head>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: rgb(44, 45, 54);
}
.icecream{
width: 350px;
height: 200px;
background-color: rgb(73, 23, 23);
border-radius: 20px 30% 30% 20px;
overflow: hidden;
box-shadow: inset 0px 0px 10px rgb(160, 106, 106);
}
.line-1{
margin-top: 50px;
width: 100%;
height: 10px;
background-color: rgb(49, 15, 15);
border-radius: 0px 10px 2px 0px;
box-shadow: 0px 0px 10px rgb(112, 60, 60);
}
.line-2{
margin-top: 80px;
width: 100%;
height: 10px;
background-color: rgb(49, 15, 15);
border-radius: 0px 2px 10px 0px;
box-shadow: 0px 0px 10px rgb(112, 60, 60);
}
.stand{
width: 110px;
height: 50px;
background-color: rgb(255, 233, 136);
position: absolute;
top: 290px;
left: 398px;
border-radius: 5px 0px 0px 5px;
box-shadow: inset 0 0 6px rgb(155, 153, 153);
border-right: 2px solid rgb(73, 23, 23);
}
</style>
<body>
<div>
<div></div>
<div></div>
</div>
<div></div>
</body>
</html>Watch video related this article…
