Creating a Flower using CSS | HTML & CSS

 Hello, learner In this article, we are going to Create a Flower using CSS. In the earlier past post, we created Creating a Helicopter using CSS | HTML & CSS Now it is time to create Flower.


Creating a Flower using CSS | HTML & CSS


In this program, we create a Flower using HTML and CSS. As you see in the above image it is the output of the below code. we have to create 3 different layers of flower Petal1, Petal2, and Petal3. we have to create a circle on mid of the flower. now with the CSS, we design it with yellow color and in mid of the flower make a design using CSS.

Creating a Flower using CSS [Source code]

To create a Creating a Flower using CSS you have to create two HTML and CSS files named index.html and style.css in the same folder and you have to link the CSS file to HTML. after that paste the HTML code in index.html and paste the CSS code in style.css that’s all after pasting the code. 

At first, you have to create an HTML file named index.html and paste the below code on it and save it. Remember to give a .html extension to the HTML file.

<!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">

    <link rel="Stylesheet" href="style.css">

    <title>Flower</title>

</head>

<body>


<div class="flower">

    <div class="mid">

    </div>

    <div class="Petal1 p1">

    </div>

    <div class="Petal1 p2">

    </div>

    <div class="Petal1 p3">

    </div>

    <div class="Petal1 p4">

    </div>

    <div class="Petal2 p1">

    </div>

    <div class="Petal2 p2">

    </div>

    <div class="Petal2 p3">

    </div>

    <div class="Petal2 p4">

    </div>

    <div class="Petal3 p1">

    </div>

    <div class="Petal3 p2">

    </div>

    <div class="Petal3 p3">

    </div>

    <div class="Petal3 p4">

    </div>

  </div>

</body>

</html>

After pasting the HTML code the second you have to create a CSS file named style.css. Paste the below code on it and save it. Again remember to give .css extension to CSS file. 

.flower {

  height: 200px;

  width: 200px;

  margin:20px auto;



  display: flex;

  align-items: center;

  justify-content: center;


  position: relative;

}


.mid {

  width: 50px;

  height: 50px;

  border-radius: 50%;

  

  background: radial-gradient(circle, #000, #ff5e00, #000);


  z-index: 4;


  background-size: 5px 5px;


  filter: drop-shadow(0 0 8px #682600);

}


.Petal1 {

  position: absolute;

  left: 40px;

  z-index: 3;


  width: 120px;

  height: 30px;

  border-radius: 50%;


  background: radial-gradient(circle, #ff5e00, #ffbb00);


  filter: drop-shadow(0 0 5px #e05200);

}


.Petal1.p1 {

  transform: rotate(22.5deg);

}

.Petal1.p2 {

  transform: rotate(67.5deg);

}

.Petal1.p3 {

  transform: rotate(110.5deg);

}

.Petal1.p4 {

  transform: rotate(157.5deg);

}


.Petal2 {

  position: absolute;

  left: 0;

  z-index: 2;


  width: 200px;

  height: 40px;

  border-radius: 50%;


  background: radial-gradient(circle, #ff5e00, #fbd702);


  filter: drop-shadow(0 0 5px #e05200);

}


.Petal2.p1 {

}


.Petal2.p2 {

  transform: rotate(90deg);

}

.Petal2.p3 {

  transform: rotate(45deg);

}


.Petal2.p4 {

  transform: rotate(135deg);

}


.Petal3 {

  position: absolute;

  left: 0px;

  z-index: 1;


  width: 200px;

  height: 40px;

  border-radius: 50%;


  background: radial-gradient(circle, #ff5e00, #fbd702);


  filter: drop-shadow(0 0 2px #fbd702);

}


.Petal3.p1 {

  transform: rotate(22.5deg);

}

.Petal3.p2 {

  transform: rotate(67.5deg);

}

.Petal3.p3 {

  transform: rotate(110.5deg);

}

.Petal3.p4 {

  transform: rotate(157.5deg);

}


That’s all after pasting the code now your code will successfully run. If you get any kind of error/problem in the code just comment down or contact me on social media

You might like this

 

Tags

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.