ryndel/readme.md

## readme.md

      
    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

  
## 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;
}

## 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>
	, :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;
	}
	<!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>