Preventing overlapping corners with multiple transparent box-shadows

Question

Actual goal: Give tiles, some containing images, an engraved/embossed look using only CSS.

Question: I'm attempting to use four inset box-shadows with transparency on a tile to create an engraved look. Unfortunately, the four translucent shadows overlap each other at the corners of the tile, producing an undesired effect.

Is there a way to prevent the box-shadows from overlapping at the corners? Or are there any other viable ways to achieve a transparent engraved look on these tiles?

==> DEMO

body {background-color: #1E1E1E;}
.engrave1 { 
    background-color: #222;
    width: 150px; height: 150px;
    box-shadow: 0px 5px 2px 0px RGBa(0,0,0,0.3) inset,
                -5px 0px 2px 0px RGBa(100,100,100,0.3) inset,
                0px -5px 2px 0px RGBa(140,140,140,0.3) inset,
                5px 0px 2px 0px RGBa(90,90,90,0.3) inset;
}
.engrave2 { 
    background-color: #222;
    width: 150px; height: 150px;
    border-radius: 8px;
    box-shadow: 0px 9px 2px 0px RGBa(0,0,0,0.3) inset,
                -9px 0px 2px 0px RGBa(100,100,100,0.3) inset,
                0px -9px 2px 0px RGBa(140,140,140,0.3) inset,
                9px 0px 2px 0px RGBa(90,90,90,0.3) inset;
}

<body>
    
<div class="engrave1"></div>
    <br/>
<div class="engrave2"></div>
    
</body>

Leaf · Answer 1 · 2015-02-28T18:30:07.833

Update: I actually got it to look pretty good. ==> DEMO

I had an idea while writing this question, but it's not a very graceful solution. Instead of box-shadows, I created 4 child elements within the tile. The children are shaped as Trapezoids so that the corners can align perfectly. Each child is individually positioned and colored to its representing side.

The drawbacks to this method:

Cannot resize tile without manually changing the specs of each Trapezoid
Cannot apply blur to the pseudo 'shadows'
Looks like something from a bad powerpoint presentation or a 90's website (may be fixed with some tweaking)
Does not conform to rounded corners

==> DEMO

body {background-color: #1E1E1E;}
.engrave1 { 
    position: relative;
    background-color: #222;
    width: 150px; height: 150px;
    background-image: url(http://lorempizza.com/150/150);
}
.engrave2 { 
    position: relative;
    width: 150px; height: 150px;
    background-image: url(http://lorempizza.com/150/150);
    border-radius: 8px;
    overflow: hidden; /*hides overflowing pseudoshadows*/
}
.engrave3 { 
    position: relative;
    width: 150px; height: 150px;
    border-radius: 8px;
    overflow: hidden; /*hides overflowing pseudoshadows*/
}
.engrave4 { 
    position: relative;
    width: 150px; height: 150px;
}
.pseudoshadow {
    position: absolute;
}
.pseudoshadow.cover { /*just for extra looks */
    top: 5px; left: 5px;
    width: 140px; height: 140px;
    background-color: RGBa(0,0,0,0.1);
}
.pseudoshadow.top {
    top: 0;
 border-top: 5px solid RGBA(0,0,0,0.4);
 border-left: 5px solid transparent;
 border-right: 5px solid transparent;
 height: 0;
 width: 140px;    
}
.pseudoshadow.right {
    top: 0;
    right: 0;
 border-right: 5px solid RGBA(0,0,0,0.2);
 border-top: 5px solid transparent;
 border-bottom: 5px solid transparent;
 width: 0;
 height: 140px;    
}
.pseudoshadow.bottom {
    bottom: 0;
 border-bottom: 5px solid RGBA(255,255,255,0.05);
 border-left: 5px solid transparent;
 border-right: 5px solid transparent;
 height: 0;
 width: 140px;    
}
.pseudoshadow.left {
    top: 0;
    left: 0;
 border-left: 5px solid RGBA(0,0,0,0.2);
 border-top: 5px solid transparent;
 border-bottom: 5px solid transparent;
 width: 0;
 height: 140px;    
}

<body>
    
<div class="engrave1">
    
    <div class="pseudoshadow cover"></div>
    
    <div class="pseudoshadow top"></div>
    <div class="pseudoshadow right"></div>
    <div class="pseudoshadow bottom"></div>
    <div class="pseudoshadow left"></div>
    
</div>
    
    <br/>
    
    
<div class="engrave2">
    
    <div class="pseudoshadow cover"></div>
    
    <div class="pseudoshadow top"></div>
    <div class="pseudoshadow right"></div>
    <div class="pseudoshadow bottom"></div>
    <div class="pseudoshadow left"></div>
    
</div>

    <br/>
    
    
<div class="engrave3">
    
    <div class="pseudoshadow cover"></div>
    
    <div class="pseudoshadow top"></div>
    <div class="pseudoshadow right"></div>
    <div class="pseudoshadow bottom"></div>
    <div class="pseudoshadow left"></div>
    
</div>


    <br/>
    
    
<div class="engrave4">
    
    <div class="pseudoshadow cover"></div>
    
    <div class="pseudoshadow top"></div>
    <div class="pseudoshadow right"></div>
    <div class="pseudoshadow bottom"></div>
    <div class="pseudoshadow left"></div>
    
</div>
    
</body>

Preventing overlapping corners with multiple transparent box-shadows

1 Answers1