Aqui está um lindo site: é um exemplar da família sempre tão adorável do Mass-Driver MD Nicromo. Há uma tonelada de animações e gráficos bacanas explicando todos os recursos internos…
Se você está se perguntando como essas animações funcionam, na verdade elas têm um estilo <video>
elementos.
Também há muitos toques de design gráfico excelentes, como a forma como as letras abaixo desaparecem e desaparecem…
Esse pouco de CSS é legal. Isso garante que cada <h1>
permanece em uma única linha com white-space
e, em seguida, define um estouro oculto neles para que o rumo desapareça. O desbotamento é cortesia de um gradiente linear que incorpora transparência. O gradiente é na verdade um mask-image
nesse caso. Esse é um bom lembrete de que gradientes CSS são imagens geradas pelo navegador.
h1 { white-space: nowrap; overflow: hidden; -webkit-mask-image: linear-gradient(to right, black 75%, transparent);
}
Na imagem acima você também pode ver como o Mass-Driver está anunciando os recursos OpenType da fonte. São coisas como frações ou letras alternativas que dão superpoderes ao seu texto. Por padrão, essas seções mostram qual é o recurso, mas quando você passa o mouse sobre elas, elas fazem o seguinte:
.element { font-feature-setting: unset;
}
acho que nunca usei unset
antes, mas este é um ótimo lugar para usá-lo - mostre a aparência do recurso antecipadamente e, quando você passar o mouse, mostre qual é o padrão. Coisas inteligentes.
Mas a parte que me chamou a atenção - além da tipografia incrível - é o fundo. É composto de duas partes: uma animação brilhante que faz a página parecer papel e o gradiente empilhado sobre ela. E depois de pesquisar no DevTools, percebi que o efeito cintilante é uma imagem PNG onde o background-position
propriedade move a imagem ligeiramente para animá-la como um GIF. É difícil ver nas fotos, então aqui está uma demonstração imitadora que fiz com a opacidade desativada para facilitar a visualização:
Vê aquela adorável imprecisão? Dá ao fundo uma espécie de… textura… que eu não via há muito tempo, talvez desde 2008, quando todo mundo estava tentando fazer os botões parecerem botões analógicos reais na web. Geoff abordou o mesmo tipo de técnica há algum tempo, onde você pode se aprofundar em como funciona.
A outra parte do design deste site é o gradiente de fundo. Como isso é tão suave? Bem, Rutherford Craze, o designer por trás deste engenhoso web design, fez um tópico explicando como ele fez esse efeito funcionar no navegador. Ele criou uma ferramenta de gradientes que permite criar um efeito semelhante:
Rutherford escreve:
Os gradientes CSS convencionais traçam uma linha reta através do espaço de cores, interpolando diretamente da cor inicial até a cor final. Esta ferramenta aplica os princípios das curvas bézier, base das fontes digitais, para esta operação.
Ao introduzir “pontos de controle” ao longo do gradiente, você pode controlar a interpolação com mais precisão e produzir um resultado final mais suave. A ferramenta então testa esse ‘gradiente bézier’ para produzir um gradiente linear com o qual você pode trabalhar em CSS.
O que Rutherford está descrevendo acima é o que é conhecido como “Zona Morta Cinzenta” de gradientes, onde muitas vezes em um gradiente linear há essa cor cinza que se forma no meio.
Outro pequeno detalhe que quase não percebi foi o navegação fixa: quando você carrega o site pela primeira vez, você vê apenas o logotipo e nada mais, mas ao rolar você verá a navegação e ela trava no lugar:
Observe como o posicionamento fixo também é usado posteriormente para demonstrar os glifos da fonte.
CSS torna esse tipo de coisa muito fácil. Declare o posicionamento fixo no elemento e, em seguida, compense a aderência se o elemento começar a aderir em um determinado local.
.sticky-thing { position: sticky; top: 75px;
}
Como eles querem que você se concentre primeiro nas letras e não em todo o resto da IU, faz muito sentido deixar a navegação de lado, apenas quando você precisar dela. E isso faz com que o design geral pareça incrivelmente focado e direto, talvez nem valha a pena comentar, mas quando a maioria dos sites está tão cheia de distrações, acho que vale a pena celebrar sites silenciosos como esses.
- Publicidade
- Todos os Produtos
- animação
- por aí
- Pouco
- Preto
- navegador
- luta
- apanhados
- morto
- Design
- Designer
- detalhe
- digital
- família
- Característica
- Funcionalidades
- Primeiro nome
- Foco
- cheio
- gif
- Bom estado, com sinais de uso
- cinza
- ótimo
- Como funciona o dobrador de carta de canal
- HTTPS
- imagem
- incorpora
- IT
- Line
- carregar
- Locks
- logotipo
- longo
- movimentos
- Navegação
- Arrumado
- compensar
- Outros
- Papel
- fotografia
- propriedade
- DESCANSO
- sentido
- pequeno
- smart
- So
- Espaço
- Spot
- começo
- tempo
- Tom
- topo
- Transparência
- ui
- web
- Site
- sites
- Atividades:
- trabalho
- Equivalente há