In this post

Great CSS tips for making your site pop, spark and sizzle electric. Easy examples of CSS3 code you can copy, paste and go.

CSS Tips You Can Copy, Tweak and Paste BAM!

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.

css tips

  1. 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.

  2. 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.

  3. 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.

  4. 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.

  5. 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.

  6. 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.

  7. 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.

  8. 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.

  9. Triangle Formatted Bread Crumb Trail

    This is a really nicely formatted bread crumb trail. Easily tweak the colors and well as shapes through CSS.

  10. 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

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
Tags:, , ,

One Response

 

 

 

 

 

(I'll never share your email address and I'll never spam you.)