Skip to content

Instantly share code, notes, and snippets.

@girliemac
Forked from anonymous/dabblet.css
Created March 25, 2012 01:44
Show Gist options
  • Save girliemac/2190662 to your computer and use it in GitHub Desktop.
Save girliemac/2190662 to your computer and use it in GitHub Desktop.
CSS3 No-image Chupa-Chupsy candy
/**
* 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;
}
<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>
{"view":"split-vertical","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment