CSS box-shadow shadows

Question

For practice and fun, I am seeking to recreate the following logo in pure CSS in one element

If you notice, each "bar" has a small, shadowed grey area, which gives it a sense of depth. I'd like to create these in pure CSS, if possible. The tricky thing to me is that it looks like they go behind bars on top of them, so it'd have to be on an individual bar level in order to do that as opposed to applying a mask to the whole thing.

Thus far, I have been able to create the bars using a pseudo-element and some box shadows and have given the B the colors using a gradient and background-clip: text.

Normally I'd use a rotated element or mask to apply the shadows, but since I created the bars using box-shadows, I do not know how I would, or even if I can, apply them to an individual shadow (technically speaking they're all one shadow, but I mean apply it to one bar without covering others)

Here's what I have so far

My code

<div class='B'>B</div>

body {
    background:#FFF8E6;
}
.B {
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-150px;
    line-height:236px;
    font-size:225pt;
    font-weight:bold;
    font-family:'Carrois Gothic SC', sans-serif;
    background-image:-webkit-gradient(linear, left top, left bottom, color-stop(9%, #FFBF7F), color-stop(9%, #F4A668), color-stop(19.6%, #F4A668), color-stop(19.9%, #F38669), color-stop(28.7%, #F38669), color-stop(29%, #AF9F88), color-stop(49%, #AF9F88), color-stop(49%, #cfb698), color-stop(70%, #cfb698), color-stop(70%, #ecd2b1));
    color:transparent;
    -webkit-background-clip: text;
}
.B:after {
    content:'';
    z-index:-1;
    position:absolute;
    left:-387px;
    height:45px;
    width:150px;
    border-radius: 0px 0px 0px 50px;
    box-shadow: 180px -12px 0 -9pt #FFBF7F, 220px -12px 0 -9pt #FFBF7F, 276px -12px 0 -9pt #FFBF7F, 215px 11px 0 -8pt #F4A668, 220px 11px 0 -8pt #F4A668, 275px 11px 0 -8pt #F4A668, 255px 33px 0 -8pt #F38669, 275px 33px 0 -8pt #F38669, 255px 56px 0 -9pt #898481, 276px 56px 0 -9pt #898481,
    /* I DON'T KNOW HOW TO FLIP THESE WITHOUT ADDING AN ELEMENT */
    275px 78px 0 -8pt #A4978E, 300px 101px 0 -8pt #B8A28A,
    /************************************************************/
    250px 90px 0 0px #CABBA8, 190px 45px 0 0px #CCBCAC, 150px 0 0 0px #FCCDA1;
}

Now, I don't think this is possible, but I'm always surprised by the ingenuity that SO users have.

TL,DR How can I create these diagonal shadows without adding more elements? I'd be open to alternate ways than the method I'm using if needed

EDIT: Here is the final result

Answer 1

I would suggest you to separate every line into separate DIV and use the following code to create the desired SHADOW EFFECT :

/*==================================================
 *                SHADOW EFFECT 
 * ===============================================*/

.div
{
  position: relative;
}
.div:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 9px;
  right: 10px;
  left: auto;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 19px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
}  

This will be really helpful in achieving the desired result. You can modify it according to your needs and requirements.

Hope this will help you!

Answer 2

Well, I couldn't leave that question open ...

I haven't been able to solve it using your approach. Making the inclined shadows was doable, making it clipped under the circular borders, not (at least I haven't find the way).

Alternative: using a huge amount of backgrounds:

.B:before {
    content:'';
    position:absolute;
    left: -237px;
    height:135px;
    width: 258px;
    background-image: linear-gradient(0deg,#898481,#898481),
            radial-gradient(circle at bottom right, #898481 22px, transparent 22px),
            linear-gradient(0deg,#898481,#898481),
            radial-gradient(circle at bottom right, #898481 22px, transparent 22px),
            linear-gradient(196deg,rgba(0, 0, 0, 0.97) -21px,transparent 27px),            
            radial-gradient(circle at top right, #ccbcac 44px, transparent 30px),
            linear-gradient(0deg,#ccbcac,#ccbcac),
            linear-gradient(0deg,#898481,#898481), 
            radial-gradient(circle at top right, #898481 22px, transparent 22px),
            linear-gradient(187deg,#B46550 2px,#f38669 24px),
            radial-gradient(circle at top right, #f38669 22px, transparent 22px),
            linear-gradient(196deg,rgba(60, 60, 60, 0.97) -21px,transparent 27px),
            radial-gradient(circle at top right, #ccbcac 44px, transparent 30px),
            linear-gradient(0deg,#ccbcac,#ccbcac), 
            linear-gradient(190deg,#AC6D3B -11px,#f4a668 28px),
            radial-gradient(circle at top right, #f4a668 22px, transparent 22px),
            linear-gradient(0deg,#ffbf7f,#ffbf7f), 
            radial-gradient(circle at top right, #ffbf7f 22px, transparent 22px),
            radial-gradient(circle at top right, #fccda1 44px, transparent 30px),
            linear-gradient(0deg,#FCCDA1,#fccda1); 
    background-position: 
          185px 110px, 163px 110px, 163px 88px, 144px 88px, 106px 88px,
          41px 88px, 137px 88px,            
          142px 66px, 120px 66px,
          142px 44px, 120px 44px,
           64px 44px,42px 44px, 
78px 44px,   97px 22px, 76px 22px, 65px 0px, 43px -1px, 0px 0px, 44px 0px;
    background-size: 198px 22px, 22px 22px,198px 22px, 22px 22px, 76px 22px, 96px 44px, 200px 44px,198px 22px, 22px 22px,198px 22px, 22px 22px, 96px 44px, 44px 44px, 200px 44px, 198px 22px, 22px 22px, 198px 22px, 22px 22px, 44px 44px, 200px 44px;
    background-repeat: no-repeat;    
}

Most of the backgrounds are used to reproduce the part of the design that you already had. To get the shape, you need a rectangular background with a circular one at the left.

For the shadows, there are 2 techniques used.

The easy one is when you have all the shadow contained in a rectangular region. Then you can get it using the same linear gradient that is making the rectangular region,just giving it a darker shade.

The more difficult are those that overlap the circle part. Here I needed to use another separate background image for the shadow.

result

I have only validated the result in Chrome.

Of course this technique can be used in the letter:

updated CSS for the letter

.B {
    position:absolute;
    top: 200px;
    left: 300px;
    margin-top:-150px;
    line-height:236px;
    font-size:225pt;
    font-weight:bold;
    font-family:'Carrois Gothic SC', sans-serif;
    background-image: 
         linear-gradient(187deg,#FFBF7F,#FFBF7F),
         linear-gradient(187deg,#cc8650,#F4A668),
         linear-gradient(195deg,#B46550,#F38669),
         linear-gradient(187deg,#8A7668 25px,#AF9F88 35px),
         linear-gradient(187deg,#af9678,#cfb698),
         linear-gradient(187deg,#dcc2a1,#ecd2b1);
    background-position: 
          0px 0px, 0px 9%, 0px 20%, 0px 30%, 0px 60%, 0px 100%;
    background-size: 200px 9%, 200px 11%, 200px 10%, 200px 30%, 200px 30%, 200px 30%, 200px 40%;
    background-repeat: no-repeat;
    color: transparent;
    -webkit-background-clip: text;
}

commented backgrounds CSS

background-image: linear-gradient(0deg,#898481,#898481),   /* second small bar in last big bar */
    radial-gradient(circle at bottom right, #898481 22px, transparent 22px),
    linear-gradient(0deg,#898481,#898481),                 /* first small bar in last big bar */
    radial-gradient(circle at bottom right, #898481 22px, transparent 22px),
    linear-gradient(196deg,rgba(0, 0, 0, 0.97) -21px,transparent 27px),        /* shadow */    
    radial-gradient(circle at top right, #ccbcac 44px, transparent 30px),    /* last big bar */ 
    linear-gradient(0deg,#ccbcac,#ccbcac),
    linear-gradient(0deg,#898481,#898481),          /* second small bar in second big bar */
    radial-gradient(circle at top right, #898481 22px, transparent 22px),    
    linear-gradient(187deg,#B46550 2px,#f38669 24px),  /* first small bar in 2nd big bar (shadowed) */
    radial-gradient(circle at top right, #f38669 22px, transparent 22px),     
    linear-gradient(196deg,rgba(60, 60, 60, 0.97) -21px,transparent 27px),   /* shadow on second big bar */
    radial-gradient(circle at top right, #ccbcac 44px, transparent 30px),   /* second big bar */    
    linear-gradient(0deg,#ccbcac,#ccbcac), 
    linear-gradient(190deg,#AC6D3B -11px,#f4a668 28px),  /* second small bar on top (shadowed) */
    radial-gradient(circle at top right, #f4a668 22px, transparent 22px),   
    linear-gradient(0deg,#ffbf7f,#ffbf7f),                        /* first small bar on top */
    radial-gradient(circle at top right, #ffbf7f 22px, transparent 22px),
    radial-gradient(circle at top right, #fccda1 44px, transparent 30px), /* big bar on top */
    linear-gradient(0deg,#FCCDA1,#fccda1); 

Not perfect, but you can get some shadow in the circles with another step in the radial gradient:

radial-gradient(circle at top right, #fccda1 42px, #AC8D70 44px, transparent 45px)

The limit is that the shadow in that case must be concentric to the border. The alternative would be to set another background, may be an elliptical one.

shadows on circles