CSSでここまでできるのか!知っておくと便利なCSSのプロパティや疑似要素のまとめ

CSSの進化は早いですね。
一昔前までは、JavaScriptを使用しなければできなったこと、かなり複雑なコードを書かなければできなかったことが、CSSだけで簡単にできるようになっています。

知っておくと便利なCSSのプロパティや疑似要素をまとめて紹介します。

サイトのキャプチャ

CSS can do that?
by Ananya Neogi


下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

1. box-decoration-break 改行する際の表示形式を定義

box-decoration-breakプロパティは、複数の行・列、またはページにまたがる場合に、要素の断片を表示する方法を定義できます。

See the Pen
CSS: box-decoration-break
by Ananya Neogi (@ananyaneogi)
on CodePen.

サポートブラウザ
box-decoration-breakのサポートブラウザ
ポリフィル
Polyfill for box-decoration-break

2. attr() -簡単ツールチップ

attr()プロパティは、選択した要素の値を参照します。ツールチップのように補足情報の表示にも便利です。

See the Pen
attr() in CSS
by Ananya Neogi (@ananyaneogi)
on CodePen.

サポートブラウザ
attr()のサポートブラウザ
ポリフィル
CSS attr() polyfill

3. backface-visibility -フリップするカードも簡単

backface-visibilityプロパティは、要素をユーザーに向けたときにその背面を表示するかどうかを定義します。回転するカードUIも簡単に実装できます。

See the Pen
CSS Card Flip On Hover
by Ananya Neogi (@ananyaneogi)
on CodePen.

サポートブラウザ
CSS3 3D Transformsのサポートブラウザ

4. conic-gradient -円グラフを簡単に実装できる

グラデーションは素晴らしいものです。線形グラデーションを使用して背景のスタイルを設定したことがあるかもしれません。conic-gradientプロパティを使用して、円グラフを簡単に実装できることを知っていますか?

See the Pen
Pie Chart With Pure CSS
by Ananya Neogi (@ananyaneogi)
on CodePen.

参考: MDN

サポートブラウザ
conic-gradientのサポートブラウザ
ポリフィル
Conic Gradient Polyfill

5. filter -画像に多彩なフィルタを適用

filterプロパティがあれば、Photoshopのフィルタは必要ないかもしれません。このプロパティは画像の外観にグラフィカルな変更を適用します。使用できる効果は次の通りです。blur, brightness, contrast, grayscale, hue-rotate, opacity, invert, sepia, saturate, drop-shadow.

See the Pen
CSS Filters
by Ananya Neogi (@ananyaneogi)
on CodePen.

サポートブラウザ
CSS Filter Effectsのサポートブラウザ
ポリフィル
CSS Filters Polyfill

例えば、drop-shadowはかなり素晴らしいです。簡単に、画像にシャドウを加えることができます。

See the Pen
CSS Drop Shadow
by Ananya Neogi (@ananyaneogi)
on CodePen.

6. mix-blend-mode -画像やテキストにも使える

mix-blend-modeプロパティは要素のコンテンツと、要素の背景または親のコンテンツとのブレンド方法を設定できます。

See the Pen
CSS Blend Modes
by Ananya Neogi (@ananyaneogi)
on CodePen.

驚くべきことは、ブレンドモードやフィルタを画像やテキストと組み合わせることで実現できます。
参考: MDN

サポートブラウザ
Blending of HTML/SVG elementsのサポートブラウザ

7. first-letter -美しいドロップキャップ

私が本や雑誌で好きなところの一つが、美しいドロップキャップです。ドロップキャップはfirst-letter疑似要素で簡単に作成できます。

See the Pen
CSS Drop-Cap
by Ananya Neogi (@ananyaneogi)
on CodePen.

サポートブラウザ
::first-letterのサポートブラウザ

8. shape-outside -複雑な形に便利

shape-outsideプロパティを使用すると、単純な四角形のボックスではなく、複雑なオブジェクトを囲む隣接するインラインコンテンツを囲う方法をカスタマイズできます。

See the Pen
CSS Shape-Outside
by Ananya Neogi (@ananyaneogi)
on CodePen.

別ウインドウでデモを開き、幅を変更してみてください。テキストがイメージの周囲を囲むようになっています。

サポートブラウザ
CSS Shapes Level 1のサポートブラウザ
ポリフィル
shapes-polyfill

9. writing-mode -タイポグラフィのデザインにも

writing-modeプロパティはテキストを水平または垂直に配置するかを定義します。

  • horizontal-tb: テキストは横書きで、左から右に、上から下に流れます。
  • vertical-lr: テキストは縦書きで、左から右に、上から下に流れます。
  • vertical-rl: テキストは縦書きで、右から左に、上から下に流れます。

デモページで、これらが実際に動作していることを確認してください。

サポートブラウザ
writing-modeのサポートブラウザ

10. テキストにグラデーションを付ける

テキストにグラデーションを付けるには、-webkit-background-clip: textと-webkit-text-fill-color: transparentの2つのプロパティを組み合わせることで実現でます。

See the Pen
Gradient Text with CSS
by Ananya Neogi (@ananyaneogi)
on CodePen.

サポートブラウザ
CSS3 Background-image optionsのサポートブラウザ
CSS text-stroke and text-fillのサポートブラウザ

11. scroll-snap-type -スクロールのスナップが可能に

scroll-snap-typeプロパティは、スクロールコンテナにスナップポイントをどのように適用するかを設定します。

See the Pen
Scroll Snap with CSS
by Ananya Neogi (@ananyaneogi)
on CodePen.

デモは垂直方向にスナップさせています。
参考: CSSでスクロールのスナップが可能に!scroll-snapプロパティの基礎知識と便利な使い方

サポートブラウザ
CSS Scroll snapのサポートブラウザ
ポリフィル
css-scroll-snap-polyfill

sponsors

top of page

©2024 coliss