O que aprendi com o CSS do novo design do Facebook

 (ishadeed.com)
4 pontos por xguru 2020-04-03 | 4 comentários | Compartilhar no WhatsApp

  • Uso de SVG no avatar para aplicar sombra interna

  • div espaçador em vez de margin

  • Filtros CSS em imagens

  • Imagem de sombra (2x14 px) em vez de box-shadow

  • Uso intenso de variáveis CSS

  • Uso de Line Clamp para limitar o número de linhas em textos multilinha

  • Uso de .hover-div em vez de :hover

  • Geração de fundo com gradiente dinâmico usando a cor principal

  • Múltiplos box shadows

Leituras relacionadas

4 comentários

 
sduck4 2020-04-03

Parece que ultimamente vocês têm estudado bastante a parte de design também. O design do GeekNews está melhorando cada vez mais.

Hoje parece que a fonte mudou.
 
xguru 2020-04-03

Não chega a ser estudo nem nada... rsrs

Eu estava tentando evitar usar webfonts sempre que possível, mas as fontes coreanas no ambiente Windows eram feias demais, então no fim acabei cedendo e mudei para Noto Sans.
 
xguru 2020-04-03

Tem coisas que fazem a gente pensar por que foi feito assim, mas é bem legal para usar como referência em vários pontos.

Acho que vale a pena testar Line Clamp.
 
xguru 2020-04-03

Para processamento de imagem, eu precisava de algo que mostrasse apenas um número específico de linhas, e Line Clamp caiu como uma luva. Gostei.

Não funciona sozinho; precisa vir junto com overflow: hidden.

display: -webkit-box;

-webkit-line-clamp: 3;

overflow: hidden;