Introdução
Neste laboratório, aprenderemos como criar um efeito de texto "gravado" ou entalhado usando CSS. Este efeito pode adicionar um toque único e estiloso aos seus designs web, e é surpreendentemente fácil de alcançar. Ao ajustar a sombra, o fundo e a cor do texto, podemos criar a ilusão de texto esculpido no fundo. Junte-se a nós enquanto exploramos esta técnica divertida e criativa!
Texto Gravado (Etched Text)
index.html e style.css já foram fornecidos na VM.
Para criar um efeito "gravado" ou entalhado para texto em um fundo, use as seguintes propriedades CSS:
.etched-text {
text-shadow: 0 2px white;
font-size: 1.5rem;
font-weight: bold;
color: #b8bec5;
}
A propriedade text-shadow cria uma sombra branca deslocada em 0px horizontalmente e 2px verticalmente da posição de origem. Certifique-se de que o fundo seja mais escuro que a sombra para que o efeito funcione. Adicionalmente, a cor do texto deve ser ligeiramente desbotada para que pareça ter sido esculpida no fundo. Finalmente, aplique a classe etched-text ao elemento HTML desejado, como um parágrafo, para obter o efeito.
<p class="etched-text">Eu pareço gravado no fundo.</p>
Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, você pode atualizar a aba Web 8080 para visualizar a página web.
Resumo
Parabéns! Você concluiu o laboratório de Texto Gravado (Etched Text). Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.