Solucionado
Preciso ter uma imersão de figma! Até agora não consegui achar o caminho para:
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;/
text-transform: uppercase;
Não posso viver de só copiar e colar código! Ajudem, please! :)
Oi, Claudia, tudo bem?
Atualmente, o Figma apresenta limitações para as funcionalidades disponíveis no plano gratuito. Uma das funcionalidades que não está mais disponível para o plano gratuito é a aba "Inspect" na barra lateral direita, a mesma que a instrutora utiliza para selecionar partes do código e utilizar no projeto.
Com relação a copiar e colar código, vamos juntos entender melhor esse trecho de código que está sendo utilizado:
-webkit-background-clip: text;: esta propriedade faz com que o fundo do texto seja cortado, permitindo que o background se aplique apenas ao texto.-webkit-text-fill-color: transparent;: esta propriedade define a cor do preenchimento do texto como transparente, permitindo que o background seja visível.background-clip: text;: similar ao -webkit-background-clip, mas sem o prefixo específico para navegadores Webkit.text-transform: uppercase;: transforma todo o texto em letras maiúsculas.Vamos aplicar essas propriedades em um exemplo simples de HTML e CSS:
Arquivo HTML
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemplo de Texto com Gradiente</title>
</head>
<body>
<h1 class="texto-gradiente">Texto com Gradiente</h1>
</body>
</html>
Arquivo CSS:
.texto-gradiente {
font-size: 2em;
font-weight: bold;
background: linear-gradient(45deg, #ff6b6b, #f06595);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-transform: uppercase;
}
Neste exemplo, no arquivo HTML, criamos uma estrutura básica com um título <h1> que possui a classe texto-gradiente. Já no CSS, utilizamos font-size e font-weight para ajustamos o tamanho e o peso da fonte; background: linear-gradient(45deg, #ff6b6b, #f06595);, para aplicamos um gradiente de cor ao fundo do texto; o -webkit-background-clip: text;, para fazer com que o background se aplique apenas ao texto; -webkit-text-fill-color: transparent;, para definir a cor do texto como transparente; o background-clip: text;, para fazer o mesmo que -webkit-background-clip, mas para navegadores que não são Webkit e o text-transform: uppercase;, para transformar o texto para letras maiúsculas.
Espero ter ajudado. Caso tenha dúvidas, conte com o fórum. Abraços!