Small Space Between Box Shadow and Div When Alpha Set

Small space between box shadow and div when alpha set

It appears to be a rendering issue with an anti-aliasing effect on the physical edge of the div. If you change the div to an even number of pixels wide, it goes away on the vertical sides, but you can still see this on the corners because of the border-radius. The drop-shadow must be rendered at a different time (most likely after) then added into the page. With IE it seems to be worse as it 'walks' as the page is resized. I don't think this can be fixed, but you can minimise the issue with a div that is an even number of pixels wide.

Remove 1px transparent space from CSS box-shadow in IE11?

Now that we know it's a bug, here's one acceptable workaround:

.widget {
    width:600px;
    height:400px;
    margin:0 auto;
    text-align:center;
    background:white;
    box-shadow:20em 0 0 0 white, -20em 0 0 0 white;
    position:relative;
    z-index:2;
}
.widget:before, .widget:after {
    position:absolute;
    content: " ";
    width:1em;
    left:-1em;
    top:0;
    height:100%;
    background:white;
    z-index:1;    
}
.widget:after {
    left:auto;
    right:-1em;
}

Basically, I'm adding absolutely positioned :before & :after pseudo elements that contain nothing more than the same background color as the widget DIV and that DIV's box-shadow. These pseudo elements are offset just to the outside-left and outside-right of the widget DIV and positioned behind it so that they provide the correct color for the box-shadow bleed through.

Obviously this adds complication if one is already using the :before & :after elements, but this works for my purposes. I suppose one could also try setting negative margins on the widget DIV.

Checkout the fiddle here: http://jsfiddle.net/TVNZ2/

How to get box-shadow on left & right sides only

NOTE: I suggest checking out @Hamish's answer below; it doesn't involve the imperfect "masking" in the solution described here.

---

You can get close with multiple box-shadows; one for each side

box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 8px -4px rgba(31, 73, 125, 0.8);

http://jsfiddle.net/YJDdp/

Edit

Add 2 more box-shadows for the top and bottom up front to mask out the that bleeds through.

box-shadow: 0 9px 0px 0px white, 0 -9px 0px 0px white, 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 15px -4px rgba(31, 73, 125, 0.8);

http://jsfiddle.net/LE6Lz/

Adding box-shadow to a :after pseudo element

You could add another :pseudo-element, rotate it by 45deg and add box-shadow to it.

Updated Fiddle

body {  background: #eee}.testimonial-inner {  background: #fff;  -webkit-border-radius: 3px;  -moz-border-radius: 3px;  border-radius: 3px;  padding: 30px;  display: block;  margin-bottom: 25px;  position: relative;  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);}.testimonial-inner:after {  top: 100%;  left: 48px;  border: solid transparent;  content: " ";  height: 0;  width: 0;  position: absolute;  pointer-events: none;  border-color: rgba(255, 255, 255, 0);  border-top-color: #fff;  border-width: 18px;  margin-left: -18px;}.testimonial-inner:before {  content: '';  position: absolute;  transform: rotate(45deg);  width: 36px;  height: 36px;  bottom: -12px;  z-index: -1;  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);}

<div class="c-4 testimonial-wrap">  <div class="testimonial-inner">    <p>Using Facebook was unquestionably the best decision I could possibly have made at the point in my journalistic journey. It enabled me to share my fears, frustrations as well as successes.</p>  </div></div>

CSS box-shadow renders different on Firefox and Chromium

Browsers use different algorithms to generate the shadow blur, in Chrome the opacity of shadow pixels decreases more quickly from the inner edge of the shadow area to the outer, and since the inner 1/3 of the shadow is hidden under the box in this example, it appears to look as having different start color. If we make the blur entirely visible by reducing the blur radius and the negative spread distance by 5px, and replace the solid shadow color with semi-transparent rgba(), the difference in the rendering becomes much less significant (demo).

Transparent background overriding box-shadow

The problem you faced here is with the shadow property. CSS shadows always appear behind the element and it's not going to see through the transparent background also. So here's a little trick that you can achieved the expecting behavior with CSS position property.

.but-container{    display: flex;    position: relative;    width: 300px;    height: 100px;}button{    z-index:1;    width: 100%;    height: 100%;    position: absolute;    background-color: Transparent;    background-repeat:no-repeat;    cursor:pointer;    overflow: hidden;    outline:none;    border-radius: 500px;    display: inline-block;    border: 2px solid black;    color: white;    font-family: "Quicksand", sans-serif;    font-size: 250%;    letter-spacing: 2px;    text-align: center;    padding: 20px 100px;    font-weight: 900;    -webkit-text-stroke: 2px black;}.but-shadow{    z-index: -1;    top: 8%;    left: 3%;    border-radius: 500px;    display: inline-block;    background-color: rgba(140,122,230,1);    height: 100%;    width: 100%;    position: absolute;}

<div class="but-container">  <button>GO</button>  <div class="but-shadow"></div></div>

SingularityGS: Why is the box-shadow missing at alpha and omega edges of of grid?

Probably because you've got overflow: hidden on the container.

---

@MrPaulDriver, the asker:

Thank you @lolmaus (once again). This turned out to be because I was using @include clearfix on the container. What was needed was @pie-clearfix. Documentation can be found here

http://compass-style.org/reference/compass/utilities/general/clearfix/

---

Related Topics