<div class="panel">
<div class="star-badge">
<h6>New!</h6>
</div>
<div class="jiggle star8"></div>
<div class="jiggle star5"></div>
<div class="jiggle star10"></div>
<div class="jiggle star4"></div>
<div class="jiggle star9"></div>
<div class="jiggle star6"></div>
<div class="jiggle star7"></div>
<div class="jiggle star11"></div>
<div class="jiggle star3"></div>
</div>
@import "compass/css3";
@mixin star($arms, $outerRadius, $innerRadius, $fill: null){
$centerX: $outerRadius;
$centerY: $outerRadius;
$svg-box-width: $outerRadius*2;
$svg-box-height: 0;
$fill: if($fill, 'fill="#{$fill}"', '');
$results: '';
$angle: pi() / $arms;
@for $i from 0 to (2*$arms) {
// Use outer or inner radius depending on what iteration we are in.
$r: if(($i % 2) == 0, $outerRadius, $innerRadius);
$currX: $centerX + sin($i * $angle) * $r;
$currY: $centerY - cos($i * $angle) * $r;
$svg-box-height: if($currY > $svg-box-height, $currY, $svg-box-height);
// Our first time we simply append the coordinates, subsequet times
// we append a ", " to distinguish each coordinate pair.
@if ($i == 0){
$results: $currX,$currY;
} @else {
$results: $results $currX,$currY;
}
}
background-image:
url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg"\ viewBox="0,0 #{$svg-box-width},#{$svg-box-height}">\
<polygon #{$fill} points="#{$results}" />\
</svg>\
');
/* background-size: cover; */
background-position: 50%;
background-repeat: no-repeat;
}
[class^='star'],
[class*=' star'] {
width: 6em;
height: 6em;
float: left;
margin: 0.5em;
}
.star3 { @include star( 3, 5, 1, hsl( 0, 75%, 50%)); }
.star4 { @include star( 4, 5, 2.5, hsl( 40, 75%, 50%)); }
.star5 { @include star( 5, 5, 2, hsl( 80, 75%, 50%)); }
.star6 { @include star( 6, 5, 1.3, hsl(120, 75%, 50%)); }
.star7 { @include star( 7, 5, 1.5, hsl(160, 75%, 50%)); }
.star8 { @include star( 8, 5, 2.2, hsl(200, 75%, 50%)); }
.star9 { @include star( 9, 5, 1.75, hsl(240, 75%, 50%)); }
.star10 { @include star(10, 5, 2.3, hsl(280, 75%, 50%)); }
.star11 { @include star(10, 5, 2, hsl(320, 75%, 50%)); }
.star-badge {
@include star(20, 100, 85, hsl(0, 80%, 40%));
transform: rotate(-10deg);
display: table;
margin: auto;
font-size: 1.5em;
position: absolute;
top: -3em;
left: -3em;
/* Remove for Drop Shadow */
@include filter(drop-shadow(1px 1px 1px hsla(0, 0%, 0%, 0.35)));
/**/
& > * {
display: table-cell;
vertical-align: middle;
text-align: center;
font-weight: bold;
color: #fff;
font-size: 1.5em;
text-transform: uppercase;
}
}
.panel {
width: 21em;
padding: 2em;
font-size: 0.75em;
display: inline-block;
position: relative;
background-color: #eee;
border: 0.5em solid #bbb;
border-radius: 0.5em;
}
body {
background-color: hsl( 40, 75%, 50%);
font-size: 0.8em;
}
.jiggle:hover {
animation: jiggle 0.15s linear infinite alternate;
}
.jiggle:nth-of-type(even){
animation-direction: alternate-reverse;
}
@keyframes jiggle {
from {transform: rotate(-3deg);}
to {transform: rotate(3deg);}
}
// Center using flexbox
:root{height:100%;display:flex}:root>*{margin:auto}
View Compiled
/* Inline XML data URI fix */
/* Some browsers (most browsers) don't render inline XML data URI's unless they are escaped. */
(function() {
if(!window.StyleFix) return;
if(hasxmldatauri()) return;
// Test unescaped XML data uri
function hasxmldatauri() {
var img = new Image();
datauri = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"></svg>';
img.src = datauri;
return (img.width > 0 && img.height > 0);
// (img.complete && img.src == datauri);
}
StyleFix.register(function(css) {
return css.replace(RegExp(/url\(([\'\"])data:image\/svg\+xml,(.*)\1\)/gi), function($0, $1, svg) {
return "url('data:image/svg+xml," + escape(svg) + "')";
});
});
})();
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.