CSS3 rotation starbursts effect
The 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; }
The article source:http://matthewjamestaylor.com/blog/css3-starbursts
You might also like
Tags
accordion accordion menu animation navigation animation navigation menu carousel checkbox inputs css3 css3 menu css3 navigation date picker dialog drag drop drop down menu drop down navigation menu elastic navigation form form validation gallery glide navigation horizontal navigation menu hover effect image gallery image hover image lightbox image scroller image slideshow multi-level navigation menus rating select dependent select list slide image slider menu stylish form table tabs text effect text scroller tooltips tree menu vertical navigation menu