クリック動作やテーブルの見出し固定などjs無しでもできるCSSの小技

これまでjavascriptを利用しないと出来なかったような動作も、CSS3の登場によりCSSのみで実装できるものが増えてきました。
対応ブラウザは限られますが、コードの簡略化のためにも積極的に使っていきたいですね。

見出しを固定したテーブル

スクロールしてもthead要素が上部に固定されたままになります。

See the Pen 見出し固定テーブル by ponzu (@ponzu) on CodePen.

:targetセレクタを使ってクリックで表示/非表示

:target セレクタを使い、選択された要素がクリックされたか否かによって、CSSを出し分けることが出来ます。

See the Pen :targetプロパティを使ってクリックで表示/非表示 by ponzu (@ponzu) on CodePen.

表示幅によってテキスト色が変わっているように見せるCSS

色違いのテキストを、レイヤーのように重ね、見せる部分を変えています。

See the Pen 表示幅でテキスト色が変わっているように見せるCSS by ponzu (@ponzu) on CodePen.

画像にマスクをかける

clip-path プロパティで、画像にSVGのマスクをかけています。

See the Pen 画像にマスクをかける by ponzu (@ponzu) on CodePen.

RELATED POSTS