CSS3 Starbursts

by Matthew James Taylor on 15 May 2010

CSS Starbursts with CSS3 transforms and transitions

I was recently experimenting with the new CSS3 rotation property and it occurred to me that I could use this to create image-free starbursts. All I needed was a series of nested block-level elements each rotated by a slightly different amount. The rotation would distribute the box corners around the circumference of the star.

To start with I created a 16 pointed star by using three nested span elements inside a link. Here is what the it looks like:

CSS Starburst

The above starburst will only work in browsers that support the CSS3 rotation property, currently that's Safari, Firefox, and Google Chrome. All other browsers will gracefully degrade to a simple yellow box. I've added a Safari screenshot to the right so you can see what it looks like in a modern browser (just in case you're not using one right now).

Here is the HTML code. Notice that there is only one link and three span tags:

<a href="#" class="starburst">
   <span><span><span>
      <br />NEW<br />CSS3<br />Starbursts!
   </span></span></span>
</a>

The CSS is a little bit longer. I've highlighted the rotation rules in the CSS, one is for Firefox (prefixed with -moz-), one is for webkit (prefixed with -webkit-), and the other is the standard rotation rule as it will be used once this rotation property becomes standard:

.starburst {
	display:block;
	width:6em;
	height:6em;
	background:#fe0;
	-webkit-transform:rotate(-45deg);
	-moz-transform:rotate(-45deg);
	rotation:-45deg;
	position:relative;
	top:2em;
	left:2em;
	text-align:center;
	text-decoration:none;
	color:#000;
	font-weight:bold;
	font-family:Arial, sans-serif;
}
.starburst span {
	display:block;
	width:6em;
	height:6em;
	background:#fe0;
	-webkit-transform:rotate(22.5deg);
	-moz-transform:rotate(22.5deg);
	rotation:22.5deg;
}

Animated CSS3 starbursts

If you create your starbursts with CSS3 you can do so much more than with images. Below are a few more demos where I've experimented with different numbers of points, rounded borders, text-shadows, animations with transitions and transforms, and also translations. To see the animations you will need to use Safari or Google Chrome.

About these CSS3 Starbursts:

  • No CSS Hacks
    There are no CSS hacks required for these CSS3 starbursts. CSS is designed to be backwards compatible so any browser that cannot understand CSS3 will simply ignore these new rules without any error.
  • iPhone, iPod Touch, & iPad Compatible
    The Safari browser is one of the most advanced when it comes to CSS3 because it uses the powerful Webkit rendering engine. This means all these animated starbursts will work fine on the iPhone, iPod Touch and the iPad.
  • SEO Friendly
    Because the text in each starburst is actually real text it will be crawled and indexed by Google like everything else. It also means that people who are vision impaired can more easily read and understand your web page if they are using a screen reader.
  • No Images Required
    All of the shapes, colours and shadows in the starbursts above are created using CSS3 rules. No images are used at all.
  • No JavaScript Required
    The animations in these demos are made possible with the CSS3 transition rules. No JavaScript is used to create any effects.
  • Resizable Text Compatible
    All the dimensions of the starbursts are set in em measurements. This means that you can increase the text size in your browser and the starburst will grow in size along with all other text. This is great news for web accessibility.

Try out the CSS3 rotation property for yourself and see what you can come up with. I'm personally very excited by CSS3 because there are so many useful new properties, rotation is only one of them!


Download the demo files (starburst.zip - 4kb)


Follow me on Twitter @mattjamestaylor

Enjoy this article?

If you find my website useful, feel free to donate any amount you wish. It will help pay for my hosting! =)

Matthew James Taylor