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+.

css-starburst-design

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.

view demo

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:

image used for starburst

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 and top: 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.

auto-adjustable-dynamic-starburst-design-css3-html5

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

CSS tricks and hacks – Latest top ten useful tips

CSS can be complex, and as each new browser version is released, you may well find yourself struggling to keep up with the latest tips and hacks. But those tips and hacks will save your sanity! Here, I’ve put together the ten tips that I find most helpful, to save you the hassle of scrounging around the Web for solutions when time is tight.

1. BLOCK VS. INLINE LEVEL ELEMENTS

Nearly all HTML elements are either block or inline elements. The characteristics of block elements include:

  • Always begin on a new line
  • Height, line-height and top and bottom margins can be manipulated
  • Width defaults to 100% of their containing element, unless a width is specified

Examples of block elements include <div><p><h1><form><ul> and <li>. The characteristics of inline elements, on the other hand, are the opposite of block elements:

  • Begin on the same line
  • Height, line-height and top and bottom margins can’t be changed
  • Width is as long as the text/image and can’t be manipulated

Examples of inline elements include <span><a><label><input><img><strong> and <em>.

To change an element’s status, you can use display: inline or display: block. But what’s the point of changing an element from being block to inline, or vice-versa? Well, at first it may seem like you might hardly ever use this trick, but in actual fact, this is a very powerful technique, which you can use whenever you want to:

  • Have an inline element start on a new line
  • Have a block element start on the same line
  • Control the width of an inline element (particularly useful for navigation links)
  • Manipulate the height of an inline element
  • Set a background colour as wide as the text for block elements, without having to specify a width
2. ANOTHER BOX MODEL HACK ALTERNATIVE

The box model hack  is used to fix a rendering problem in pre-IE 6 browsers on PC, whereby the border and padding are included in, rather than added onto, the width of an element. A number of CSS-based solutions have been put forward to remedy this; here’s another one that I really like:

padding: 2em;
border: 1em solid green;
width: 20em;
width/**/:/**/ 14em;

The first width command is read by all browsers; the second by all browsers except IE5.x on PC. Because the second command comes second, it takes precedence over the first: any command that comes second will always override a preceding command. So, how does all this work?

By placing empty comment tags (/**/) before the colons, we instruct IE5.0 to ignore the command. Likewise, if we place empty comment tags after the colon, IE5.5 will ignore the command. Using these two rules in conjunction with each other, we can hide the command from all of IE5.x browsers.

3. MINIMUM WIDTH FOR A PAGE

A very handy CSS command that exists is the min-width command, whereby you can specify a minimum width for any element. This can be particularly useful for specifying a minimum width for a page.

Unfortunately, IE doesn’t understand this command, so we’ll need to come up with a new way of making this functionality work in this browser. First, we’ll insert a <div> under the <body> tag, as we can’t assign a minimum width to the <body>:

<body>
<div class="container">

Next, we create our CSS commands, to create a minimum width of 600px:

#container   {
min-width: 600px;
width:expression(document.body.clientWidth < 600? "600px": "auto" );
}

The first command is the regular minimum width command; the second is a short JavaScript command that only IE understands. Do note, though, that this command will cause your CSS document to become invalid; you may prefer to insert it into the head of each HTML document to get around this.

You might also want to combine this minimum width with a maximum width:

#container {
min-width: 600px;
max-width: 1200px;
width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? "1200px" : "auto");
}
4. IE AND WIDTH AND HEIGHT ISSUES

IE has a rather strange way of doing things. It doesn’t understand the min-width and min-height commands, but instead interprets width and height as min-width and min-height — go figure!

This can cause problems, because we may need boxes to be resizable should we need to fit more text into them, or should the user resize the text. If we use only the width and height commands on a box, non-IE browsers won’t allow the box to resize. If we only use the min-width and min-height commands, though, we can’t control the width or height in IE!

This can be especially problematic when using background images. If you’re using a background image that’s 80px wide and 35px high, you’ll want to make sure that the default size for a box using this image is exactly 80 x 35px. However, if users resize the text, the box size will need to expand gracefully.

To resolve this problem, you can use the following code for a box with class="box":

.box {
width: 80px;
height: 35px;
}

html>body .box {
width: auto;
height: auto;
min-width: 80px;
min-height: 35px;
}

All browsers will read through the first CSS rule, but IE will ignore the second rule because it makes use of the child selector command . Non-IE browsers will read through the second one, which will override the values from the first rule, because this CSS rule is more specific, and CSS rules that are more specific always override those that are less specific.

5. TEXT-TRANSFORM COMMAND

One of the lesser known, but really useful CSS commands is the text-transform command. Three of the more common values for this rule are:  text-transform: uppercasetext-transform: lowercase and text-transform: capitalize.  The first rule turns all characters into capital letters, the second turns them all into small letters, and the third makes the first letter of each word a capital letter.

This command is incredibly useful to help ensure consistency in style across an entire Website,  particularly if it has a number of content editors. Say for example your style guide dictates that words in headings must always begin with capital letters.  To ensure that this is always the case, use text-transform: capitalize. Even if site editors forget about the capitalisation, their mistake won’t show up on the Website.

It’s also preferable to use text-transform:  uppercase to capitalise words, as screen readers may pronounce shorter words in capital letters as acronyms. A great example of this is ‘CONTACT US’, which is pronounced as ‘contact U S’ by some screen readers.

6. DISAPPEARING TEXT OR IMAGES IN IE?

IE exhibits a very strange bug whereby text or background images sometimes disappear from sight. These items are still actually present and, if you highlight everything on screen or hit refresh, they’ll often re-appear. Kind of strange, huh?

This problem mostly occurs on background images and on text positioned next to a floated element. To remedy the problem,  simply insert position: relative into the CSS command for the disappearing element, and for some bizarre reason, that’ll usually fix the problem. If this doesn’t work (and sometimes, it doesn’t), assign a width to the offending element in the CSS — that should fix the problem.

7. INVISIBLE TEXT

Sometimes, you may actually want to make text invisible. Invisible text can be especially useful for screen reader users, perhaps to assign a label to a form item, or insert a heading ahead of a section. Don’t want to change the visual appearance by inserting these elements? Make them invisible, and no one using a visual browser will know they’re there.

You may also want to make text invisible if using a print or handheld CSS file, as some information may not need to be displayed on either of these mediums (see below for more on this).

To make text invisible, you can use display: none — easy! This works fine for hiding text from handhelds (if  CSS is supported) and printed Web pages, but isn’t so great for many screen readers.  Screen readers are now becoming too clever for their own good, and some will actually ignore any text that has the rule display: none assigned to it.

Therefore, for screen readers users, a new approach is needed: position: absolute; left: -9000px.  This basically takes the text and positions it 9000px to the left of the left edge of the screen, essentially making it invisible.

8. CSS DOCUMENT FOR HANDHELDS

A separate CSS document can be created for PDAs and mobile phones, and activated only when one of these devices is being used to access your site. More and more Websites are creating separate CSS documents for printing , so Web pages automatically become print-friendly when users choose to print them. You can do the same for handheld devices.

The following command is used to call up the CSS document for handheld:

<link type="text/css" rel="stylesheet" href="handheldstyle.css" media="handheld" />

CSS commands in the handheld CSS file override any equivalent commands in the main CSS document.  So, what commands should you place in this file?
Ideally, you want users of handheld devices to avoid having to scroll horizontally.

To test this, open up your Website in a regular browser window and resize it to 150px in width. Then, open up your main CSS file and insert some new commands at the very bottom of the document. The commands you place here should adjust the layout of the Website so that it doesn’t require horizontal scrolling at a width of 150px. Then, open up a new document, cut and paste these new commands over, and save it as handheldstyle.css (or whatever name you want to give it).

Your Websites offering to users of handheld devices should be quite different to its offering to traditional Web browsers, as the user experience is quite different on a handheld device. For further information, a book such as Handheld Usability , by S.W. Weiss, is a great read.

9. 3-D PUSH BUTTON EFFECT

Back in the early days of the Web, 3-d buttons that appeared to become pushed in when moused over were all the rage. At that time, this could only be achieved through images and JavaScript, but now, with the advent of CSS, we can go retro and re-create this 3-d effect.

The main CSS commands you’ll need are:

a {
display: block;
border: 1px solid;
border-color: #aaa #000 #000 #aaa;
width: 8em;
background: #fc0;
}

a:hover {
position: relative;
top: 1px;
left: 1px;
border-color: #000 #aaa #aaa #000;
}

Aside from these commands, you can insert other commands to achieve the desired presentation effect — the only limit is your imagination!

10. SAME NAVIGATION CODE ON EVERY PAGE

Most Websites highlight the navigation item relating to each user’s location within the Website, to help users orientate themselves. This is a fundamental requirement for basic usability, but it can be a pain: we need to tweak the HTML code behind the navigation for each and every page. Can we have the best of both worlds? Is it possible to have the navigation highlighted on every page, without having to tweak the HTML code on every page? Of course it is!

First of all, you’ll need to assign a class to each navigation item:

<ul>
<li><a href="#" class="home">Home</a></li>
<li><a href="#" class="about">About us</a></li>
<li><a href="#" class="contact">Contact us</a></li>
</ul>

You’ll then need to insert an id into the <body> tag. The id should be representative of where users are located in the site, and should change when users move to a different site section. When on the ‘Home’ page, it should read <body id="home">, in ‘About Us’, it should read <body id="about">, and in ‘Contact Us’, <body id="contact">.

Next, you create a new CSS rule:

#home .home, #about .about, #about .about, #contact .contact {
commands for highlighted navigation go here
}

This basically creates a rule that only takes effect when class="home" is contained within id="home", and when class="about" is in id="about" and class="contact" is in id="contact". These situations will only occur when the user is in the appropriate section of the site,  seamlessly creating our highlighted navigation item.

Posted by: Dhiraj kumar

Google Font API and Typekit solutions VS CCS3 @font-face

A quick tutorial here about setting up your website with custom fonts using @font-face.  I am also sharing these alternative solutions, pros and cons.

The aim of this post is to briefly round up your options when using custom fonts in web design.

google-and-typekit-versus-font-face

CSS3 @font-face

The @font-face was first proposed for CSS2 and has been implemented in Internet Explorer since version 5.  However, their implementation relied on the proprietary Embedded Open Type (.eot) format, and no other browsers decided to use this format until Safari 3.1 was released.

Since then, web designers began to use .ttf or .otf fonts for their websites and now this CSS property is well-known.

css3-font-face

CSS

@font-face {
        font-family: '3DumbRegular';
        src: url('3Dumb-webfont.eot');
        src: local('?'), url('3Dumb-webfont.woff') format('woff'), url('3Dumb-webfont.ttf') format('truetype'), url('3Dumb-webfont.svg#webfont57ztNrX6') format('svg');
}

h1 {
  font-family: '3DumbRegular', Arial, sans-serif
}

Pros

  • A lot of available fonts you can choose from. Check this detailed list.
  • It works for all browsers.
  • It has no JavaScript dependency.

Cons

  • It takes slightly longer to implement than Google Font API (more code).
  • Quality of font rendering may differ browser to browser.
  • Your CSS may not be validated, depending on your DOCTYPE.

Google Font API

To use the fonts of Google’s font library, just go to http://code.google.com/webfonts and select a font. If you choose “Cantarell” font for example, include the following code into your files.

google-font-api

HTML

<link href="http://fonts.googleapis.com/css?family=Cantarell&subset=latin" rel="stylesheet" type="text/css">

CSS

h1 {
  font-family: 'Cantarell', arial, serif; /*Add also some font replacements, just in case...*/
}

Pros

  • Free solution from Google.
  • Quick set up.
  • No JavaScript dependency.
  • No need to think about font licensing.

Cons

  • Small number of fonts to choose from. (just for now, I hope)
  • Quality of font rendering may differ browser to browser.
  • No support for iPhone or iPad. Support added from iOS 4.2+ (iPhone, iPad, iPod).

Typekit

Typekit is a service launched by Small Batch, Inc. which, via JavaScript and a subscription service, allows webmasters and designers to embed non-standard, non-system-specific fonts into online documents. It uses the @font-face CSS property and is available to the public as a paid service.

typekit

HTML

<head>
        <script type="text/javascript" src="http://use.typekit.com/typekitid.js"></script>
        <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
</head>

CSS

h1 {
        font-family: "museo-sans-1", "museo-sans-2", sans-serif;
}

Pros

  • Huge fonts library.
  • Good support articles and help section.
  • iPad, iPhone/iPod Touch support (experimental)
  • Control the behavior of your page as web fonts load (thanks @smcbride)

Cons

  • Typekit is a paid service but it also has a free version.
  • JavaScript dependency, and one extra HTTP request for you.

Other web fonts solutions

Conclusion(s)

Now that you found out all the pros and cons, it’s up to you to choose the method that best suits your needs.

Let me know in the comments the solution you like most!

Posted by: Dhiraj kumar

10 CSS shorthand tips and how to optimize CSS

cssIf you want to write efficient and optimized CSS code then you’ll surely need to have in mind the following shorthand tips.

These tips and tricks apparently don’t seem to be so important at the first sight. But once you write thousands of CSS lines you will wish to optimize every single line.

Why’s that? Because loading speed does matter (Google introduced this to their ranking algorithms) and your web pages will load faster because your stylesheet file size will be smaller.

Below I will present you a short, yet comprehensive CSS shorthand guide to help you get started optimizing your CSS file. So let’s have a look at some examples and see exactly how we can optimize a CSS file.

1. Background properties in one line

Defining a background property could be made in an easier way than we often happen to see.

Why using:

 background: url(example.gif);
 background-color: #eaeaea ;
 background-repeat: repeat-x;
 background-position: top left;

… when you could easier write:

background: #eaeaea url(example.gif) repeat-x top left;

2. Border property

When all of the border widths are the same, instead using:

border-color: red;
border-width: 1px;
border-style: solid;

… you can simply write this:

border: 1px solid red;

3. List properties

The following list properties:

list-style-position: outside;
list-style-image: none;
list-style-type: disc;

… could be simplified into:

list-style: disc outside;
/* shorthand notation for list properties */
/* list-style: [list-style-type] [list-style-position] [list-style-image];*/

4. Font and line-height properties

Font and line-height properties like the ones below:

font-family: Arial, Helvetica;
font-weight: bold;
font-style: italic;
font-size: 1em;
line-height: 1.5em;

… can be easily transformed into:

font: bold italic 1em/1.5em Arial, Helvetica;

Much simpler huh? 🙂

5. Margin and padding properties

This example applies for margin and also for padding, so next we’ll use as example the CSS margin property.

/* top=10px, right=5px, bottom=15px, left=20px */
margin: 10px 5px 15px 20px;

/* top=10px, right=5px, bottom=10px, left=5px*/
margin: 10px 5px;

/* top=10px, right=5px, bottom=15px, left=5px*/
margin: 10px 5px 15px;

Now let’s see what else we can do to write optimized CSS:

6. Always remember that “0″ anything equals to “0″

Use the “0″ value instead 0px or 0em so instead the the following CSS properties

margin: 0px;
padding: 0em;

you could use:

margin: 0;
padding: 0;

7. Use shortcuts for hexadecimal colors

White color equal to “#ffffff” or just “#fff”, #aabbcc can be wrote like #abc and so on.

8. Simplify non integer CSS values

Instead writing 0.5em you can use .5em, 0.5px is equal to .5px

9. The last property semicolon it’s not required?

div{
margin: 0;
padding: 0 /* note that you can skip the last rule semicolon, and yes it passes W3C validation */
}

10. Floated elements inherits “display:block” declaration

When floating an element there’s no need to add also “display: block” declaration as we often see. This is helpful for avoiding redundancy and save us one line of CSS.

These are some CSS shorthand tips I often use and they are very helpful for me, when coding CSS. I hope they will also help you writing shorter, better CSS code.

Over to you

What do you think about the tips I presented above and what else do you use for optimizing the CSS file?

Posted by: Dhiraj kumar