Box Shadow on only 3 sides

Posted by Connor on Stack Overflow See other posts from Stack Overflow or by Connor
Published on 2012-04-07T22:57:58Z Indexed on 2012/04/07 23:30 UTC
Read the original article Hit count: 355

Filed under:

css

|

css3

|

box-shadow

I have two overlapping divs that have css3 box shadows. The trouble is that even when I set the z-index I will still need to eliminate one of the div's box-shadow. I have seen cases where negative spreads and zero values are used but I don't think that would work here.

The code I have now is:

#bulb-top {
    position: relative;
    width: 280px;
    height: 280px;
    background-color: #E5F7A3;
    -webkit-border-radius: 280px;
    -moz-border-radius: 280px;
    border-radius: 280px;
    border: 8px solid #FFF40C;
    top: -430px;
    margin-left: auto;
    margin-right: auto;
    -webkit-box-shadow: 0px 0px 15px 1px #FFF40C;
    -moz-box-shadow: 0px 0px 15px 1px #FFF40C;
    box-shadow: 0px 0px 15px 1px #FFF40C;
    z-index: 4;
}

#bulb-bottom {
    position: relative;
    width: 140px;
    height: 120px;
    background-color: #E5F7A3;
    -moz-border-radius-topleft: 0px;
    -moz-border-radius-topright: 0px;
    -moz-border-radius-bottomright: 30px;
    -moz-border-radius-bottomleft: 30px;
    -webkit-border-radius: 0px 0px 30px 30px;
    border-radius: 0px 0px 30px 30px;
    border-left: 8px solid #FFF40C;
    border-right: 8px solid #FFF40C;
    border-bottom: 8px solid #FFF40C;
    top: -455px;
    margin-left: auto;
    margin-right: auto;
    -webkit-box-shadow: 0px 0px 15px 1px #FFF40C;
    -moz-box-shadow: 0px 0px 15px 1px #FFF40C;
    box-shadow: 0px 0px 15px 1px #FFF40C;
    z-index: 5;
}

http://jsfiddle.net/minitech/g42vq/3/

© Stack Overflow or respective owner

Related posts about css

HTMLUNIT Facebook javascript warning

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi I am trying to create simple application that would be able to search people on facebook using given e-mail. I am already able to log into an account using the HTMLunit tool and even create a page, which should throw result of my search. But when I try to print the result as XML the file is missing… >>> More
$this->headLink() includes duplicated script

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi, Just like I did before, I used the following code for my new project. <?=$this->headLink()->appendStylesheet('/Layouts/admin/css/button.css');?> <?=$this->headLink()->appendStylesheet('/Layouts/admin/css/inputText.css');?> <?=$this->headLink()->appendStylesheet('/Layouts/admin/css/fancyTable… >>> More
How much multiple style sheets slow down to website?

as seen on Stack Overflow - Search for 'Stack Overflow'
Here is 3 css file (one is only for IE) <link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection"> <link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print"> <!--[if lt IE 8]><link rel="stylesheet" href="css/blueprint/ie… >>> More
mod_pagespeed is rewriting but not combining

as seen on Stack Overflow - Search for 'Stack Overflow'
I have the following problem. I installed mod_pagespeed but i am not getting the results i want! It does rewrite my css and changes the to the cache url but its not combining the css files. I have seached the web and stackoverflow for it but did not find a solution. Here are the tags <link… >>> More
CSS import or multiple CSS files

as seen on Stack Overflow - Search for 'Stack Overflow'
I originally wanted to include a .css in my HTML doc that loads multiple other .css files in order to divide up some chunks of code for development purposes. I have created a test page: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional… >>> More

Related posts about css3

A Few of My Favorite HTML5 and CSS3 Online Tools

as seen on ASP.net Weblogs - Search for 'ASP.net Weblogs'
I really enjoy coding up HTML5, CSS3, and JavaScript applications but there are some things that I’m better off writing with the help of a development tool. For example, CSS3 gradients aren’t exactly the most fun thing to write by hand and the same could be said for animations, transforms, or styles… >>> More
CSS3 - Validator - RGBA wrong?

as seen on Stack Overflow - Search for 'Stack Overflow'
I'm using the W3C CSS Validator with the Profile CSS3 but the validator says that my CSS rgba()'s are wrong. I looked up the Color Module Level 3, and the syntax is the same as mine. I also tried the Dev-Validator, same result. Example input: div.class { border: 1px solid rgba(0, 0, 0, 0.5); } Am… >>> More
CSS3 webkit fading in a tooltip.

as seen on Stack Overflow - Search for 'Stack Overflow'
HI, I've just been experimenting with a CSS tooltip that fades in with CSS3's transitions. I've got it working up to a point, but for some reason, when I hover over where it's meant to be, it activates, even though it's positioned left:-999px;. So basically, what am I doing wrong/is what I was… >>> More
Poll: CSS3 color transparency

as seen on Stack Overflow - Search for 'Stack Overflow'
Many of you already know that you can express colors in your stylesheets like: color: #FFF; color: #FFFFFF; color: rgb(255,255,255); color: hsl(100%,100%,100%); and that you can use rgba() and hsla() to express color transparency. Do you think it would be a good idea to be able to express color… >>> More
Webkit CSS3 for Mozilla

as seen on Stack Overflow - Search for 'Stack Overflow'
What is the equivalent of -webkit-transition: opacity 0.6s linear; in -moz? I tried replacing -webkit with -moz but nothing happened. I even tried extending it to -moz-transition-property/duration but with no success. >>> More