Creating CSS Starbursts Design with CSS3 Transform
Working with the new CSS3 rotation property I got that I could 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.
About these CSS3 Starbursts:
A good thing is if you create your starbursts with CSS3 you can do so much more than with images. You can experiment with different numbers of points/corners, rounded borders, resize, text-shadows and animations also.
To see the animations you will need to use latest browsers like IE 9+, Firefox 4.0+, Safari 4.1+ and Chrome 3.0+.
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.
The HTML
<div class="price-container">
<div class="price">
<span class="label">Buy</span>
<span class="number">$99.95</span>
<span class="label">Now</span>
</div>
</div>
I have <div>
that, you guessed it, contains the price starburst. I’ll use this for the background of the starburst. The <div>
is the container for the text inside (the price info.) That’s it for the markup. From here, I’ll be styling pseudo classes to create the multiple points. Also, I mentioned earlier that there were a few less points in the CSS version of this starburst. This markup doesn’t really have anything unnecessary in it.
The CSS
Now on to the fun part. Let me overview what I’m going to do, then I’ll show you the styles needed to achieve it. I’m going to style .price-container
, .price
, and the :before
and:after
pseudo elements for each. Essentially, I’ve got six elements to work with. I created this background image to apply to each of the elements and I will rotate 15 degrees each:
The CSS is a little bit longer. I’ve used the rotation rules in the CSS, one is for Firefox (prefixed with -moz-), one is for webkit i.e. Safari and Chrome (prefixed with -webkit-), one is for Internet Explorer (prefixed with -ms-), one is for Opera (prefixed with -o-), and the other is the standard rotation rule as it will be used once this rotation property becomes standard:
.price-container,
.price-container:before,
.price-container:after,
.price-container .price,
.price-container .price:before,
.price-container .price:after {
height: 8.5em;
width: 8.5em;
background: #760B1F url(price-bg.png) top left no-repeat;
background-size: 8.5em;
}
.price-container:before,
.price-container:after,
.price-container .price:before,
.price-container .price:after {
content: "";
position: absolute;
}
.price-container {
margin: 100px auto; /* Centering for demo */
position: relative; /* Context */
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);
}
.price-container:before {
top: 0;
left: 0;
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
transform: rotate(-30deg);
}
.price-container:after {
top: 0;
left: 0;
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
-ms-transform: rotate(-15deg);
-o-transform: rotate(-15deg);
transform: rotate(-15deg);
}
.price-container .price {
padding: .5em 0em;
height: 7.5em; /* height minus padding */
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; /* important so the text shows up */
}
.price-container .price:before {
top: 0;
left: 0;
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
transform: rotate(60deg);
}
.price-container .price:after {
top: 0;
left: 0;
-webkit-transform: rotate(75deg);
-moz-transform: rotate(75deg);
-ms-transform: rotate(75deg);
-o-transform: rotate(75deg);
transform: rotate(75deg);
}
A few things I’ll point out about the styles:
- Notice the order of the rotation angles: This order is important because there is going to be text inside the inner-most element. Therefore, the last element (the one the text going in, in this case
.price
) has to be straight. Notice that.price-container
is rotated -45 degrees and.price
is rotated 45 degrees – back to 0. - The height and width: The height and width has to be set since we are dealing with background images here. I’ve set it in ems to adjust appropriately when the text size increases.
- There’s a padding top and bottom on
.price-container .price
. That’s why the height is a little different than all the others. - Everything is positioned absolutely inside the first container.
.price-container
hasleft: 2.5em
andtop: 2.5em
just to move the whole thing a little. When everything is rotated, the corners go of the page and out of the container a little. - z-index: There’s a
z-index
defined for.price-container .price
. This is so the price information inside this div is visible.
Now all that’s left is styling the text.
.price-container .price span {
position: relative;
z-index: 100;
display: block;
text-align: center;
color: #FE0;
font: 1.8em/1.4em 'georgia',Sans-Serif;
text-transform: uppercase;
}
.price-container .price span.number {
font-weight: bold;
font-size: 2.5em;
line-height: .9em;
color: #fff;
}
Some more CSS used in hover effect:
.price-container.one:hover {
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
-o-transform: rotate(-20deg);
transform: rotate(-20deg);
}
Doing It Image-Free
Now, I have some extra stuff in here because the design called for this very subtle inner border. If you don’t like or need the inner border, just remove the bit about background image and background size and design will hold up fine.
Browser Support
This works as-is in IE 9+, Firefox 4.0+, Safari 4.1+ and Chrome 3.0+. IE 8 and below do not support background-size, and Chrome 1.0, Firefox 3.6 and Safari 3.0 will require some vendor prefixes. IE8 does support pseudo elements, however doesn’t support transform
.
The fallback would be a colored square. Very likely not a huge problem.
There You Have It
It’s a price star thing. Flexible enough to grow when you increase your font size. Made with some CSS. You can use this for highlighting prices, discounts etc.
That’s it!
I hope you enjoyed this article and if you have questions, comments, or suggestions, let me know! Thanks for reading.
Posted by: Dhiraj kumar
You can support this website by sharing. Thank you!http://www.css-jquery-design.com/2012/08/creating-css-starbursts-design-css3-transform/CSS - Cascading Style SheetsHTMLMobile Web TechnologyPhotoshopTutorialsadvance web technology,angle brackets,animation delay,animation direction,block level elements,blogging,browser incompatibility,configurable settings,core code,cross browser compatibility,CSS,CSS 3,CSS 4,CSS code,css document,css file,CSS framework,css hacks,css image,css namespaces,CSS properties,css property,css rules,css selector,CSS shorthand guide,CSS technique,css transform,CSS trick,css3,CSS3 animation,css3 box shadow,CSS3 keyframe animation,CSS3 transitons,div class,doctype html,free open source,gaming,graphical user interface,grid,grid system,html and xhtml,html basics,interactive web applications,iPad,iPhone,manipulating CSS,optimized CSS,paragraph text,software,style,technology,text shadows,tips and tricks,transparent background image,visual transitionWorking with the new CSS3 rotation property I got that I could 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. About these CSS3 Starbursts: A...DhirajDhiraj Kumarmr.dhirajkumar@gmail.comAdministratorA Warm Welcome & Thanks for Visiting my Website!Dhiraj kumar is an Information Technology graduate who loves learning new things. A very popular and colorful individual, he has a particular passion for people, blogs, and the use of technology for social progress. He spends the whole day sitting in front of the computer, making himself updated with the new updates in technologies going on around him. He has more than 15 years of experience in the field of Website designing and Accessibility. He has a strong hand in Flash animation, 2D and 3D Presentation, UI web softwares in Flash with Action Scripting 2.0 / 3.0, Video Presentations, Flash Presentations, HTML, CSS, JavaScript, jQuery, Photoshop, 3Ds Max, Maya etc. read more..ALSO, TO SAVE BOTH OF US SOME TIME, YOU SHOULD KNOW THAT: Currently, I am not available for any type of freelance projects. Follow @dhiraj_kumarHTML5, CSS3 & jQuery - Web Design / Development

You have wrote
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.
But you have use image as background and rotate on hover This article is fake just to attract user only