Body Border 2: Fade In with Gradient

Published by Chris Coyier

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.

View Demo Download Files

 

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:

	<div class="edge" id="left"></div>
	<div class="edge" id="right"></div>
	<div class="edge" id="top"></div>
	<div class="edge" id="bottom"></div>
</body>

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.

#top, #bottom, #left, #right {
	display: none;
	}
	#left, #right {
		position: fixed;
		top: 0; bottom: 0;
		width: 88px;
		}
		#left { left: 0;  background: url(images/left.png) left center repeat-y;}
		#right { right: 0; background: url(images/right.png) right center repeat-y;}
		
	#top, #bottom {
		position: fixed;
		left: 0; right: 0;
		height: 88px;
		}
		#top { top: 0px; background: url(images/top.png) top center repeat-x; }
		#bottom { bottom: 0px; background: url(images/bottom.png) bottom center repeat-x; }

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.

<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
	$(function(){
		$(".home").hover(function(){
			$(".edge").stop().fadeIn();
		}, function() {
			$(".edge").stop().fadeOut();
		});
	});
</script>

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.