LabEx
EntrarJunte-se

Criando Efeitos de Texto Gravado com CSS

Beginner

This tutorial is from open-source community. Access the source code

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!

Este é um Lab Guiado, que fornece instruções passo a passo para ajudá-lo a aprender e praticar. Siga as instruções cuidadosamente para completar cada etapa e ganhar experiência prática. Dados históricos mostram que este é um laboratório de nível iniciante com uma taxa de conclusão de 100%. Recebeu uma taxa de avaliações positivas de 92% dos estudantes.

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.