Lo que aprendí del CSS del nuevo diseño de Facebook

• Uso de SVG en el avatar para aplicar sombra interior

• div espaciadores en lugar de margin

• Filtros CSS en las imágenes

• Imagen de sombra (2x14 px) en lugar de box-shadow

• Uso de muchas variables CSS

• Uso de line-clamp para limitar la cantidad de líneas en texto multilínea

• Uso de .hover-div en lugar de :hover

• Generación de fondo con gradiente dinámico a partir del color principal

• Múltiples sombras de caja

[sduck4]

Parece que últimamente también están estudiando mucho la parte de diseño. El diseño de GeekNews va mejorando cada vez más.

Hoy parece que cambiaron la fuente.

[xguru]

No llega a ser un estudio ni nada... jaja

Había tratado de evitar usar webfonts si era posible, pero como las fuentes en coreano en Windows son demasiado feas, al final me rendí y me cambié a Noto Sans.

[xguru]

Aunque hay cosas que te hacen pensar por qué lo hicieron así, está bueno para tomar varias referencias.

Parece que habría que probar aplicar line-clamp.

[xguru]

Para el procesamiento de imágenes, necesitaba mostrar solo una cantidad específica de líneas, y line-clamp viene perfecto. Me gusta.

No funciona por sí solo; tiene que ir junto con overflow: hidden.

display: -webkit-box;

-webkit-line-clamp: 3;

overflow: hidden;