Get best of the week

CSS interessante encontra no novo design do Facebook

Estou curioso. É sempre interessante para mim abrir as ferramentas do desenvolvedor do navegador e entender como é criado qualquer site que eu olhei. Este material é minha primeira história sobre essa pesquisa. O fato é que encontrei alguns exemplos interessantes de usar CSS (pelo menos eles pareciam interessantes para mim) sobre os quais eu queria falar. Estamos falando de descobertas CSS no novo design do Facebook. Esse design apareceu relativamente recentemente. Eu o vi algumas semanas atrás. No começo, todos os elementos da interface pareciam extraordinariamente grandes para mim, mas me acostumei a eles em apenas alguns dias. Aqui vou falar sobre tudo o que achei interessante no design do Facebook.





Usando gráficos SVG em avatares



Os

gráficos SVG do Avatars são usados ​​para imagens de avatar, como fotos de perfil, fotos nas páginas dos usuários ou em grupos.

Aqui está o código HTML:

<svg role="none" style="height: 36px; width: 36px;">
  <mask id="avatar">
    <circle cx="18" cy="18" fill="white" r="18"></circle>
  </mask>
  <g mask="url(#avatar)">
    <image x="0" y="0" height="100%" preserveAspectRatio="xMidYMid slice" width="100%" xlink:href="avatar.jpg" style="height: 36px; width: 36px;"></image>
    <circle cx="18" cy="18" r="18"></circle>
  </g>
</svg>

Quando vi isso, me perguntei por que essa abordagem era usada. Eu tenho várias respostas para esta pergunta:

  • O avatar deve ter uma moldura interna com uma cor preta translúcida (10%). Isso faz com que os avatares leves pareçam imagens redondas. Além disso, mesmo que sejam imagens completamente brancas.
  • Você <img>não pode adicionar uma sombra interna ( box-shadow) a um elemento HTML usando uma palavra-chave inset. SVG é usado para resolver este problema.
  • Para que a imagem tenha uma forma redonda, <mask>são usados ​​os elementos SVG <image>.

Como eu disse, os quadros dentro do avatar são muito úteis para imagens brilhantes. Aqui está um layout que ilustra essa ideia.


Avatares O

quadro interno é configurado usando o seguinte CSS:

circle,
rect {
  stroke-width: 2;
  stroke: rgba(0, 0, 0, 0.1);
  fill: none;
}

Se a imagem for quadrada, a figura é usada rect:

<svg role="none" style="height: 36px; width: 36px;">
  <mask id="avatar">
    <rect cy="18" fill="white" height="36" rx="8" ry="8" width="36" x="0" y="0"></rect>
  </mask>
  <g mask="url(#avatar)">
    <image x="0" y="0" height="100%" preserveAspectRatio="xMidYMid slice" width="100%" xlink:href="avatar.jpg" style="height: 36px; width: 36px;"></image>
    <rect cy="18" fill="white" height="36" rx="8" ry="8" width="36" x="0" y="0"></rect>
  </g>
</svg>

Curiosamente, na página principal do feed, os avatares são criados usando a tag <img>e o elemento <div>usado para configurar o quadro translúcido interno:

<div class="avatar-wrapper>
    <img class="avatar" width="40" height="40" src="avatar.jpg" width="40" alt="">
    <div class="avatar-outline"></div>
</div>

Aqui estão os estilos para este HTML:

.avatar-wrapper {
    position: relative;
}

.avatar {
    display: block;
    border-radius: 50%;
}

.avatar-outline {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
    border-radius: 50%;
}

Desde SVG em avatares é usada apenas em alguns lugares, eu posso assumir que a razão para o uso <img>e <div>associado com um tamanho de página. Se gráficos SVG fossem usados ​​em avatares da fita, isso levaria a um aumento na quantidade de dados carregados ao rolar pela fita.

Use como separadores de elementos <div>, não margens externas


Não encontrei aqueles momentos em que as imagens GIF eram usadas como separadores dos elementos da página da web. Mas então eu vi algo parecido com essa técnica. Acho que sim, o que estou falando pode ser chamado de separadores de div.


<div> Elementos usados ​​como separadores

Deixe-me esclarecer um pouco a figura acima. Este é um fragmento da seção que contém solicitações de amizade que aparecem na página inicial. Diante de nós é uma certa grade com informações sobre as pessoas. Essa grade deve ter um recuo externo esquerdo. Eu costumo acrescentar aos elementos tais como a fronteira:margin-left: 16px. Mas o Facebook fez a mesma coisa usando o elemento<div>que separa a grade da borda do elemento do contêiner.

Por que os designers fizeram isso? Eu tenho alguns palpites:

  • Talvez o recuo dos elementos do contêiner não possa ser adicionado ao sistema de design que eles criaram?
  • Talvez este seja um componente React que possa ser usado em qualquer lugar, definindo sua largura?

Por que o recuo não é usado aqui? Quanto a mim, um site CSS (cerca de 100 mil linhas), cheio de classes auxiliares, é capaz de acomodar outra classe que permite ajustar a indentação do elemento desejado.

Usando filtros CSS



Ícones criados usando os elementos <img> e <svg>

Dê uma olhada nesses quatro ícones. Um ícone com um sinal de adição e um ícone de seta são criados usando um elemento<img>. E ícones e notificações do messenger - usando elementos SVG. As razões para essa mistura de tecnologias são desconhecidas para mim.

Se você clicar no último ícone, a seta será pintada novamente em azul. "Como a cor muda aqui, porque a flecha é uma imagem comum?", Perguntei-me. Talvez quando você passa o mouse sobre o ícone, uma imagem simplesmente muda para outra? Não, não é bem assim. Descobri que um filtro CSS é usado para alterar a cor do ícone no ícone:

.icon {
    filter: invert(39%) sepia(57%) saturate(200%) saturate(200%) saturate(200%) saturate(200%) saturate(200%) saturate(147.75%) hue-rotate(202deg) brightness(97%) contrast(96%)
}

E esse, aliás, é o código de produção do facebook.com. Esse código parece muito estranho para mim. É difícil substituir esse elemento <img>por uma imagem SVG e apenas alterar a cor especificada pelo atributo fill?

O mesmo é usado ao criar um ícone para contas verificadas.


Ícone da conta verificada

Algo semelhante se aplica aos links do perfil do usuário:

.icon {
    filter: invert(59%) sepia(11%) saturate(200%) saturate(135%) hue-rotate(176deg) brightness(96%) contrast(94%);
}

Isto é o que parece


Links no perfil do usuário

Se você estiver interessado em aprender a usar um filtro CSS para colorir uma imagem em preto com qualquer cor, consulte esta resposta no Stack Overflow. Lá você pode encontrar uma ferramenta para criar filtros CSS. Além disso, dê uma olhada neste tweet.

Usando imagens para criar sombras



Uma sombra criada usando a imagem de fundo

O título da janela principal tem uma sombra. Pode-se supor que ele foi criado usando a propriedade CSSbox-shadow. Mas na verdade não é. Aqui usamos um elemento<div>com uma imagem de fundo que se repete ao longo do eixox.

Carreguei a imagem usada aqui, o que me permite dar uma olhada mais de perto.


A imagem usada para criar a sombra

Esta é uma imagem de 2x14 pixels que, para criar o efeito de sombra, é repetida várias vezes. Não apenas a imagem, mas também um elemento especial está envolvido na formação do efeito de sombra<div>. Por que a sombra foi criada dessa maneira?

Um funcionário do Facebook disse que a imagem aqui foi usada por razões de desempenho. É interessante que uma sombra tão pequena possa levar a problemas com a velocidade do site.

Quando perguntado sobre como esse problema foi identificado, ele disse que a sombra causou uma queda séria no desempenho e efeitos visuais desagradáveis. Portanto, ao rolar por uma página na qual havia muitos vídeos, algumas partes da página apareceram e desapareceram.

Bem, se a sombra causar tais problemas - não vejo nada de errado em substituí-lo pela imagem correspondente.

Uso generalizado de variáveis ​​CSS


Adoro o fato de os designers do Facebook usarem variáveis ​​CSS. A julgar pelo que vi, :rootmais de 320 variáveis ​​foram adicionadas ao elemento . Essas variáveis ​​são usadas nos temas claros e escuros do site.

Quando um tema sombrio é ativado, uma classe é adicionada ao elemento HTML __fb-dark-mode. Em seguida, substitui todas as variáveis ​​declaradas no elemento :root:

:root {
    /*    */
    -fds-active-icon:  #3578E5;
    --fds-attachment-footer-background:  #F2F3F5;
    --fds-blue-05:  #ECF3FF;
    --fds-blue-30:  #AAC9FF;
    --fds-blue-40:  #77A7FF;
}

.__fb-dark-mode:root, .__fb-dark-mode {
    /*     */
    --fds-active-icon:  black;
    --fds-attachment-footer-background:  black;
    --fds-blue-05:  black;
    --fds-blue-30:  black;
    --fds-blue-40:  black;
}

Aqui está um vídeo que demonstra o que acontece depois de mudar para um tópico obscuro. Eu aconselho você a assistir no modo de tela cheia.

Usando a propriedade CSS line-clamp para aparar texto de múltiplas linhas



As assinaturas usam o corte de texto em

várias linhas.A barra lateral possui uma lista de links - como os que levam ao perfil do usuário, aos materiais mais recentes, à seção Memórias. Notei que o recorte de texto multilinha é usado aqui:

.element {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

Esses são estilos internos, que, além disso, variam de acordo com o navegador.


Código de corte de texto no Chrome e Firefox

Este recurso CSS possui um suporte bastante bom ao navegador. O CanIUse relata que todos os principais navegadores oferecem suporte a essa propriedade (embora com um prefixo). Detalhes sobre essa propriedade podem ser encontrados aqui .

Usando uma div para criar elementos que respondem à passagem do mouse


Normalmente, os efeitos que acompanham o mouse sobre um elemento são criados usando CSS. Por exemplo, se um determinado botão precisar ser pintado com um tom especial de cinza quando você passar o mouse sobre ele, faça o seguinte:

.element:hover {
    background: #ccc;
}

No entanto, parece que em sites grandes como o Facebook, essa abordagem é impraticável. No processo de explorar o site, chamei a atenção para um elemento que é exibido apenas quando você passa o mouse sobre ele (vamos chamá-lo de "elemento de foco"). Esta é a sua principal tarefa. Aqui está o estilo dele:

.hover-div {
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    pointer-events: none;
    border-radius: 6px;
    inset: 4px 0px;
    background-color: var(--hover-overlay);
    transition-property: opacity;
    transition-timing-function: var(--fds-animation-fade-out);
    cursor: pointer;
}

O valor da propriedade opacitydesse elemento é alterado pelo JavaScript de 0para 1. Eu experimentei e descobri que é usado para muitos componentes. Abaixo está um conjunto de capturas de tela demonstrando o uso desse elemento.


Usando um elemento de foco,

eu gosto da uniformidade e simplicidade fornecidas usando o mesmo efeito para vários elementos. Se isso significa alguma coisa, significa que a linguagem de design usada no site é uniforme e que o sistema foi cuidadosamente projetado. Bom trabalho, Facebook!

Usando a propriedade inset


Estamos falando de um registro abreviado dos valores das propriedades, implicando um impacto nas partes superior, direita, inferior e esquerda de um elemento. Você pode usar a propriedade da insetseguinte maneira:

.element {
    inset: 4px 0;
    /*   : top: 4px, bottom: 4px, left: 0, right: 0 */
}

A propriedade está insetconfigurada para os elementos de foco acima associados a alguns outros elementos. O estilo é incorporado em HTML. Percebi sua aplicação ao componente mostrado abaixo.


As áreas afetadas pela propriedade inserida são destacadas em azul.Quando

este material é gravado, a propriedadeinset suporta apenas o Firefox 66+.

Atributo Dir = "auto" e propriedades booleanas de CSS 


Em sites multilíngues como o Facebook, às vezes é difícil prever exatamente qual será o conteúdo. Por exemplo, o nome de utilizador num componente tem um atributo dir=«auto». Isso significa que a direção do texto dependerá do idioma. Digamos, ao usar o inglês, o texto será exibido da esquerda para a direita e ao usar o árabe - da direita para a esquerda.

Além disso, deve-se notar que há um estilo interno que altera a direção do texto (há uma sensação de que o atributo dir=«auto»não é suficiente). Aqui está o que parece:

<div dir="auto" style="text-align: start;">محتوى بالعربية</div>

Observe que um estilo foi adicionado ao elemento text-align: start. Isso usa uma propriedade lógica do CSS. O estilo, para os layouts LTR, será semelhante text-align: right.

Se você está interessado nos recursos da estilização RTL - dê uma olhada neste meu material.

Fundo dinâmico, dependendo da foto principal



Fundo dependendo da foto principal

Você notou que um gradiente e uma cor semelhantes à cor da foto principal são usados ​​para criar o fundo? Esse fundo é formado dinamicamente, é baseado na cor da foto. Como isso é feito?

▍1 Obtendo cores dominantes


Primeiro, você precisa obter a cor dominante (usada com mais frequência do que outras) da foto principal. Depois que essa cor é encontrada, uma versão reduzida da foto principal é criada, pintada somente com essa cor.


Encontrando uma cor dominante

§ 2 Adicionando um fundo de cor dominante



Segundo plano usando a cor dominante

encontrada O plano de fundo usa a cor dominante encontrada anteriormente. Para tornar mais claro, destaquei a imagem exibida na página como a foto principal com uma moldura branca.

▍3 Adicionando um gradiente sobre o fundo


Para adicionar um gradiente ao fundo, use o seguinte código CSS:

.element {
    background-image: linear-gradient(to top, #FFFFFF, rgb(255, 255, 255), rgba(255,255,255,0.7), rgba(255,255,255,0.4), rgba(255,255,255,0));
}


Adicionando um gradiente (cores claras são usadas no design)

No caso de cores escuras serem usadas no design, o gradiente reverso é usado:

.element {
    background-image: linear-gradient(to top, #000, rgb(0, 0, 0), rgba(0,0,0,0.7), rgba(0,0,0,0.4), rgba(0,0,0,0));
}


Adicionando um gradiente (cores escuras são usadas no design)

Você pode usar esta ferramentapara encontrar a cor dominante da imagem.

Sombras múltiplas



Sombras

Gostei da abordagem que os desenvolvedores do Facebook usavam para criar sombras para vários elementos, como menus suspensos. Essa sombra cria a ilusão de volume, que é muito mais realista do que a ilusão alcançável com uma sombra regular.


Menus suspensos

Aqui está o CSS:

.element {
    box-shadow: 0 12px 28px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

Aqui você pode ter uma pergunta sobre por que aqui é criada uma sombra embutida de cor branca com uma transparência de 50%? O fato é que isso é uma sombra para o regime sombrio. Abaixo está um fragmento ampliado da interface na qual essa sombra é usada.


Um fragmento ampliado da interface com uma sombra inserida.Eu

gosto dessa solução razoável.

Itens vazios para grades flexbox


Notei que todos os layouts de grade no site são baseados em flexbox. Aqui está um exemplo de um layout que encontrei na seção de fotos do usuário.


Elementos vazios no layout da grade

Aqui está o CSS:

.wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-items: space-between;
}

.item {
    width: 205px;
}

Tudo parece interessante, certo? Usar um valor space-betweenpara ajustar o posicionamento dos elementos é arriscado. O layout não parecerá correto se, por exemplo, houver apenas três fotos. Um exemplo desse layout é mostrado abaixo.


O perigo de usar o espaço intermediário

Como a equipe do Facebook lidou com esse problema? Muito simples: existem quatro elementos vazios<div>, cuja largura é igual à largura da foto. Aqui está o HTML para esta solução:

<div class="wrapper">
    <div class="item"><a href="#"><img src="photo.jpg"></a></div>
    <div class="item"><a href="#"><img src="photo.jpg"></a></div>
    <div class="item"><a href="#"><img src="photo.jpg"></a></div>
    <div class="item"><a href="#"><img src="photo.jpg"></a></div>
    <div class="empty"></div>
    <div class="empty"></div>
    <div class="empty"></div>
    <div class="empty"></div>
</div>

Com essa abordagem, esses elementos vazios <div>desempenham o papel de elementos artificiais. Eles ajudam a manter a mesma distância entre os elementos.

Usando consultas de mídia vertical


Raramente vejo consultas verticais da mídia, por assim dizer, na natureza. Gosto do fato de os desenvolvedores do Facebook usarem essa consulta para reduzir a largura do feed de notícias na página inicial:

@media (min-height: 700px) {
    .element {
        width: 584px;
    }
}

Sumário


Isso é tudo. Eu estava muito interessado em trabalhar neste artigo. Explorando o design do site do Facebook, aprendi muito. Espero que você também tenha encontrado na minha história algo que lhe pareceu novo e interessante.

Queridos leitores! Você já encontrou algo interessante analisando o código dos sites que visita?

More articles:


All Articles