【CSS】css-doodle を使って雨を降らせてみる

【CSS】css-doodle を使って雨を降らせてみる
雨だー
css-doodleで雨を降らしてみますねー

サンプル

See the Pen <css-doodle> Rain by 125naroom (@125naroom) on CodePen.

css-doodle とは?

css-doodle とは、CSSが使える進化版といった感じ。
まだ使えるブラウザが限られている。
現在はChromeとSafariだけ。
古いブラウザだとPolyfillの読み込みが必要。

対応していないブラウザの場合は、css-doodle を非表示にするとかですかね。

JSだったら

if (!window.customElements || !document.head.attachShadow) {
  document.body.classList.add('no-doodle-support');
}

CSSだったら

.no-doodle-support css-doodle {
  display: none;
}

さいごに

css-doodleってすごいですねー
休憩しましょうー
Author

デザコト

あ、いいな、と思うWebデザインを紹介しています。デザインの参考に。やさしいデザインが多いです。Webデザインギャラリー『デザインのこと - Web design gallery』を運営しています。

Googleさんの
おすすめ

7

/

14

2024

Googleさんの
おすすめ

7

/

14

2024

デザインの記事

株式会社High Link
自主映画『アット・ザ・ベンチ』第2編「まわらない」
【jQuery】スライダープラグイン「slick」実装サンプル集