LabEx
EntrarJunte-se

Criando Texto Gradiente com CSS

Beginner

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

Introdução

Neste laboratório, exploraremos o conceito de texto gradiente em CSS. O objetivo deste laboratório é ajudá-lo a entender como criar texto gradiente usando a função linear-gradient(), bem como como usar as propriedades webkit-text-fill-color e webkit-background-clip para preencher o texto com um fundo gradiente. Ao final deste laboratório, você será capaz de criar texto gradiente visualmente atraente que pode aprimorar o design de suas páginas web.

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 100% dos estudantes.

Texto Gradiente

index.html e style.css já foram fornecidos na VM.

Para dar ao texto uma cor gradiente, você pode usar propriedades CSS. Primeiro, use a propriedade background com um valor linear-gradient() para dar ao elemento de texto um fundo gradiente. Em seguida, use webkit-text-fill-color: transparent para preencher o texto com uma cor transparente. Finalmente, use webkit-background-clip: text para recortar o fundo com o texto e preencher o texto com o fundo gradiente como a cor. Aqui está um trecho de código de exemplo:

<p class="gradient-text">Gradient text</p>

.gradient-text {
  background: linear-gradient(#70d6ff, #00072d);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  font-size: 32px;
}

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 Gradiente. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.