Creating Fancy Checkmark Icons with Pure CSS3

http://webitect.net/design/designtutorials/6-smashingly-practical-css3-effects-you-can-use-right-now/

http://webitect.net/design/webdesign/creating-fancy-bullet-points-with-pure-css3/

The #1 Rule of CSS3 Coding

Before we start on any project, we have to remember the number one rule of CSS3 coding. Well, actually it’s two rules:

• It must be cross-browser acceptable. I’m not talking identical, but a CSS3 technique is not very useful if it destroys the experience for users with older browsers. Use progressive enhancement.
• No worthless markup! I know CSS3 is fun, and it’s not bad to experiment, but if you have to add a whole bunch of non-semantic junk markup just to save yourself from needing to use an image, you’ve defeated the point.

These are the two principles that I regard to be the unchangeable law for using CSS3. So anyways, enough of my rant – I just feel with all the buzz about CSS3 that it’s very important to use it in a mature and responsible way. Let’s move on with the tutorial.

The Concept

Before we can start coding, we have to figure out what approach we’re going to take to create these icons. How is it going to be done?