Skip to content

Instantly share code, notes, and snippets.

@ryndel

ryndel/readme.md

Last active September 6, 2022 19:01
Show Gist options
  • Save ryndel/dacdc060b24e59ca9a36 to your computer and use it in GitHub Desktop.
Save ryndel/dacdc060b24e59ca9a36 to your computer and use it in GitHub Desktop.
Download ZIP
CSS only starburst
Raw
readme.md

CSS only starburst

An html element using CSS only styling to create a starburst - for special offers (for example).

Usage

<div class="starburst">
	<div class="text"> <span class="label">Get something</span> <span class="number">FREE</span> <span class="terms">some terms</span> </div>
</div>

The dimensions used in the CSS are all ems, making it easy to change the overall size of the element and the text inside by changing your base font size (on the body tag for example). This makes it easy to change the size of the element for desktop, mobile etc.

Benefits

CSS only

No background images required.

Credits

HTML/CSS by: Lyndel Thomas @ryndel

Based on the starburst example by Chris Coyier

Raw
starburst.css
*, *:before, *:after {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
.starburst,
.starburst:before,
.starburst:after,
.starburst .text,
.starburst .text:before,
.starburst .text:after {
height: 13em;
width: 13em;
background-color: #21aabd;
background-color: #94389f;
background-color: green;
}
.starburst:before,
.starburst:after,
.starburst .text:before,
.starburst .text:after {
content: "";
position: absolute;
}
.starburst {
position: relative;
top: 2.5em;
left: 2.5em;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.starburst:before {
top: 0;
left: 0;
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
transform: rotate(-30deg);
}
.starburst:after {
top: 0;
left: 0;
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
-ms-transform: rotate(-15deg);
-o-transform: rotate(-15deg);
transform: rotate(-15deg);
}
.starburst .text {
padding: 2em 0em;
height: 13em;
position: absolute;
bottom: 0;
right: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
z-index: 1;
}
.starburst .text:before {
top: 0;
left: 0;
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
transform: rotate(60deg);
}
.starburst .text:after {
top: 0;
left: 0;
-webkit-transform: rotate(75deg);
-moz-transform: rotate(75deg);
-ms-transform: rotate(75deg);
-o-transform: rotate(75deg);
transform: rotate(75deg);
}
.starburst .text span {
position: relative;
z-index: 100;
display: block;
text-align: center;
color: #ddd;
font: 1em/1.4em Sans-Serif;
}
.starburst .text span.label {
padding-top: .5em;
font-size: 1.4em;
text-transform: uppercase;
}
.starburst .text span.number {
font-weight: bold;
font-size: 5em;
line-height: 1em;
color: #fff;
text-transform: uppercase;
}
.starburst .text span.terms {
font-size: 1.2em;
}
Raw
starburst.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS only starburst</title>
<link rel="stylesheet" href="starburst.css">
</head>
<body>
<div class="starburst">
<div class="text"> <span class="label">Get something</span> <span class="number">FREE</span> <span class="terms">some terms</span> </div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment