5 Really Awesome CSS3 Tricks
“WordPress Website Builder” takes you through 5 very cool CSS3 tricks that you’ve probably never even heard of! You can find coding examples for each trick on their website.
The HSLA Colors feature allows you to tweak your Web page colors to the max by manipulating the HSLA values individually. HSLA stands for hue, saturation, light, and alpha. This feature works in Firefox 3+, Opera 10.1+, Chrome 2+, Safari 3.1+ and IE9.
Box Rotation is a 2D transform feature that lets you play with your DIVs; you’ll be able to scale, skew, and rotate them all via CSS. This feature works in Google Chrome, Safari, Firefox 3.5+, IE9, and Opera 10.5.
Transitions is an awesome feature that lets you add special affects to your page elements. This is something that at one time was only possible via Flash and JavaScript. This feature works in Google Chrome, Safari, Firefox 4, and Opera 10.5.
Text Select Color lets you change the highlight color of text whenever it is selected/highlighted on your website. This feature works in Google Chrome 2+, Safari 3.1+, Firefox 3.5+, Opera 9.5+, and IE9.
Reflections does just that: it lets you add reflections to your page elements such as images. Unfortunately, for now this feature only works in Chrome and Safari.
Animated Buttons
You may think that buttons can only be animated via JavaScript, but did you know that you can now also animate them with CSS3? Well, you can and it’s pretty simple too!
The blog “PremiumCoding” takes you through the steps of designing a button with rounded borders and shadows, and then adding the CSS code required to animate the button with mouse hover effects. This means that when you move your mouse over the button, you’ll immediately see the animation effects.
All of the required coding along with live demos can be found on their website. While the examples are simple effects, with some extensive CSS knowledge you can design some really advanced and creative animated buttons.