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
Super useful copy and paste-able CSS3 code. Very use able common and not so common CSS3 code for use in your designs.
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 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.
Triangle Formatted Bread Crumb Trail
This is a really nicely formatted bread crumb trail. Easily tweak the colors and well as shapes through CSS.
Partial Opacity Text Over Image
This is a cool bit of CSS you can use to cover an image with a transparent color to float text on top of.
CSS Tips you Can Steal
If you’re interested in giving your site a more elegant CSS face-lift all of the above samples can be downloaded for use on your own projects. You’re welcome Internet.
CSS Tips You Can Copy, Tweak and Paste BAM! Click To Tweet