Jump to content

Container glow over gradient background


Recommended Posts

What I wanna know is let's say you have a main container for your site and you want a black or white glow around it but you have a gradient background. Usually I would make an image of the glow or the whole width of the site and there you go! In this case the background changes color depending on the height of the page. I checked with the css shadow thingy but I think it's only on 1 side not all around... Any of you have tricks for this?Same for pattern backgrounds. Usually the pattern doesn't align correctly...

Link to post
Share on other sites

Well, you could always use alpha transparent PNG for the glow, but then again, you'll have to hide from IE6 and lower using let's say a conditional comment and/or use some kind of alternative method for IE6.

Link to post
Share on other sites

That's too much trouble... If there is no easy way I guess I'll stick to solid colors background for glows or no glow and gradient or pattern background.

Link to post
Share on other sites

What I suggest is actually to always have a gradient background with an untransparent image, but also put a glow for browsers that support alpha transparent PNGs. Consireding the fact that IE7 now supports Alpha transparency, such methods would get very common really soon.I mean, I recently saw for example a shadow effect over an image with alpha transparent PNG and at the same time, the image is accessable for IE6 only without the shadow, but still looking good.I'm talking about the same thing here, with the only difference that our target is the background. Why don't offer better browser better experience, while still allowing non sufficient browsers the decent experience (which you are planning to use otherwise anyway).

Link to post
Share on other sites

I may try that.... so basically I need to save the glowing part of the image as a PNG and then with JS or server side detect the browser?

Link to post
Share on other sites

Consireding the fact that IE6 and below are our only target, I would suggest a conditional comment instead.

<html><head><style type="text/css" media="screen">@import url("style.css");</style><!--[if lte IE 6]><style type="text/css">@import url("IE6style.css");</style><![endif]--></head><body><div id="wrapper"><!-- All other content --></div></body></html>

Where style.css contains the styling with the background on the html element and the glow is used on the wrapper.IE6style.css on other hand would have

#wrapper {background: none};

in order to hide the glow and it would still show the gradient image.

Link to post
Share on other sites
  • 1 year later...

Hi!You can visit this http://homepage.ntlworld.com/bobosola/index.htm too.To sum up, you use javascript to make or "properly render" PNG alpha transparency.I want to tell you to use the fixed background property of css, but I fear to say a mistake... :) (I don't know if I can write "I fear to say"... :) )

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...