Posted at

CSSだけでできるあんなことこんなこと

以下は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のフィルタを使う必要はありません。

フィルタ機能は、入力された画像の見た目に変更を適用します。

これにはblurbrightnesscontrastgrayscalehue-rotateopacityinvertsepiasaturatedrop-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-modefilterを、画像やテキストと組み合わせて使うことが可能です。

詳しくは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-gradientscroll-snap以外はFirefoxでも動くよ。」

CSSだけでモーダルとか、CSSだけでバリデーションとか。」「これはすごい!」


感想

conic-gradientは、いまだChromeとSafariしか対応していません。

このようなブラウザシェアの低いCSSプロパティは、@supportsを使って代替表示を設定しましょう。

@supportsはシェア1割を占めているIEに対応してないんだけど、まあIEに人権なんてないからいいよね。

mix-blend-modeはすごすぎてわけがわからないです。

レンダリング処理が重いので、かつては描画にかかる時間差を使ったサイドチャネル攻撃もあったくらいです。

こんなところまでCSSが面倒を見るべきことなのかという気がしないでもない。

それにしてもCSSの仕様書が恐ろしく見づらいのはどうにかならんのだろうか。

何がわからんって、何時何処がどのように更新されたのかが全くわからん。

GutHub追うとか辛くてやってられんし。

Changelogくれ。