CSS3 No-image Chupa-Chupsy candy

dabblet.css

/**
* CSS3 No-image Chupa-Chupsy candy 
* by @girlie_mac 
*
* Please, do not compare this with the real one. I feel pretty terrible making the awesome design by Salvador Dalí into some crap.
* But my point of this demo is that you can create the floral shape with CSS, using border-radius:50% and pseudo-element(s)
*/

background: #f06;
background: linear-gradient(45deg, #888, 444);


.chupa-chups {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    position: absolute;
}
.chupa-chups.orange {
    background: orange;
    background: -webkit-linear-gradient(325deg, gold 20%, orangered);
    background: -o-linear-gradient(325deg, gold 20%, orangered);
    background: -moz-linear-gradient(325deg, gold 20%, orangered);
}
.chupa-chups p {
    z-index: 1;
    position: absolute;
    top: 26px; left: 10px;
    color: #ce1141;
    font-family: Pacifico, cursive;
    font-size: 68px;
    line-height: 70px;
    text-align: center;
}
.floral-shape,  
.floral-shape::before, 
.floral-shape::after {
    width: 200px;       
    height: 200px;
    border-radius: 25%;
    border: 6px solid #ce1141;
    background: yellow;
    background: -webkit-linear-gradient(325deg, yellow 30%, orange);
    background: -o-linear-gradient(325deg, yellow 30%, orange);
    background: -moz-linear-gradient(325deg, yellow 30%, orange);
}
.floral-shape {
    position: relative;
    top: 45px;
    left: 45px;
}
.floral-shape::before {
    content: "";
    position: absolute;
    top: -3px; left: -3px; /* adjust for the border-width */
    background: -webkit-linear-gradient(370deg, yellow 30%, orange);
    background: -o-linear-gradient(370deg, yellow 30%, orange);
    background: -moz-linear-gradient(370deg, yellow 30%, orange);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.floral-shape::after {
    content: "";
    position: absolute;
    border: 0 none;
    box-shadow: none;
}
​

dabblet.html

<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>

<!-- Chupa-Chupsy Candy -->
<div class="chupa-chups orange">
    <div class="floral-shape">
        <p>Chupa<br/>Chups</p>
    </div>
</div>

settings.json

{"view":"split-vertical","seethrough":"","prefixfree":"","page":"css"}