?? ?? ??? ?? ?? ????? ???? ??? ?? ????. ?????? "??? ?"? ???? ???? ???? ???? ??? ????. ??? ? ??? ??? ???? ??? ???? ??? ???????? ???? ??? ?? ??? ???? ?? ? ? ????. ? ????? ??? CSS ?? ???? ?????.

??? ?? ?? ?? Dappled Light? ??? ???? ?? ?????. ??? ?? ??? ??? ????? ?? ???? ?? ? ?? ?? ?? ??? ?? ??? ?????. ? ???? ?? ???? ??? ???? ?????. ?? ??? ? ?? ? ??? ???? ?? ??? ???? ???? ?? ????? ?? ? ?????.

??? ?? ?? ??? ??? ?? ? ??? ??? ??????. [?? ??? ??? ? ????]

? ????? ??? (??, ??, ????)? ???? ??? ???? CSS ???? ???? ??? ??? ???? ?? ?????. ?? ??? ?? ? ????.

?? ??

??? ??? ?? (??, ??, ????)? ???? ??? ??? ?????. ???? ???? ??? ? ????, ???? ????? ???? ?? ? ??? ??????. ??? ?? ???? ???? ?????, ??? ?? ??? ??? ?????. ??? ??? ??? ?????? ?????. ? ???? ??? ? ??? ? ????,? ? \? ??? ????.

? ??? .backdrop ?? ?? ?? ???? ?????.

<div class="backdrop">
  <p class="shapes">?</p>
  <p class="shapes">?</p>
  <p class="shapes">\</p>
</div>

.backdrop ? ?? ???? ???? ?? ??????. ??? ???? ?? ???? ????, ??? ??? ?? ???, overflow: hidden CSS ???? ??? ??? ???????.

 .BackDrop {
  ?? : ?? / ?? No-Repeat URL ( 'image.jpeg');
  ?? : 400px; ?? : 240px;
  ???? : ???;
  ????? : ???;
}
.BackDrop> * {
  ??? ?? : 1/1;
}

??? ??? ??? ???? ????. ??? ?? ?????. ??? ??? ? ??? ?? ????? ???? ??????.

CSS? ?? ??? ?? ???????

????? ?? CSS ??? ??? ??, ? ??? ?? ?? ?? ( rgba() ??), ??? ?? ??? ???, ? ?? ?? ? ?????? mix-blend-mode ???.

 . ?? {
  ?? : ??;
  ??? : RGBA (0, 0, 0, 0.3);
  Text-Shadow : 0 0 40px #fff;
  ?? : BOLDER 320PT/320PT MONOSPACE;
  ?? ??? ?? : ?;
}

mix-blend-mode: multiply ??? ??? ????? ???? ??? ?? ??? ?? ????? ??? ??? ???? ? ????? ??? ?? ??? ????.

??? ??? ?????

?? ???? ??? ????? ?? filter: brightness(1.6) ?????. ?? background-blend-mode ?? ??? ?? ? ? ????. ????? ??? ?? ?? ????? ??? ? ????.

<svg xmlns="http://www.w3.org/2000/svg"><foreignobject height="240px" width="400px"><div style="font: bolder 720pt/220pt monospace;
       color: transparent;
       text-shadow: 0 0 40px floralwhite;
       background: rgba(0, 0, 0, 0.3);" xmlns="http://www.w3.org/1999/xhtml">
      ?
    </div>
  </foreignobject></svg>

??? ?? ??? ??? ?? CSS blur() ??? ???? ??? ??? ??? ????? ??????. @supports ???? ? ??? ??? ??? ? ????.

?? ??? ?? ???? ??? ?????.

<div class="backdrop">
  <p class="shapes">?</p>
  <p class="shapes">?</p>
  <p class="shapes">\</p>
</div>


  
  ?? ????? ?? 10 ? ???



  ?? ???? ??? ??? ???? ...

.backdrop ? .shapes ???? ???? ?????. .content isolation: isolate ??? ??? ????? ???? ??? ?? ??? ??? ?????.

?? ?????

.backdrop:hover ?? @keyframes ???? ??? ?????? ?????.

 .BackDrop : hover>. ?? : nth-of-type (1) {
  ????? : 2S ????? ?? ?? ?? ??;
}
.BackDrop : hover>. ?? : nth-of-type (2) : ?? {
  ????? : 4S? ??? ? ?? ?? ?? Move-1;
}

@keyframes Move {
  {Text -Indent : -20px; }
  {Text-Indent : 20px; }
}
@keyframes move-1 {
  {Text -Indent : -60px; }
  {Text-Indent : 40px; }
}

text-indent ??????? ??? ???? ?? ??? ??????? ?? ??? ??????.

??

? ????? CSS? ???? ??? ???? ??? ?? ??? ???? ??? ? ??? ??? ??? ?????. ??? ???? ??? ??? ???? ???? ??? ??? ??? ???? ? ????. ??? ??? ?? ???? ??? ?????.

? ??? ??? CSS? ?? ??? ?????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!