As Folhas de Estilo em Cascata (CSS) percorreram um longo caminho desde a sua concepção. Graças à contínua evolução e refinamento da linguagem, existem funcionalidades possíveis apenas com CSS que você talvez desconheça.
Um dos avanços mais notáveis no CSS é o surgimento e o aprimoramento das funções CSS, que expandiram significativamente as capacidades e o poder de estilização do conteúdo da web.
O que é o efeito máquina de escrever?
O efeito máquina de escrever é uma técnica de animação de texto que simula o processo de revelação progressiva do conteúdo, replicando o ato de digitar enquanto ele se desenrola diante dos olhos do espectador. Este efeito nos remete às máquinas de escrever antigas, aos primeiros terminais de computador ou às interfaces de linha de comando (CLIs).
O aparecimento gradual do texto adiciona um elemento de suspense e intriga, incentivando o público a prestar atenção à mensagem à medida que ela se desvela.
Como funciona a função CSS `steps()`
As funções em CSS introduzem um nível de flexibilidade que antes era difícil de alcançar apenas com estilos estáticos. A função `steps()` é uma função muito utilizada em animações CSS. Ela faz com que as animações pareçam avançar em etapas distintas e discretas, em vez de fazer uma transição suave.
`steps()` é uma função de temporização de animação que aceita dois parâmetros. O primeiro parâmetro indica o número de etapas que você deseja que sua animação execute. O segundo parâmetro define o comportamento de cada etapa. A sintaxe para a função `steps()` é semelhante a esta:
animation-timing-function: steps(n, direção)
No bloco de código acima, a função `steps()` possui dois parâmetros: `n` e `direção`. O parâmetro `direção` pode ser `start` (início) ou `end` (fim).
Definir a direção como `start` garante que a primeira etapa seja concluída assim que a animação iniciar. Já definir a direção como `end` executará a última etapa quando a animação terminar. Para ilustrar a importância da função `steps()`, veja o seguinte código HTML:
<div class="container"> <div></div> </div>
O bloco de código acima define um `div` container com um `div` filho. Se você quiser que o `div` filho deslize pela tela, utilize animações CSS como esta:
.container {
background-color: blue;
}
div:not(.container) {
background-color: red;
width: 88px;
height: 88px;
animation: movebox 4s infinite;
}
@keyframes movebox {
100% {
transform: translateX(100vw);
}
}
O bloco de código acima usa a regra `@keyframes` para definir uma animação chamada `movebox`. Esta animação é então aplicada ao `div` filho, fazendo com que ele se mova suavemente pela tela em um loop infinito.
Se você não gosta da animação suave e quer obter um efeito “instável”, você pode usar a função `steps()` da seguinte maneira:
div:not(.container){
background-color: red;
width: 88px;
height: 88px;
animation: movebox 4s infinite;
animation-timing-function: steps(10, end);
}
Como você pode ver na animação abaixo, ao incorporar a função `steps()` com um valor de parâmetro 10, o `div` filho será animado em etapas, em vez de uma animação suave. Quanto maior o número de etapas, menos instável sua animação parecerá.
No exemplo acima, o parâmetro `direção` é fornecido. No entanto, se você omitir a direção, o navegador usará `end` como o valor padrão.
Criando o efeito de máquina de escrever
Agora que você entende como funciona a função `steps()`, é hora de aplicar tudo o que aprendeu. Crie uma nova pasta e dê a ela um nome adequado. Dentro dessa pasta, adicione um arquivo `index.htm` para a marcação e um arquivo `style.css` para o estilo.
No arquivo `index.htm`, adicione o seguinte código padrão:
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Documento</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="text">
Lorem ipsum dolor sit amet consectetur
adipisicing elit. Reiciendis, tempore!
</div>
</div>
</body>
</html>
O bloco de código acima define a marcação para um site HTML simples. Há um `div` container que contém outro `div` com algum texto fictício.
Animando o Texto
Abra o arquivo `style.css` e defina a largura do `div` container para caber no conteúdo.
.container{
width: fit-content;
}
Em seguida, usando a regra `@keyframes`, defina uma animação que controle como a animação progride ao longo do tempo. Defina a largura como `0%` em 0%. Em 100%, defina a largura para `100%` desta forma:
@keyframes type-text {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
Agora, selecione o elemento com a classe `text` e defina a propriedade `overflow` como `hidden`. Isso garantirá que o texto permaneça oculto até que o efeito de digitação seja iniciado. Depois disso, certifique-se de que o texto permaneça em uma linha, definindo a propriedade `white-space` como `nowrap`. Dê à classe `text` uma fonte monoespaçada e adicione uma borda vertical verde à direita do texto.
Essa borda dará a aparência de um cursor. Defina o tamanho da fonte apropriado e a propriedade de animação para `type-text`. Por fim, adicione a função `steps()` à função de tempo da animação.
.text {
overflow: hidden;
white-space: nowrap;
font-family: "Courier New", Courier, monospace;
border-right: solid 10px green;
font-size: 23px;
animation: type-text forwards 4s;
animation-timing-function: steps(40);
}
Ao executar o código no navegador, você deverá ver o seguinte:
Se quiser um efeito de digitação mais longo, você pode ajustar a duração da animação e o número de etapas especificadas na função `steps()`.
Dando vida ao cursor
O efeito de máquina de escrever está quase completo, mas falta um recurso: o cursor piscante. Lembre-se que, no último bloco de código, uma borda direita foi definida no texto para servir como cursor. Você pode adicionar uma animação a este cursor usando a regra `@keyframes`:
@keyframes cursor-blink {
0% {
border-color: transparent;
}
100% {
border-color: green;
}
}
Após definir a animação personalizada, adicione o nome da animação à propriedade `animation` na classe `text` e defina a duração para 0,6 segundos.
.text{
animation: type-text forwards 4s,
cursor-blink .6s infinite;
}
Agora, ao executar o código, você verá um cursor piscando.
O poder das funções CSS
As funções CSS revolucionaram a forma como os sites são construídos, oferecendo um conjunto de ferramentas notável para você, como desenvolvedor. Essas funções versáteis permitem estilos e interações dinâmicas que antes eram exclusivas de linguagens de script complexas.
De manipulações de cores a layouts responsivos, animações e transformações criativas, as funções CSS expandiram as possibilidades do design web. Com funções como `calc()` para cálculos flexíveis, `linear-gradient()` para fundos impressionantes e `translate()` para animações cativantes, você pode criar experiências de usuário visualmente atraentes e envolventes.