CSS3 No-image Chupa-Chupsy candy

dabblet.css

/**
* CSS3 No-image Chupa-Chupsy candy 
* by @girlie_mac 
* http://girliemac.com/blog/2012/03/24/making-chupa-chups-using-css3-pseudo-elements/
*
* 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)
*/
html {
    background: #444;
    background: linear-gradient(135deg, #555, #222);
    min-height: 100%;
    margin: 0;
    padding: 2em;
}
p {
    margin: 0;    
    padding: 0;
}
body > div {
    margin: 30px
}
.chupa-chups {
    width: 300px;
    height: 300px;
    border-radius: 50%;
}
.chupa-chups.orange {
    background: orange;
    background: linear-gradient(325deg, gold 20%, orangered);
}
.chupa-chups.green {
    background: green;
    background: linear-gradient(325deg, YellowGreen 20%, darkgreen);
}
.chupa-chups.pink {
    background: HotPink;
    background: linear-gradient(325deg, HotPink 20%, FireBrick);
}
.chupa-chups.blue {
    background: MediumBlue;
    background: linear-gradient(325deg, RoyalBlue 20%, MediumBlue);
}
.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;
    text-shadow: 1px 2px 0 #fff;
}
.floral-shape,  
.floral-shape::before, 
.floral-shape::after {
    width: 200px;       
    height: 200px;
    border-radius: 25%;
    border: 6px solid #ce1141;
    background: yellow;
    background: linear-gradient(325deg, yellow 30%, orange);
}
.floral-shape {
    position: relative;
    top: 42px;
    left: 42px;
}
.floral-shape::before {
    content: "";
    position: absolute;
    top: -3px; left: -3px; /* adjust for the border-width */
    background: linear-gradient(370deg, yellow 30%, orange);
    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>
<div class="chupa-chups orange">
    <div class="floral-shape">
        <p>Chupa<br/>Chups</p>
    </div>
</div>
</div>


<div>
<div class="chupa-chups green">
    <div class="floral-shape">
        <p>Chupa<br/>Chups</p>
    </div>
</div>
</div>


<div>
<div class="chupa-chups pink">
    <div class="floral-shape">
        <p>Chupa<br/>Chups</p>
    </div>
</div>
</div>


<div>
<div class="chupa-chups blue">
    <div class="floral-shape">
        <p>Chupa<br/>Chups</p>
    </div>
</div>
</div>

settings.json

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