Valhalla Codes - Pure CSS3 Flowers

Home
Codes
HTML/CSS
Pure CSS3 Flowers
(4)
Created by CPUkiller on 18.01.14 03:06
Pure CSS flowers. No Javascript or Images used.
Check it out here: Demo Link
<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>
Last updated by ynori7 on 18.05.14 13:58
This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
Download this code in plain text format here