`pointer-events:none;` で作る視覚効果

知らなかった。こういうのがある。

  pointer-events:none;

stackoverflow.com

IE11+。全ブラウザが実装してる。使えそうだ。

Can I use... Support tables for HTML5, CSS3, etc

これとSVGを組み合わせると、ユーザーの操作を邪魔せずに、ユーザーの注意をコントロールする視覚効果を作れる。新規ユーザーへのチュートリアルや、入力補助、ヘルプなどに使えそう。

Result タブを選んでみてほしい。ユーザーを注目させるための視覚効果としてスポットを動かしている。