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:
<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.
That’s really nice Chris. Good work.
Cool idea. I like it Chris!
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 ;-)
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”…
Nice, this is exactly why I subscribe… great ideas
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.
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.
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!
@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:
I think the fade functions like to remember the previous opacity level and fade back to that, which was the problem.
Breaks when u hover the link to fast..
@Chris: Thanks for the reply. I’m new to jQuery and I would probably have faced that problem sooner or later.
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.
Good stuff Chris. pretty slick. Keep it up.
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.
I prefer .animate() for more control. the possibilities of it are endless!
$(this).animate({ opacity: 0 },300);
ninja vanish!
Very cool man i think this will work perfect on a project I am working on right now.
Thanks again
~ Aaron I
Thanks Chris! Very good tut!
Yay, thank you. I used this (w/o hover animation) on my temp homepage at http://www.urbanbricks.com. Slick!
The demo does not work :( would be nice to see a preview :) thanks
At step one, don’t you mean to say “Otherwise, just add them at the end just BEFORE the closing body tag”, as illustrated?
simple and a neat idea :)
Hi,
did you try with ie 6 ?????On my that doesn’t work
sorry !!!!!!!! no comment
Nice post
Regards..
Thanks Chris. Your tutes are the best!
I say thank you for it chris, but is out of order for me (FF3, IE7) the demo file. :S
wonderful work, already trying it on my local
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 ;)
Im havinf SWFObject confilcs, the shadows are not showing… thanks in ad…
Posted on 27-01-08
http://www.forosdelweb.com/f53/crear-barras-laterales-negro-551927/
Link to:
http://www.airwindandfire.com/testcss/
The same, but more complex
Just a note for those reading today: try animating a
box-shadow
from0px 0px 0px transparent inset
to0px 0px 30px #444444
instead ;)