Fade Image Into Another (within a Sprite)

Creating an image rollover is pretty easy with CSS. Give the element a background-image, then on it's :hover, change the background-image. It's best practice to combine both images into one and shift the background-position rather than use two separate images, that's the idea of CSS sprites. But what if you want to fade one image into another, not just have an abrupt shift?


The solution there is to create an additional element on top of the original with zero opacity and the background-position already shifted into place. Then on the :hover, fade in the opacity. Here are three ways to do that, using a little arrow graphic.



Read More : http://css-tricks.com/fade-image-within-sprite/

Checkerboard, striped & other background patterns with CSS3 gradients

You’re probably familiar with CSS3 gradients by now, including the closer to the standard Mozilla syntax and the ugly verbose Webkit one. I assume you know how to add multiple color stops, make your gradients angled or create radial gradients. What you might not be aware of, is that CSS3 gradients can be used to create many kinds of commonly needed patterns, including checkered patterns, stripes and more

Article Source: http://leaverou.me/2010/12/checkered-stripes-other-background-patterns-with-css3-gradients/

The Power of CSS’s Automatic Numbering

CSS is great for styling your website, but did you know it can do math? Of course it can! When you define an ordered list who do you think keeps track of the numbers? It’s built into CSS!

<ol>
<li>Opening Scene</li>
<li>Boy Meets Girl</li>
<li>Boy Looses Girl</li>
<li>Boy Fights Opponents
<ol>
<li>The Wrestler</li>
<li>The Engineer</li>
<li>Captain Doom</li>
</ol>
</li>
<li>Everybody Lives Happily Ever After</li>
</ol

Article Source: http://kitmacallister.com/2011/02/11/css-automatic-numbering/

The Shapes of CSS

Rendering shapes with CSS

Try with the below css properties to get the OVEL shape

CSS Code

<style type="text/css">

#ovalShape {
width:200px;
height:100px;
background:#0f0;
-moz-border-radius:100px / 50px;
-webkit-border-radious:100xp / 50px;
border-radius:100px / 50px
}
</style>


HTML Code

<div id="ovalShape" ></div>