CSSだけでモーダルを使用してみる

まえおき

12月といえばアドベントカレンダー。
アドベントカレンダーといえばこの業界にいると記事を書かなくては！となりますよね。
本来はイエス・キリストの降誕を待ち望む期間に1日ずつ開けていくカレンダーですが、海外では紅茶やお菓子のアドベントカレンダーもたくさんあります。

今回はティータイムにぴったりなアドベントカレンダーをCSSだけで描いてみました。

紅茶についてはあまり詳しくはなく、少し嗜む程度ですがおすすめを載せましたので、足を運べそうなお店がありましたらぜひ行ってみてください。（CSS書くよりリストまとめるのに時間がかかったかもしれない😿 ）

なんちゃってアドベントカレンダー

See the Pen Le Calendrier de l'Avent by いおり🔯 (@96usa_koi) on CodePen.

今回使用してみたかったこと

• チェックボックスのアニメーション
• 擬似クラス:targetだけでモーダル

※気になってたCSSを触れてみただけですので、アクセシビリティーの考慮はしておりません。

チェックボックスのアニメーション

inputが:checked になったらinputと兄弟関係にあるクラスがアニメーションします。

    <label>
      <input type="checkbox" name="" value="">
      <div class="open-door">
      <div class="doorArea">
        <div class="door">Le Calendrier de l'Avent</div>

    〜

input[type=checkbox]:checked ~ .doorArea .door {
  animation: doorOpen 1s linear 0s;
  animation-fill-mode: forwards;
}

@keyframes doorOpen{
  0% {
    transform: translate(-50%, -50%) rotateY(0deg);
  }

  100% {
    transform: translate(-56.5%, -50%) rotateY(85deg) skewY(-10deg);
    opacity: 0;
    display: none;
    z-index: -1;
  }
}

擬似要素:targetのモーダル

MDNを見た方がわかりやすいのでコードは割愛します。

MDNに載っているdemoが滑らかで綺麗です。
JavaScriptを使用していないとは思えないくらいナチュラルですね。

まとめ

CSSだけでマリ●を再現している方を見かけてから、気になってたCSSを触ってみました。
ラジオボタンでの複数アニメーションも触ってみたいです。

以上