1.7 KiB

Raw Blame History

id	title	challengeType	dashedName
60a3e3396c7b40068ad6998c	Step 34	0	step-34

--description--

I colori e le forme del tuo dipinto sono troppo netti per sembrare un Rothko.

Usa la proprietà filter con blur per sfocare il dipinto di 2px nell'elemento .canvas.

Ecco un esempio di una regola che aggiunge un blur di 3px:

p {
  filter: blur(3px);
}

--hints--

Dovresti assegnare alla proprietà filter il valore blur(2px).

const hasFilter = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.filter === 'blur(2px)');
assert(hasFilter);

Il selettore .canvas dovrebbe avere una proprietà filter con il valore blur(2px).

const canvasFilter = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('filter');
assert(canvasFilter === 'blur(2px)');

--seed--

--seed-contents--

.canvas {
  width: 500px;
  height: 600px;
  background-color: #4d0f00;
  overflow: hidden;
--fcc-editable-region--

--fcc-editable-region--
}

.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;
}

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

<!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>

1.7 KiB Raw Blame History

--description--

--hints--

--seed--

--seed-contents--

1.7 KiB

Raw Blame History