"Glow" around DIV?

HTML & CSS
1

Hi all, I’m new here. This forum looks very active! Cool.

Anyway my problem is I am trying to create a “glow” that appears as a shadow around all sides of my DIV. I would prefer not to use images to create this as I’m new to DIVs and creating 8 of them around the one I already have would be really difficult for me.

I am looking for a live “glow” element because it needs to be expandable, as one of the DIVs will shrink and grow depending on content.

I’ve been scouring the internet for this and can’t find any recent answers.

Thanks so much for any answers.

2

Cross browser simple solution with no images and no extra markup? Not gonna happen, does not exist, don’t even waste your time TRYING.

Best solution is the extra div and an image - BUT, you don’t need 8 div or 8 separate images to do it, you can do it with ONE image and 6 div, the deepest ‘nesting’ being two deep.


<div class="borderTop"><div></div></div>
<div class="borderFirstSide"><div class="borderSecondSide">
	Content goes here
<!-- .borderFirstSide, .borderSecondSide --></div></div>
<div class="borderBottom"><div></div></div>

The top div pairing is a sliding-doors effect for the top, sliding doors with repeat-y for the ‘sides’, and a third sliding doors pairing at the bottom.

I call the technique “Eight Corners Under One Roof”, and made a page a while back explaining one approach to doing it. The same technique can be used for rounded corners, or any other all-around the content effect you can think of.

http://battletech.hopto.org/html_tutorials/eightcorners/template.html

I have a page showing it applied to existing div by class using javascript:
http://battletech.hopto.org/html_tutorials/borderimages_javascripted/template.html

That shows it being used for glow/shadow, drop-shadow, and rounded corners.

This page:
http://battletech.hopto.org/html_tutorials/eightcorners/corners2/template.html

Shows another approach to building the image in action. Fast loading, single image file well under 1k, etc, etc…

The directory is unlocked so you can look at any files you want directly:
http://battletech.hopto.org/html_tutorials/eightcorners/

It’s really the best way I’ve found to go about it. Doesn’t fit what you were asking for - but there is no simple easy silver bullet for that effect that you can actually trust.

3

Thanks so much for your responses!

As I feared, I guess this won’t be easy. I tried something very very similar to that and for some reason it just created a strange grey box around my DIV, it pushed everything else around and, surprise, no shadow, no blur. I tried changing the colours around, no visual indication of any shadow or blur.

I guess what I want to know is, can I do this without rebuilding the website? I’m not a code master and the project is time-sensitive.

You can look at the site I am working on here:
http://sadesigns.net/oohlala

Here’s the code:
(sorry if it’s not very clean, like I said, not a code master)

<div style="background-color: transparent" id="wrapper">

  <div style="background-color: transparent" id="header">
    <table width="100&#37;" height="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="20%" height="15"></td>
        <td width="53%"></td>
        <td width="27%"></td>
      </tr>
      <tr>
        <td><img src="oohlala.png" width="179" height="59" /><h1>Restaurants</h1></td>
        <td> <img src="icons.png" width="291" height="94" /></td>
        <td><img src="connect.png" width="150" height="19" /></td>
      </tr>
    </table>
  </div>
  
  <div class="blur" width="515px">
<div class="shadow" width="515px">
  <div id="main" style=" background-color: #ccc; -moz-border-radius: 10px; -webkit-border-radius: 10px; padding: 10px;" >
  
  
  
  <table width="95%" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td width="25%"></td>
      <td width="58%">
        <a class="button" href="#"><span>Home</span></a>
        <a class="button" href="#"><span>About Us</span></a>
        <a class="button" href="#"><span>Contact</span></a></td>
      <td width="17%"></td>
      </tr>
  </table>
  <table width="465px" border="0" cellspacing="5px" cellpadding="0" align="center">
    <tr>
    <td width="50%" height="31"><h2>Toronto</h2></td>
    <td width="50%"><h2>Montreal</h2></td>
  </tr>
  <tr>
    <td height="508" colspan="2" align="left" valign="top" background="VendorList_BG.jpg" style=" background-color:#1e1e1e ; -moz-border-radius: 10px; -webkit-border-radius: 10px; padding: 10px;">    
    <div id="local">
    
    <div id="vendor">
    <div id="logo"><img src="logo.jpg" width="50" height="50" />
    </div>
    <table width="75%" border="0" align="right" cellpadding="0" cellspacing="0">
  <tr>
    <td height="19" colspan="2" valign="top"><h1>Vendor Name</h1></td>
  </tr>
  <tr>
    <td width="57%" height="24" align="right"></td>
    <td width="43%" align="right" valign="top"><a class="vote" href="#"><span>VOTE</span></a></td>
  </tr>
</table>
    </div>
    <br /><br /> 
    
    </div></td>
    </tr>
  <tr>
    <td height="34" colspan="2"><h1>Not on the list? Feel free to suggest a vendor below! </h1></td>
    </tr>
  <tr>
    <td height="64" colspan="2"></td>
  </tr>
  </table>
</p>
  </div>
  </div>
  </div>
  
<div style=" background-color: #ccc; -moz-border-radius: 10px; -webkit-border-radius: 10px; padding: 10px;" id="sidebar">
  <p></p>
</div>
<div style="background-color: transparent" id="footer">Content for  id "footer" Goes Here</div>
</div>
</div>
4

Here is a demo of one http://www.positioniseverything.net/articles/sidepages/dropshadow2/glowtest1.html

5

Alright, I tried my hand at this and failed miserably, so I’ve passed this part of the project to another person working on it. Should be fine now, his expertise far exceeds my own. Thank you both for your input! :slight_smile:

6

Here is prob the easiest you’ll find. Just create the glow image http://www.visibilityinherit.com/code/four-sided-plug-n-play-shadow.php