Ce que j’ai appris du CSS du nouveau design de Facebook

• Utilisation de SVG pour l’avatar afin de gérer les ombres internes

• Utilisation de div d’espacement au lieu de margin

• Filtres CSS sur les images

• Utilisation d’une image d’ombre (2x14 px) au lieu de box-shadow

• Utilisation de nombreuses variables CSS

• Utilisation de Line Clamp pour limiter le nombre de lignes sur plusieurs lignes

• Utilisation de .hover-div au lieu de :hover

• Génération d’un arrière-plan en dégradé dynamique à partir de la couleur principale

• Ombres de boîte multiples

[sduck4]

On dirait que vous étudiez aussi beaucoup le design ces derniers temps. Le design de GeekNews s’améliore de plus en plus.

Aujourd’hui, j’ai l’impression que la police a changé.

[xguru]

Ce n’est pas vraiment au point de parler d’étude… haha

J’essayais d’éviter autant que possible les webfonts, mais comme les polices coréennes sous Windows étaient vraiment trop peu esthétiques, j’ai fini par céder et je suis passé à Noto Sans.

[xguru]

Il y a des choix qui laissent perplexe, mais c’est intéressant pour piocher des idées à droite à gauche.

Il faudrait que j’essaie d’appliquer line-clamp.

[xguru]

Pour le traitement d’images, j’avais besoin de n’afficher qu’un certain nombre de lignes, et line-clamp est parfait pour ça. J’aime beaucoup.

Ça ne fonctionne pas tout seul, il faut l’utiliser avec overflow: hidden.

display: -webkit-box;

-webkit-line-clamp: 3;

overflow: hidden;