Learn the CSS Box Model by Building a Rothko Painting - Step 35 - Why 1px?

HTML-CSS
1

Tell us what’s happening:
I know where the mistake is. The filter property should be blur(1px), not blur(3px). But I don’t understand why. If the three boxes have blur(2px) and I’m supposed to increase their blur effect by 1px, shouldn’t blur(3px) be the correct answer? What am I missing?

Your code so far

/* file: styles.css */
.canvas {
  width: 500px;
  height: 600px;
  background-color: #4d0f00;
  overflow: hidden;
  filter: blur(2px);
}

.frame {
  border: 50px solid black;
  width: 500px;
  padding: 50px;
  margin: 20px auto;
}

.one {
  width: 425px;
  height: 150px;
  background-color: #efb762;
  margin: 20px auto;
}

.two {
  width: 475px;
  height: 200px;
  background-color: #8f0401;
  margin: 0 auto 20px;
}

.one, .two {
  filter: blur(3px);
}

.three {
  width: 91%;
  height: 28%;
  background-color: #b20403;
  margin: auto;
}

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Rothko Painting</title>
    <link href="./styles.css" rel="stylesheet">
  </head>
  <body>
    <div class="frame">
      <div class="canvas">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
      </div>
    </div>
  </body>
</html>

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.1 Safari/605.1.15

Challenge: Learn the CSS Box Model by Building a Rothko Painting - Step 35

Link to the challenge:

2

The canvas has the blur effect originally not the boxes though?

I think you are saying that since the blur 2px is inherited, then to increase the blur by one we should use 3px. But that increases the blur on the boxes by 3 ultimately? (and they wanted to increase the overall blur by one?)

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.