Grow your CSS skills. Land your dream job.

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.

Comments

  1. Permalink to comment#

    That’s really nice Chris. Good work.

  2. Permalink to comment#

    Cool idea. I like it Chris!

  3. Permalink to comment#

    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.

  4. Permalink to comment#

    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 ;-)

  5. Permalink to comment#

    Nice idea, as alyways ;) but far to big images.

    Reduce your screen to 1024px and click Home or simply try to click a header thats underneath the “shadow”…

  6. Permalink to comment#

    Nice, this is exactly why I subscribe… great ideas

  7. Permalink to comment#

    Very slick, Chris. I think it creates a focal point of sorts. Not sure if it’s something I could benefit from at this time, but certainly I’ll incorporate it into some designs in the future. Thanks.

  8. Really cool effect. First time I see that.

    But when I get my mouse off before the fade in is completed, it bugs the script (the gradient disapear and won’t reappear). At least, in FF3/IE7+Vista and FF3+Ubuntu.

    Also, I just tested it in IE7 + Vista, ouch. The gradient is a solid gray (that becomes black), and then it suddenly shifts for the transparent (real) gradient.

  9. Permalink to comment#

    Pretty useless, but still really cool and innovative! Now for someone to make something really fancy using this script, and I’m sure it’ll dominate the webdesign sphere :) .

    Keep it up!

  10. Permalink to comment#

    @Antoine: to fix that weirdness where the fade doesn’t complete if you mouseout to early, you can use the animate function instead of the fadeIn/Out:

    $("#logo").hover(function(){
            $(".edge").stop().animate({
                opacity: 0.0
            });
        }, function() {
            $(".edge").stop().animate({
                opacity: 1.0
            });
    
        });
    

    I think the fade functions like to remember the previous opacity level and fade back to that, which was the problem.

  11. V1
    Permalink to comment#

    Breaks when u hover the link to fast..

  12. @Chris: Thanks for the reply. I’m new to jQuery and I would probably have faced that problem sooner or later.

  13. Chris, you post great stuff and are changing the way I design and build. Thanks for all the fantastic tips / tutorials / advice. jQuery really is unlocking a whole new world for me.

  14. Ariyo
    Permalink to comment#

    Good stuff Chris. pretty slick. Keep it up.

  15. Very cool Chris.

    However, the one thing I don’t like is that if the shadow area covers a link, it becomes non-functional. It’s visually appealing though.

  16. dain
    Permalink to comment#

    I prefer .animate() for more control. the possibilities of it are endless!

    $(this).animate({ opacity: 0 },300);

    ninja vanish!

  17. Very cool man i think this will work perfect on a project I am working on right now.

    Thanks again

    ~ Aaron I

  18. iPad
    Permalink to comment#

    Thanks Chris! Very good tut!

  19. Permalink to comment#

    Yay, thank you. I used this (w/o hover animation) on my temp homepage at http://www.urbanbricks.com. Slick!

  20. Permalink to comment#

    The demo does not work :( would be nice to see a preview :) thanks

  21. Permalink to comment#

    At step one, don’t you mean to say “Otherwise, just add them at the end just BEFORE the closing body tag”, as illustrated?

  22. Permalink to comment#

    simple and a neat idea :)

  23. Yan
    Permalink to comment#

    Hi,
    did you try with ie 6 ?????On my that doesn’t work

  24. Yan
    Permalink to comment#

    sorry !!!!!!!! no comment

  25. Permalink to comment#

    Nice post
    Regards..

  26. Jackie
    Permalink to comment#

    Thanks Chris. Your tutes are the best!

  27. Gery
    Permalink to comment#

    I say thank you for it chris, but is out of order for me (FF3, IE7) the demo file. :S

  28. Permalink to comment#

    wonderful work, already trying it on my local

  29. RicHB
    Permalink to comment#

    The example is fine! jQuery create many ways to build a rich site.

    But one advice: PNG transparent doesnt work fine with Internet Explorer.

    In IE 7 there´s a bug that the image have a “black form” behind it, and in IE 6, well, every one knows…. hehe

    They are bugs from the browser, and i never seen how to fix this problem with PNG transparent VS opacity. If someone knows how do this, please notify ;)

  30. Permalink to comment#

    Im havinf SWFObject confilcs, the shadows are not showing… thanks in ad…

  31. tudd
    Permalink to comment#

    Just a note for those reading today: try animating a box-shadow from 0px 0px 0px transparent inset to 0px 0px 30px #444444 instead ;)

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

*May or may not contain any actual "CSS" or "Tricks".