Adding a glow to 3 sides using CSS

Question

I have a box which overlaps another to form a sort of L shape, I am trying to achieve a glow around the whole of the L shape which therefore requires a glow on only 3 sides of one of these boxes.

I've tried using the box-shadow property but can't seem to get it to only work for 3 of the sides, is this the correct method to use or is there another method using borders I could use to achieve a glow on the 3 sides?

Here is the code I've been trying to use

-moz-box-shadow: 0 -1px 5px #80abc6;
-webkit-box-shadow: 0 -1px 5px #80abc6;
box-shadow: 0 -1px 5px #80abc6;

Bryant

Answer 1

You can do it with css :after property. Like this:

div{
    width:100px;
    height:30px;
    -moz-box-shadow: 0 -1px 15px #80abc6;
    -webkit-box-shadow: 0 -1px 15px #80abc6;
    box-shadow: 0 -1px 15px #80abc6;
    margin:30px;
    position:relative;
}
div:after{
    content:'';
    width:10px;
    height:100%;
    background:#fff;
    position:absolute;
    top:0;
    left:-10px;
}

Check this http://jsfiddle.net/QBQJn/1/

Dresser

Answer 2

You could use the clip property:

div {
    width: 100px;
    height: 30px;
    margin: 30px;
    clip: rect(-15px,115px,45px,0);
    position: absolute;

    -moz-box-shadow: 0 -1px 15px #80abc6;
    -webkit-box-shadow: 0 -1px 15px #80abc6;
    box-shadow: 0 -1px 15px #80abc6;
}

Demo: http://jsfiddle.net/QBQJn/

Ontogeny

This does require the element to be absolutely positioned though – Nonmoral

@YiJiang yes, but he didn't say that it couldn't be absolute. It most likely is so anyway. :) – Ontogeny

Answer 3

Here's one way to do it: http://jsfiddle.net/thirtydot/Wec5h/

HTML:

<div id="l">
    <div id="v"></div><div id="h"></div>
</div>

CSS:

#l {
    padding: 20px;
    border: 1px solid red;
    float: left;
}
#v, #h {
    -moz-box-shadow: 0 0 5px #80abc6;
    -webkit-box-shadow: 0 0 5px #80abc6;
    box-shadow: 0 0 5px #80abc6;
    display: inline-block;
    vertical-align: bottom;
    position: relative;
}
#v {
    width: 48px;
    height: 192px;
}
#h {
    width: 96px;
    height: 48px;
}
#v:after {
    content: '';
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    bottom: 38px;
    left: 0;
    height: 20px;
    background: #fff;
}
#h:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -10px;
    width: 20px;
    background: #fff;
}

Fund