Facebookの新デザインのCSSからわかったこと

• 内側のシャドウ処理のためにAvatarにSVGを使用

• Marginの代わりにスペーサーdivを使用

• 画像にCSSフィルターを使用

• box-shadow の代わりにシャドウ画像（2x14 px）を使用

• 多くのCSS変数を使用

• 複数行の行数制限のためにLine Clampを使用

• :hover の代わりに .hover-div を使用

• 主要色で動的なグラデーション背景を生成

• 複数のボックスシャドウ

[sduck4]

最近はデザイン面もかなり勉強されているようですね。GeekNews のデザインがだんだん改善されていますね。

今日はフォントが変わった気がします。

[xguru]

勉強するほどではないですが……（笑）

できるだけウェブフォントは使わないようにしていたのですが、Windows環境では韓国語フォントがあまりにもきれいではなく、結局折れて Noto Sans に乗り換えました。

[xguru]

なぜこうしたのかと思うものもありますが、あれこれ参考にするにはよさそうですね。

Line Clamp は一度適用してみるべきかも。

[xguru]

画像処理のために特定の行数だけ表示したい場面があったのですが、Line Clamp がまさにぴったりですね。気に入りました。

そのままでは動作せず、overflow: hidden と一緒に使う必要があります。

display: -webkit-box;

-webkit-line-clamp: 3;

overflow: hidden;