May 06

5 Cool CSS Hover Effects You Can Copy and Paste

Need a cool hover effect for something on your site? Look no further! We’ve created several custom examples that you can view live for inspiration.

If you like the effect, steal it! We’ve got the CSS ready and waiting for you to copy.

Bring Your Boring Site to Life

Hover effects can make your site feel much more dynamic and alive. It used to be the case that JavaScript was required to do anything really interesting with a hover effect but these days CSS3 is capable of doing a ton of really cool stuff if you’re creating enough.

The effects we’ll be using today all use code that is supported by modern browsers, meaning of course Mozilla and Webkit for the most part. IE support is spotty at best across various versions so be sure to test thoroughly in your own implementation. Fancy hover effects are one of those things that you can usually degrade fairly gracefully so that older browsers still see some change.

Bump Up

Mar 14

A New Way to Trigger hasLayout on Elements in Older Versions of IE?

I’ll be the first to admit that I haven’t given this too much thought, so I admit there could be some drawbacks I haven’t considered, but I thought I’d throw the idea out there and see what my readers think.

Suppose we have an element that, for design and flexibility purposes, has no set width, and no set height. But obviously it has content, so in most browsers it expands to hold its content. We want that element to have a linear gradient background using CSS3, and we add a Microsoft proprietary filter to cover all versions of IE.

Here’s the element, demoed live on the page, with the aforementioned characteristics:

I can haz layout. I can haz layout. I can haz layout. I can haz layout. I can haz layout. I can haz layout. I can haz layout. I can haz layout. I can haz layout. I can haz layout. I can haz layout. I can haz layout. I can haz layout. I can haz layout. I can haz layout. I can haz layout. I can haz layout. I can haz layout. I can haz layout. I can haz layout. I can haz layout. I can haz layout. I can haz layout. I can haz layout. I can haz layout. I can haz layout.

In every browser except IE6 and IE7, the above box should appear just fine with its gradient background. In IE6 and IE7, it looks like this: Continue reading