In this post

While doing research for my last post I came across so many handy & creative CSS tips that I had to create a new post. The code in this article has some great examples of navigation, animated button states, transforms, debugging tools and more.

Animated CSS Hover States

39 examples of intriguing animated CSS hover state properties. From the website “One property, two values, endless possibilities”. I couldn’t put this any better.

Test Your Browser’s Ability to Render CSS3

This is a great tool for testing how compatible different browsers are with CSS. This is an extremely handy way to test whether or not the CSS you’re planning to use will be rendered properly.

CSS3 Click Chart

CSS Tips for Transforms

If you’re looking for 2 & 3D CSS3 animations, linear and radial gradients, test properties and the like this CSS3 transforms link is what you need. There are a some great online tools that can be found here to help you generate slick transitions and animations for use with your projects.

CSS Lint

CSS Lint is a tool to help point out problems with your CSS code. This tool is good for tracking down issues with the code you’ve written. CSS Lint will point output CSS errors, compatibility issues, performance problems, and more.

Custom CSS Borders

Easily create custom CSS borders with the image of your choice. This is a great way to promote page content using CSS.

CSS Tips for Copy writing

Very cool very useful CSS3 approach to styled copy writing. This is a great way to provide copyright info to pictures you wish to display on your website.

Fade Out the Bottom of Your Site

This is a really sharp effect that fades your text out when you reach a certain part of a page using a transparent png and z-index.