Cascading Style Sheets (CSS) já percorreu um longo caminho desde o seu início. Há coisas que são possíveis apenas com CSS que você talvez não conheça, graças à contínua evolução e aprimoramento da linguagem.
MUO VÍDEO DO DIA
ROLE PARA CONTINUAR COM O CONTEÚDO
Um dos avanços mais notáveis em CSS é o surgimento e o refinamento das funções CSS, que expandiram significativamente as capacidades e o poder de estilizar o conteúdo da web.
Qual é o efeito da 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, imitando o ato de digitar à medida que ele se desenrola diante dos olhos do espectador. Este efeito é uma reminiscência das máquinas de escrever antigas, dos primeiros terminais de computador ou das interfaces de linha de comando (CLIs).
O aparecimento gradual do texto acrescenta um elemento de suspense e intriga, incentivando o público a prestar muita atenção ao desenrolar da mensagem.
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 usando apenas estilos estáticos. O passos() function é uma função popular usada em animações CSS. Faz com que as animações pareçam estar avançando em etapas distintas e discretas, em vez de fazerem uma transição suave.
passos() é uma função de temporização de animação que aceita dois parâmetros. O primeiro parâmetro denota 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 o passos() funções fica assim:
animation-timing-function: steps(n, direction)
No bloco de código acima, o passos() função tem dois parâmetros, a saber: n e direção. O direção parâmetro pode ser começar ou fim.
Configurando o direção para começar garante que a primeira etapa seja concluída assim que a animação começar. Considerando que, definir o direção para fim executará a última etapa quando a animação terminar. Para ilustrar a importância do passos() função, dê uma olhada no seguinte código HTML:
<div class="container">
<div></div>
</div>
O bloco de código acima define um recipiente div com um filho div. Se você quiser que o div filho deslize pela tela, use 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 utiliza a regra @keyframes para definir uma animação chamada caixa de movimento. Essa 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 de animação suave e deseja obter um efeito “cortado”, você pode usar o passos() funcionar assim:
div:not(.container){
background-color: red;
width: 88px;
height: 88px;
animation: movebox 4s infinite;
animation-timing-function: steps(10, end);
}
Como você pode ver no GIF abaixo, incorporando o passos() A função com um valor de parâmetro 10 animará o div filho em etapas, em vez de uma animação suave. Quanto maior o número de etapas, menos instável parecerá sua animação.
No exemplo acima, o direção parâmetro é fornecido. No entanto, se você omitir o direçãoo navegador usará fim como o valor padrão para direção.
Criando o efeito de máquina de escrever
Agora que você entende como o passos() função funcionar, é hora de colocar em prática tudo o que você aprendeu. Crie uma nova pasta e dê a ela um nome apropriado. Nessa pasta, adicione um índice.htm arquivo para marcação e um estilo.css arquivo para estilo.
No índice.htm arquivo, adicione o seguinte código padrão:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</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. Existe um recipiente div que contém outro div com algum texto fictício.
Animando o Texto
Abra o estilos.css arquivo e defina a largura do recipiente div para a largura de seu conteúdo.
.container{
width: fit-content;
}
A seguir, usando o @quadros-chave regra, defina uma animação que controle como a animação progride ao longo do tempo. Defina a largura como “0%” em 0%. No 100%defina a largura como “100%” assim:
@keyframes type-text {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
A seguir, selecione o elemento com o nome da classe texto e definir o transbordar propriedade para escondido. Isso garantirá que o texto permaneça oculto enquanto o efeito de digitação não for iniciado. Depois de fazer isso, certifique-se de que o texto permaneça em uma linha, definindo o espaço em branco propriedade para agorarap. Dê o texto classifique uma fonte monoespaçada e adicione uma borda vertical verde à direita do texto.
Esta borda dará a aparência de um cursor. Defina o apropriado tamanho da fonte e a animação propriedade para digite-texto. Por fim, adicione o passos() função para o função de tempo de 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 especificado no passos() função.
Dando vida ao cursor
O efeito da máquina de escrever está quase completo, embora falte um recurso, que é o cursor piscante. Lembre-se de 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 o @quadros-chave governar também.
@keyframes cursor-blink {
0% {
border-color: transparent;
}100% {
border-color: green;
}
}
Após definir a animação personalizada, adicione o nome da animação ao animação propriedade no texto classe 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 kit de ferramentas notável para você como desenvolvedor. Essas funções versáteis permitem estilos e interações dinâmicas que antes eram reservadas para 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 web design. 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.