How to Give Outer Glow to an Object in a Transparent Png Using CSS3

Outer glow to surround image?

You mean like this?

I've changed the horizontal and vertical offset (the first two -10px in your box-shadow properties).

#container {    background-color:black;    height:100px;    width:100px;    padding:30px;}img {    border-radius:50%;    width:100px;    box-shadow: 0px 0px 10px 10px rgba(255,255,255,1);}

<div id='container'>  <img src='http://icons.iconarchive.com/icons/graphicloads/100-flat/256/home-icon.png' /></div>

CSS: create white glow around image

Use simple CSS3 (not supported in IE<9)

img
{
    box-shadow: 0px 0px 5px #fff;
}

This will put a white glow around every image in your document, use more specific selectors to choose which images you'd like the glow around. You can change the color of course :)

If you're worried about the users that don't have the latest versions of their browsers, use this:

img
{
-moz-box-shadow: 0 0 5px #fff;
-webkit-box-shadow: 0 0 5px #fff;
box-shadow: 0px 0px 5px #fff;
}

For IE you can use a glow filter (not sure which browsers support it)

img
{
    filter:progid:DXImageTransform.Microsoft.Glow(Color=white,Strength=5);
}

Play with the settings to see what suits you :)

How to use hover effect on images with no background edge-to-edge?

You should be using drop-shadow instead of box-shadow.
CSS filter has lot more options, you can dim the image or make it brighter too.

filter: drop-shadow(16px 16px 20px red);

For the image to have a background too along with shadow, I suggest you to add background to the parent on hover. Because if you apply background on the image then the drop-shadow will be covered by it. So apply bg to parent.

Don't load another image on hover only for this effect. Depending on user's bandwidth, the user will have to wait for the second image to load as he hovers and it won't look so good, whereas with CSS transitions you can make the above mentioned fixes looks slick.

HTML5 canvas create outer glow effect of shape

Are the circles image files? If so, create image files with glow applied to them within photoshop, GIMP, etc. Save them as .PNG to preserve the transparency of the background.

If they are drawn on the screen with canvas drawing functions, then how about redrawing the circle 25 times, each circle getting one pixel thicker in width?

CSS - How to add a glow effect around a fluid box?

There are a few techniques for this (outside of CSS3).

If the width is fixed, one way is to use two DIVS. One has the top and the sides. You need to make and image that is very tall, with the sides repeating and the bottom cut off and use it as a background on the outer DIV. Then make an image that contains the bottom, and nest it inside, and absolutely-position it to the bottom.

<div class="wrapper">
   ... content ...
   <div class="bottom"></div>
</div>

.wrapper {
    width:500px;
    background-image:url(....);
    position:relative;
}

.bottom {
   position:absolute;
   bottom:0px;
   height:20px;
   width:500px;
   background-image:url(....);
}

If it is x/y scaleable you can use the 9-slice method:

_|_|_
_|_|_
 | |

You slice your background into 9 pieces, where the middle piece is blank and contains your content. You make four corners and use repeat-x / repeat-y for the background of the sides.

CSS-Image border glow when hover with individual color

If I understand your question then here is an example DEMO

img{
    width: 48px;
    cursor: pointer;
    /*padding: 10px;*/
   /* border:1px solid #fff;*/
  margin-right: 20px;
}

img:hover{
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
 -webkit-box-shadow: 0px 0px 30px 0px rgba(0, 255, 0, 0.67);
-moz-box-shadow:    0px 0px 30px 0px rgba(0, 255, 0, 0.67);
box-shadow:         0px 0px 30px 0px rgba(0, 255, 0, 0.67);
}
img:last-of-type:hover{
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
 -webkit-box-shadow: 0px 0px 30px 0px rgba(232, 0, 0, 0.67);
-moz-box-shadow:    0px 0px 30px 0px rgba(232, 0, 0, 0.67);
box-shadow:         0px 0px 30px 0px rgba(232, 0, 0, 0.67);
}