With the tides of internet coding changing, CSS3, HTML5 and jQuery are drastically changing the view of the web. With the ability to produce CSS3 animations, flash integration is becoming less popular as speed and compatibility are what everyone is looking for.

As an ongoing project for this blog, I’ve been learning some of these new techniques and coding tricks. Below is a code snippet for one of the new CSS3 transition upgrades. What this code will do is cause a soft glow to transition in and out when a link is hovered. This code can be adapted in your .css file to apply to other items as well like DIVs or li items. If you noticed on this blog it’s been integrated into the container boxes for my blog content.

For supporting browsers, you should see a slow fade in & out when hovered, if you do not see it then you should try to upgrade your browser… and if you’re still using IE, you should just slap yourself. Silly IE, the internet is for next gen browsers. Good luck with IE9.

a {
	-webkit-transition: -webkit-box-shadow 1s ease-in;
	-moz-transition: -moz-box-shadow 1s ease-in;
	-o-transition: -o-box-shadow 1s ease-in;
	padding:20px 40px;
	position:relative;
}

a:hover {
	-webkit-box-shadow:0 0 10px #444444; 
	-moz-box-shadow: 0 0 10px #444444; 
	-o-box-shadow: 0 0 10px #444444;

There are tons of great resources on the web for learning these new standards and techniques. A couple I used for inspiration for this post and tip are:

• Graceful Degradation With CSS3
• Five Useful CSS/jQuery Coding Techniques For More Dynamic Websites
• css3.info
• Google Search for the term “CSS3″. You really can’t fail with google. (take note all you yahoo, or god forbid, AOL, users)

If you’ve got any tips you’d like to share, please leave a comment. Now have some fun coding, and if you REALLY want to see just how powerful these new CSS3/HTML5 features are then just check out the Spiderman Animation made entirely in CSS3.