JavaScript無し！CSSで簡単に動きを実装するテクニックまとめ

作成：2016/07/19 Web制作 > JavaScript無しで実装するCSS小技まとめです。細部にちょっとした動きを取り入れたいときなど、知っておくと便利なエフェクトをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 メタ言語でなく、CSSで見たい方は「View Compiled CSS」でコンパイルして見てください。 ※CodepenのURLの末尾に「?editors=1100」を付与するとhtml/cssのみの編集画面で閲覧できるので、今回は全てのURL末尾に付与してます。 モーダルウィンドウ チェックボックスを使わないタイプ。擬似クラスである:targetを使い、アンカーリンク（#シャープ）にスタイルを適用しモーダルウィンドウを表示しています。 .foo:target { color: red; } :target擬似クラスを利用すれば、J

[matsnow]

CSSだけでも、ここまで色々できるんですね。

[neu1975]

“Squiggly Text”

[digitalglm]

JavaScript無し！CSSで簡単に動きを実装するテクニックまとめ | コムテブログ: 作成：2016/07/19 Web制作…

[mushus]

わざわざjs書くまでもないことはcssのほうが楽そう

[k_gobo]

こういうのはサポートも書いといてほしい。／:targetはIE9↑／rotateは-ms-transformでIE9↑、rotateXはIE10↑／vhはAndroidブラウザで4.4↑／mix-blend-modeはIE全滅（Edgeも）／:validはIE10↑

[japanitnt]

JavaScript無し！CSSで簡単に動きを実装するテクニックまとめ | コムテブログ: 作成：2016/07/19 Web制作…