2021年02月1日(月)

CSSのボックスモデルの構造をCSSアニメーションで可視化

• 0
• 22
• 36
• 38

@use postcss-preset-env {

  stage: 0

}

.stack {

  display: grid;

  grid: [stack] / [stack];

  perspective: 5000;

  

  &:before {

    content: "";

    position: fixed;

    inset: 0;

    background: lch(95 0 0);

    transition: background 2s ease;

    pointer-events: none;

  }

  

  &:matches(:hover, :active) {

    &:before {

      background: lch(15 0 0);

    }

  }

  

  &:matches(:hover, :active) .card {

    --bg-opacity: 5%;

    transition-dura...