In Lesson: Add a box-shadow to a Card-like Element - Why is shadow applied to left side of box?

HTML-CSS
1

Tell us what’s happening:

There is a shadow applied to the left edge of the box, but I don’t understand why the second box-shadow adds a shadow to the left side of the box, but the first box-shadow doesn’t.

If we change:

  #thumbnail {
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  }

to :

  #thumbnail {
    box-shadow: 0 10px 20px rgba(0,0,0,0.19);
  }

The shadow on the left side of the box disapears?

Both start with a horizontal-offset of 0, so why does the second-box shadow add a shadow to the left side of the box but the first one doesn’t?

thanks

Here is full code:

Your code so far


<style>
  h4 {
    text-align: center;
    background-color: rgba(45, 45, 45, 0.1);
    padding: 10px;
    font-size: 27px;
  }
  p {
    text-align: justify;
  }
  .links {
    text-align: left;
    color: black;
  }
  
  #thumbnail {
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  }
  
  
  .fullCard {
    width: 245px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin: 10px 5px;
    padding: 4px;
  }
  .cardContent {
    padding: 10px;
  }
  .cardText {
    margin-bottom: 30px;
  }
</style>
<div class="fullCard" id="thumbnail">
  <div class="cardContent">
    <div class="cardText">
      <h4>Alphabet</h4>
      <hr>
      <p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
    </div>
    <div class="cardLinks">
      <a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
      <a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
    </div>
  </div>
</div>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/applied-visual-design/add-a-box-shadow-to-a-card-like-element

2

if you’ll place a card at the center (.fullCard {margin: 0 auto;) you will see more clearly that shadow. the first shadow is just more blured. I guess this is kind of illusion?

3

Ah wow, yes good point! It must be because it’s so close to the thick grey border of the preview window in the freecodecamp app. Interesting point, so I guess this raises an interesting point which is that aside from direct styling, we also need to consider the visual appeal of elements ‘in situ’ as their alignment to other elements can create visual effects, that might not be directly expressed by the pure css!

Thanks

1 Like