以下はAnanya Neogiによる記事、CSS can do that?の日本語訳です。
CSS can do that?
CSSだけでこんなことができる、驚くべきリスト！
注意：これらのプロパティのいくつかは、一部のブラウザで動作しません。
その場合は、@supportsを使って代替スタイルを追加することができます。
全ての例を表示するにはChromeを使ってください。
イタリック体は訳者(私だ)による補足とかです。
1. box-decoration-break
このCSSプロパティは、複数の行、列、あるいはページに分割された要素のレンダリング方法を指定します。
See the Pen CSS: box-decoration-break by Ananya Neogi (@ananyaneogi) on CodePen.
2. attr()
選択された要素の値をattr()で取得できます。
このメソッドは、アクセシビリティの目的において本当に役立ちます。
See the Pen attr() in CSS by Ananya Neogi (@ananyaneogi) on CodePen.
3. backface-visibility
要素を裏返したときに、背面を表示するかしないかを設定します。
フリップボードを裏返すときの動作をイメージしてください。
See the Pen CSS Card Flip On Hover by Ananya Neogi (@ananyaneogi) on CodePen.
4. conic-gradient
グラデーションは素晴らしいものです。
あなたはlinear-gradientでグラデーション背景を作れることに慣れているかもしれません。
しかし、conic-gradientを使ってCSSだけで円グラフを作成できることはご存じでしょうか？
See the Pen Pie Chart With Pure CSS by Ananya Neogi (@ananyaneogi) on CodePen.
conic-gradientsをより理解するためには、MDNを参照してください。
5. filter
CSSフィルタが実装された今、もうPhotoshopのフィルタを使う必要はありません。
フィルタ機能は、入力された画像の見た目に変更を適用します。
これにはblur、brightness、contrast、grayscale、hue-rotate、opacity、invert、sepia、saturate、drop-shadowなど、多様なエフェクトがあります。
See the Pen CSS Filters by Ananya Neogi (@ananyaneogi) on CodePen.
drop-shadowフィルタは非常に素晴らしいです。
入力画像に影を付けることができます。
See the Pen CSS Drop Shadow by Ananya Neogi (@ananyaneogi) on CodePen.
6. mix-blend-mode
このCSSプロパティは、子要素のコンテンツが要素の背景、もしくは親要素とどのように合成されるかを指定します。
See the Pen CSS Blend Modes by Ananya Neogi (@ananyaneogi) on CodePen.
驚くべきことに、mix-blend-modeとfilterを、画像やテキストと組み合わせて使うことが可能です。
詳しくはMDNで学んでください。
7. first-letter
本や雑誌を見るときに好きなもののひとつが、美しいドロップキャップです。
first-letter疑似要素を使うことで再現可能です。
See the Pen CSS Drop-Cap by Ananya Neogi (@ananyaneogi) on CodePen.
8. shape-outside
このCSSプロパティは、単純な長方形のボックスではなく、複雑なオブジェクトに隣接するコンテンツの折り返しをカスタマイズする方法を提供します。
See the Pen CSS Shape-Outside by Ananya Neogi (@ananyaneogi) on CodePen.
CodePenを別タブで開き、ウィンドウの幅を変更してみてください。
テキストが画像の縁を囲むようになっています。
↑の例は正直わかりにくいので、↓とかを見るといいかもしれない。
See the Pen CSS Shapes demo#1 by wakamsha (@wakamsha) on CodePen.
9. writing-mode
このCSSプロパティは、テキストを水平にするか垂直にするかを指定することができます。
以下の値を設定することができます。
・horizontal-tb：テキストは左から右へ、上から下へ表示されます。
・vertical-lr：テキストは左から右へ、上から下へ表示されます。
・vertical-rl：テキストは右から左へ、上から下へ表示されます。
次の例を見てください。
説明が間違ってるっぽい？
horizontal-tbは普通の横書き、vertical-lrは縦書きで左から右、vertical-rlは縦書きで右から左。
10. Adding gradient to text
-webkit-background-clip: textと-webkit-text-fill-color: transparentを組み合わせることで、テキストグラデーションを実現することができます。
See the Pen Gradient Text with CSS by Ananya Neogi (@ananyaneogi) on CodePen.
11. Smooth scroll snap
scroll-snap-typeプロパティで、スクロールのスナップ地点を設定することができます。
この例では、垂直方向スクロールをmandatoryに指定しています。
MDNでは水平方向や、proximityなど他の使用法も解説されています。
See the Pen Scroll Snap with CSS by Ananya Neogi (@ananyaneogi) on CodePen.
以上は、CSSができることのほんの一部にすぎません。
可能性は無限大！
コメント欄
「ありがとうアナニャ！JavaScriptなしでscroll-snap-typeができるとは思ってなかったよ。」
「box-decoration-break初めて知った。これはクール！」
「ドロップシャドウやフィルタをPhotoshop使わずにできるのって超便利！」
「filterは重いから使いすぎ注意な。」「そこまで重いってほどでもないよ」「サンキューうな！」
「AndroidのChromeでmix-blend-modeが動かなかったでござる。」「CSSは未対応プロパティでもエラーを出さないので、フォールバックスタイルを書くといいよ。」
「接頭辞を付ければ、全ての例はSafariでも動くよ。conic-gradientとscroll-snap以外はFirefoxでも動くよ。」
「CSSだけでモーダルとか、CSSだけでバリデーションとか。」「これはすごい！」
感想
conic-gradientは、いまだChromeとSafariしか対応していません。
このようなブラウザシェアの低いCSSプロパティは、@supportsを使って代替表示を設定しましょう。
@supportsはシェア1割を占めているIEに対応してないんだけど、まあIEに人権なんてないからいいよね。
mix-blend-modeはすごすぎてわけがわからないです。
レンダリング処理が重いので、かつては描画にかかる時間差を使ったサイドチャネル攻撃もあったくらいです。
こんなところまでCSSが面倒を見るべきことなのかという気がしないでもない。
それにしてもCSSの仕様書が恐ろしく見づらいのはどうにかならんのだろうか。
何がわからんって、何時何処がどのように更新されたのかが全くわからん。
GutHub追うとか辛くてやってられんし。
Changelogくれ。