Body Border 2: Fade In with Gradient

A while back I showed you how to create a Body Border with CSS. Basically, we used four fixed position DIV's to ensure all edges of the screen got a border and that the border would sit on top of all other content.

Let's take that same idea and expand on it.

Instead of a solid color, we'll use an alpha-transparent black gradient.

Instead of it being always-on, we'll have it fade in on a particular rollover.

Step 1: Apply DIV's to HTML

There are empty (and hence rather unsemantic) DIV's. If you are comfortable with this effect ONLY working with JavaScript enabled, you should consider adding them to the page via a jQuery .append(); function to the body element. Otherwise, just add them at the end just below the closing body tag:

Note that each of them has a class name so that we can target them as a group, and each has a unique ID so that we can target them individually.

Step 2: Position and Style with CSS

By default, we'll have ours "turned off" and only turn them on later via a rollover. So, we'll have all of them set to display: none;, yet we will apply the background images and get them in the proper position.

The images are just very simple alpha-transparent PNG's saved out from Photoshop, and rotated to each direction.

Step 3: Build the Fade-In with jQuery

Simple stuff here. We have a button with a class of "home". That element gets a hover event bound to it. When that is triggered, all the "edge" DIV's stop their current animation and fade in. On the callback event (essentially a mouseOut), the "edge" DIV's stop their current animation and fade out.

Note:

If you want this to work in IE 6, you are going to have to jump through a lot of hoops since IE 6 notoriously doesn't like fixed positioning or alpha-transparent PNG's. My advice? Use a conditional comment to only include your jQuery code for non-IE 6 browsers.

Even though you are able to see through the gradient, it is still "covering up" what is below it, so any links underneath will be effectively "dead". Definitely do some testing and make sure you are causing any confusing usability problems covering up links. I added this effect (albeit in reverse) to my personal site so you can check it out on a real site there.

Nice. I could also see using this effect reversed.
Go from a solid interior color to the color of the surrounding DIV. Almost like a dropshadow.
You would just need to build the gradient image backwards.
Great stuff.

This is so sexy, Chris! And the fade effect gives it that little special awesomeness. But there should be no clickable stuff under the gradient images. On your personal website it’s kind of hard to hit the home nav button now ;-)

This comment thread is closed. If you have important information to share, you can always contact me.

Treehouse is where you go to learn HTML, CSS, and how to build iOS apps. It's a complete education in modern web and app technology, designed to get you ready for a hot new job or to kickstart your own business.

The Lodge is a member login only area with access to video training on how to build websites from scratch using the best modern tools.

What now? I have some ideas for you.

Go explore CodePen!

As a front end designer and developer, you should have an account on CodePen so you can save your snippets, present your ideas, and engage with other front end folk. I'd encourage you to go PRO as well, to unlock the full power of CodePen.

Get the newsletter!

You should sign up for the CSS-Tricks newsletter. It's a clean copy of all the blog posts each week, combined together, right to your inbox. If email isn't your thing, there is an RSS feed, iTunes, and lots of other ways to subscribe.

Listen to ShopTalk!

Subscribe to The Lodge!

The Lodge is a members-only, ad-free video learning area here on CSS-Tricks. Just like the free screencasts, but organized into four large complete series. Membership is also the #1 best way to support CSS-Tricks.

We can do the real footer now.

Site Links

Colophon

CSS-Tricks* is created, written by, and maintained by Chris Coyier. It is built on WordPress, hosted by Media Temple, and the assets are served by MaxCDN. The fonts are Source Sans and Source Code Pro. It is made possible by viewers like you who subscribe to The Lodge and through advertising for products and services I like.