なんにもない日の頭の中はこんなもんだったりする

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

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

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ってすごいねー
きのこさん
わーい
Web design gallery - デザインのこと - ウェブデザインあつめました。
いつかのこと

おすすめ

Googleさんのおすすめ

Googleさんのおすすめ

デザインの記事

ネ・ネット | HUMOR ユーモア
itgirlie
  • 2019.11.11New
  • itgirlie
  • 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
  • デザインのこと – Web design gallery
11月15日
11月14日