Pure CSS3 Flowers

<html> <head> <style> body { background-color: OliveDrab; font-family: Times New Roman; font-size: 40px; } .circlea{ width:80px; height:80px; background:yellow; box-shadow: inset 0px 0px 20px 10px orange, 0px 0px 30px 20px PaleTurquoise; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; z-index:2; position:absolute; top: 460px; left:700px; } .flowera{ width:80px; height:200px; background-color: LightGoldenrodYellow; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; z-index:1; position:absolute; top:400px; left:700px; } .flowera2{ width:80px; height:200px; background-color: LightGoldenrodYellow; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; z-index:0; position:absolute; top:400px; left:700px; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); rotation:45deg; } .flowera3{ width:80px; height:200px; background-color: LightGoldenrodYellow; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; z-index:-1; position:absolute; top:400px; left:700px; -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg); rotation:0deg; } .flowera4{ width:80px; height:200px; background-color: LightGoldenrodYellow; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; z-index:-2; position:absolute; top:400px; left:700px; -webkit-transform:rotate(135deg); -moz-transform:rotate(135deg); rotation:135deg; } .flowerb { display:block; width:100px; height:100px; background:pink; -moz-border-radius:25px; -webkit-border-radius:25px; border-radius:25px; radius:30px; position:absolute; top: 100px; left: 100px; } .flowerb2 { display:block; width:100px; height:100px; background-color: pink; background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, from(red), to(pink)); background: -moz-radial-gradient(50% 50%, farthest-side,red,pink); -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); rotation:45deg; -moz-border-radius:25px; -webkit-border-radius:25px; border-radius:25px; position:absolute; top: 100px; left: 100px; } .circleb{ width:50px; height:50px; background:yellow; box-shadow: inset 0px 0px 10px 4px orange; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; z-index:2; position:absolute; top: 125px; left: 125px; } .circlec{ width:15px; height:15px; background:yellow; box-shadow: inset 0px 0px 2px 0.5px orange; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; z-index:2; position:absolute; top: 75px; left: 75px; } #flowerc{ width:15px; height:15px; background:lavender; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; } .flowerc1{ position:absolute; top: 71px; left: 68px; } .flowerc2{ position:absolute; top: 83px; left: 79px; } .flowerc3{ :absolute; top: 76px; left: 84px; } .flowerc4{ position:absolute; top: 80px; left: 68px; } .flowerc5{ position:absolute; top: 68px; left: 78px; } .circled{ width:15px; height:15px; background:yellow; box-shadow: inset 0px 0px 2px 0.5px orange; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; z-index:2; position:absolute; top: 225px; left: 45px; } #flowerd{ width:15px; height:15px; background:white; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; } .flowerd1{ position:absolute; top: 221px; left: 38px; } .flowerd2{ position:absolute; top: 233px; left: 49px; } .flowerd3{ position:absolute; top: 226px; left: 54px; } .flowerd4{ position:absolute; top: 230px; left: 38px; } .flowerd5{ position:absolute; top: 218px; left: 48px; } .circlef{ width:15px; height:15px; background:yellow; box-shadow: inset 0px 0px 2px 0.5px orange; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; z-index:2; position:absolute; top: 200px; left: 945px; } #flowerf{ width:15px; height:15px; background:lightblue; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; } .flowerf1{ position:absolute; top: 196px; left: 938px; } .flowerf2{ position:absolute; top: 208px; left: 949px; } .flowerf3{ position:absolute; top: 201px; left: 954px; } .flowerf4{ position:absolute; top: 205px; left: 938px; } .flowerf5{ position:absolute; top: 193px; left: 948px; } .circleg{ width:15px; height:15px; background:yellow; box-shadow: inset 0px 0px 2px 0.5px orange; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; z-index:2; position:absolute; top: 550px; left: 25px; } #flowerg{ width:15px; height:15px; background:pink; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; } .flowerg1{ position:absolute; top: 546px; left: 18px; } .flowerg2{ position:absolute; top: 558px; left: 29px; } .flowerg3{ position:absolute; top: 551px; left: 34px; } .flowerg4{ position:absolute; top: 555px; left: 18px; } .flowerg5{ position:absolute; top: 543px; left: 28px; } .circleh{ width:15px; height:15px; background:yellow; box-shadow: inset 0px 0px 2px 0.5px orange; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; z-index:2; position:absolute; top: 30px; left: 15px; } #flowerh{ width:15px; height:15px; background:PeachPuff ; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; } .flowerh1{ position:absolute; top: 26px; left: 8px; } .flowerh2{ position:absolute; top: 38px; left: 19px; } .flowerh3{ position:absolute; top: 31px; left: 24px; } .flowerh4{ position:absolute; top: 35px; left: 8px; } .flowerh5{ position:absolute; top: 23px; left: 18px; } .circlej{ width:30px; height:30px; background:yellow; box-shadow: inset 0px 0px 10px 0.5px orange, 0px 0px 20px 5px SandyBrown ; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; z-index:2; position:absolute; top: 45px; left:200px; } .flowerj{ width:30px; height:100px; background-color: LightGoldenrodYellow; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; z-index:1; position:absolute; top:10px; left:200px; -webkit-transform:rotate(10deg); -moz-transform:rotate(10deg); rotation:10deg; } .flowerj2{ width:30px; height:100px; background-color: LightGoldenrodYellow; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; z-index:0; position:absolute; top:10px; left:200px; -webkit-transform:rotate(55deg); -moz-transform:rotate(55deg); rotation:55deg; } .flowerj3{ width:30px; height:100px; background-color: LightGoldenrodYellow; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; z-index:-1; position:absolute; top:10px; left:200px; -webkit-transform:rotate(100deg); -moz-transform:rotate(100deg); rotation:100deg; } .flowerj4{ width:30px; height:100px; background-color: LightGoldenrodYellow; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; z-index:-2; position:absolute; top:10px; left:200px; -webkit-transform:rotate(145deg); -moz-transform:rotate(145deg); rotation:145deg; } .circlek{ width:30px; height:30px; background:yellow; box-shadow: inset 0px 0px 10px 0.5px orange, 0px 0px 20px 5px Orchid; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; z-index:2; position:absolute; top: 65px; left:795px; } .flowerk{ width:20px; height:100px; background-color: Thistle; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; z-index:1; position:absolute; top:30px; left:800px; -webkit-transform:rotate(20deg); -moz-transform:rotate(20deg); rotation:20deg; } .flowerk2{ width:20px; height:100px; background-color: Thistle; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; z-index:0; position:absolute; top:30px; left:800px; -webkit-transform:rotate(65deg); -moz-transform:rotate(65deg); rotation:65deg; } .flowerk3{ width:20px; height:100px; background-color: Thistle; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; z-index:-1; position:absolute; top:30px; left:800px; -webkit-transform:rotate(110deg); -moz-transform:rotate(110deg); rotation:110deg; } .flowerk4{ width:20px; height:100px; background-color: Thistle; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; z-index:-2; position:absolute; top:30px; left:800px; -webkit-transform:rotate(155deg); -moz-transform:rotate(155deg); rotation:155deg; } .circlel{ width:15px; height:15px; background:yellow; box-shadow: inset 0px 0px 2px 0.5px orange; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; z-index:2; position:absolute; top: 175px; left: 575px; } #flowerl{ width:15px; height:15px; background:Thistle; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; } .flowerl1{ position:absolute; top: 171px; left: 568px; } .flowerl2{ position:absolute; top: 183px; left: 579px; } .flowerl3{ position:absolute; top: 176px; left: 584px; } .flowerl4{ position:absolute; top: 180px; left: 568px; } .flowerl5{ position:absolute; top: 168px; left: 578px; } .circlem{ width:15px; height:15px; background:yellow; box-shadow: inset 0px 0px 2px 0.5px orange; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; z-index:2; position:absolute; top: 325px; left: 945px; } #flowerm{ width:15px; height:15px; background:Khaki; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; } .flowerm1{ position:absolute; top: 321px; left: 938px; } .flowerm2{ position:absolute; top: 333px; left: 949px; } .flowerm3{ position:absolute; top: 326px; left: 954px; } .flowerm4{ position:absolute; top: 330px; left: 938px; } .flowerm5{ position:absolute; top: 318px; left: 948px; } .h1box{ position:absolute; top: 200px; left: 200px; background-color:white; padding: 20px; -moz-border-radius:20%; -webkit-border-radius:20%; border-radius:20%; border: 10px ridge gold; box-shadow: 5px 5px 15px black; } .circlen{ width:15px; height:15px; background:yellow; box-shadow: inset 0px 0px 2px 0.5px orange; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; z-index:2; position:absolute; top: 385px; left: 985px; } #flowern{ width:15px; height:15px; background:PaleVioletRed; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; } .flowern1{ position:absolute; top: 381px; left: 978px; } .flowern2{ position:absolute; top: 393px; left: 989px; } .flowern3{ position:absolute; top: 386px; left: 994px; } .flowern4{ position:absolute; top: 390px; left: 978px; } .flowern5{ position:absolute; top: 378px; left: 988px; } .circleo{ width:40px; height:40px; background:yellow; box-shadow: inset 0px 0px 10px 0.5px orange, 0px 0px 20px 5px Darkred; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; z-index:2; position:absolute; top: 340px; left:820px; } .flowero1{ width:40px; height:100px; background-color: LightCoral; -moz-border-radius:35%; -webkit-border-radius:35%; border-radius:35%; z-index:1; position:absolute; top:310px; left:820px; -webkit-transform:rotate(20deg); -moz-transform:rotate(20deg); rotation:20deg; } .flowero2{ width:40px; height:100px; background-color: LightCoral; -moz-border-radius:35%; -webkit-border-radius:35%; border-radius:35%; z-index:0; position:absolute; top:310px; left:820px; -webkit-transform:rotate(65deg); -moz-transform:rotate(65deg); rotation:65deg; } .flowero3{ width:40px; height:100px; background-color: LightCoral; -moz-border-radius:35%; -webkit-border-radius:35%; border-radius:35%; z-index:-1; position:absolute; top:310px; left:820px; -webkit-transform:rotate(110deg); -moz-transform:rotate(110deg); rotation:110deg; } .flowero4{ width:40px; height:100px; background-color: LightCoral; -moz-border-radius:35%; -webkit-border-radius:35%; border-radius:35%; z-index:-2; position:absolute; top:310px; left:820px; -webkit-transform:rotate(155deg); -moz-transform:rotate(155deg); rotation:155deg; } .circlep{ width:40px; height:40px; background:yellow; box-shadow: inset 0px 0px 10px 0.5px orange, 0px 0px 15px 1px RoyalBlue; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; z-index:2; position:absolute; top: 490px; left:115px; } .flowerp1{ width:30px; height:100px; background-color: LightSteelBlue; -moz-border-radius:40%; -webkit-border-radius:40%; border-radius:40%; z-index:1; position:absolute; top:460px; left:120px; -webkit-transform:rotate(20deg); -moz-transform:rotate(20deg); rotation:20deg; } .flowerp2{ width:30px; height:100px; background-color: LightSteelBlue; -moz-border-radius:40%; -webkit-border-radius:40%; border-radius:40%; z-index:0; position:absolute; top:460px; left:120px; -webkit-transform:rotate(65deg); -moz-transform:rotate(65deg); rotation:65deg; } .flowerp3{ width:30px; height:100px; background-color: LightSteelBlue; -moz-border-radius:40%; -webkit-border-radius:40%; border-radius:40%; z-index:-1; position:absolute; top:460px; left:120px; -webkit-transform:rotate(110deg); -moz-transform:rotate(110deg); rotation:110deg; } .flowerp4{ width:30px; height:100px; background-color: LightSteelBlue; -moz-border-radius:40%; -webkit-border-radius:40%; border-radius:40%; z-index:-2; position:absolute; top:460px; left:120px; -webkit-transform:rotate(155deg); -moz-transform:rotate(155deg); rotation:155deg; } .circleq{ width:30px; height:30px; background:yellow; box-shadow: inset 0px 0px 10px 0.5px orange, 0px 0px 20px 5px SandyBrown ; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; z-index:2; position:absolute; top: 535px; left:920px; } .flowerq{ width:30px; height:100px; background-color: MistyRose; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; z-index:1; position:absolute; top:500px; left:920px; -webkit-transform:rotate(10deg); -moz-transform:rotate(10deg); rotation:10deg; } .flowerq2{ width:30px; height:100px; background-color: MistyRose; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; z-index:0; position:absolute; top:500px; left:920px; -webkit-transform:rotate(55deg); -moz-transform:rotate(55deg); rotation:55deg; } .flowerq3{ width:30px; height:100px; background-color: MistyRose; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; z-index:-1; position:absolute; top:500px; left:920px; -webkit-transform:rotate(100deg); -moz-transform:rotate(100deg); rotation:100deg; } .flowerq4{ width:30px; height:100px; background-color: MistyRose; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; z-index:-2; position:absolute; top:500px; left:920px; -webkit-transform:rotate(145deg); -moz-transform:rotate(145deg); rotation:145deg; } </style> </head> <body> <div class="circlea"></div> <div class="flowera"></div> <div class="flowera2"></div> <div class="flowera3"></div> <div class="flowera4"></div> <div class="flowerb"></div> <div class="flowerb2"></div> <div class="circleb"></div> <div class="circlec"></div> <div class="flowerc1" id="flowerc"></div> <div class="flowerc2" id="flowerc"></div> <div class="flowerc3" id="flowerc"></div> <div class="flowerc4" id="flowerc"></div> <div class="flowerc5" id="flowerc"></div> <div class="circled"></div> <div class="flowerd1" id="flowerd"></div> <div class="flowerd2" id="flowerd"></div> <div class="flowerd3" id="flowerd"></div> <div class="flowerd4" id="flowerd"></div> <div class="flowerd5" id="flowerd"></div> <div class="circlef"></div> <div class="flowerf1" id="flowerf"></div> <div class="flowerf2" id="flowerf"></div> <div class="flowerf3" id="flowerf"></div> <div class="flowerf4" id="flowerf"></div> <div class="flowerf5" id="flowerf"></div> <div class="circleg"></div> <div class="flowerg1" id="flowerg"></div> <div class="flowerg2" id="flowerg"></div> <div class="flowerg3" id="flowerg"></div> <div class="flowerg4" id="flowerg"></div> <div class="flowerg5" id="flowerg"></div> <div class="circleh"></div> <div class="flowerh1" id="flowerh"></div> <div class="flowerh2" id="flowerh"></div> <div class="flowerh3" id="flowerh"></div> <div class="flowerh4" id="flowerh"></div> <div class="flowerh5" id="flowerh"></div> <div class="circlej"></div> <div class="flowerj"></div> <div class="flowerj2"></div> <div class="flowerj3"></div> <div class="flowerj4"></div> <div class="circlek"></div> <div class="flowerk"></div> <div class="flowerk2"></div> <div class="flowerk3"></div> <div class="flowerk4"></div> <div class="circlel"></div> <div class="flowerl1" id="flowerl"></div> <div class="flowerl2" id="flowerl"></div> <div class="flowerl3" id="flowerl"></div> <div class="flowerl4" id="flowerl"></div> <div class="flowerl5" id="flowerl"></div> <div class="circlem"></div> <div class="flowerm1" id="flowerm"></div> <div class="flowerm2" id="flowerm"></div> <div class="flowerm3" id="flowerm"></div> <div class="flowerm4" id="flowerm"></div> <div class="flowerm5" id="flowerm"></div> <div class="circlen"></div> <div class="flowern1" id="flowern"></div> <div class="flowern2" id="flowern"></div> <div class="flowern3" id="flowern"></div> <div class="flowern4" id="flowern"></div> <div class="flowern5" id="flowern"></div> <div class="circleo"></div> <div class="flowero1" id="flowero"></div> <div class="flowero2" id="flowero"></div> <div class="flowero3" id="flowero"></div> <div class="flowero4" id="flowero"></div> <div class="circlep"></div> <div class="flowerp1" id="flowero"></div> <div class="flowerp2" id="flowero"></div> <div class="flowerp3" id="flowero"></div> <div class="flowerp4" id="flowero"></div> <div class="circleq"></div> <div class="flowerq"></div> <div class="flowerq2"></div> <div class="flowerq3"></div> <div class="flowerq4"></div> <div><h1 class="h1box"><font color="gold">Flowers</font></div> </div> </body> </html>

This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
Download this code in plain text format here