Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Adding a glow to 3 sides using CSS

Adding a glow to 3 sides using CSS

Problem

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;
Problem courtesy of: Phil

Solution

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/

Solution courtesy of: sandeep

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Adding a glow to 3 sides using CSS

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×