How to make Water Drop Apple Logo using CSS only?

CodewithNizami February 5, 2022

0 0 4 minutes read

Dear friends in this articles we learn about How to make Water Drop Apple Logo using CSS only. If you like our article then visit more.

Table of Contents

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.

How to Start

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 for water drop logo using css.

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 to make water drop logo using css 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 and make logo using css.

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.

If you get the source code or video related this article the copy source code given blow and given video related this artcle i hope you like our video and more easily understanding this code.

HTML for Drop Logo

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.

Now we will learn how to write html for Drop Logo. 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 drop. Then after that we will take div tag again and we will name its class as inner drop. Again we will take div tag and name its class as circle after that we will take div tag again and we will name its class as petal1. Again we will take div tag and name its class as Pankhdi 2, then again take div tag and name its class as Pankdi 3. Now in the last we will take the div tag and name its class as center.

CSS for Drop Logo

Now we will design the stand fan 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;
}

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>Drop Icon</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body{
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: #eee;
        }
        .drop{
            position: absolute;
            width: 250px;
            height: 250px;
            box-shadow: inset 10px 10px 10px rgba(0,0,0,0.05),
            15px 25px 10px rgba(0,0,0,0.05),
            15px 20px 20px rgba(0,0,0,0.05),
            inset -10px -10px 15px rgba(255, 255, 255, 0.9);
            border-radius: 50%;
        }
        .drop::before{
            content: '';
            position: absolute;
            top: 25px;
            left: 55px;
            width: 25px;
            height: 25px;
            border-radius: 50%;
            background: #fff;
        }
        .drop::after{
            content: '';
            position: absolute;
            top: 20px;
            left: 95px;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background: #fff;
        }
        .drop ion-icon{
            font-size: 150px;
            position: absolute;
            top: 40px;
            left: 50px;
            color: grey;
        }
    </style>
</head>
<body>
    <div>
        <ion-icon name="logo-apple"></ion-icon>
    </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>

How to make Water Drop Apple Logo using CSS only?

CSS CREATIVE