これまで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.
