Como fazer um contorno em texto com CSS
Neste artigo você aprenderá como fazer um contorno em texto com CSS puro, ou seja, sem auxílio de JS ou libs externas vamos fazer a funcionalidade de stroke.
Fala programador(a), beleza? Bora aprender inserir um stroke com CSS!
Para adicionar um contorno as letras no CSS temos algumas regras que resolvem este problema
Formação Claude Code
Domine Claude Code do absoluto zero até o avançado
- 116 aulas
- 4 projetos
- 9h 23min
Porém é importante citar que elas não são compatíveis com IE e nem Opera mini, então fique ciente disso 🙂
As regras para alterar o stroke são: text-stroke-width e text-stroke-color
Obs: Utilize as regras com o -webkit-
A primeira muda a largura do contorno e a segunda sua cor, então é completamente manipulável
Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.
Vamos ver um exemplo de contorno de letras com CSS:
<!DOCTYPE html>
<html>
<head>
<title>Como fazer um contorno em texto com CSS</title>
<meta charset="utf-8">
</head>
<body>
<h1>Este texto vai ter contorno</h1>
</body>
</html>
Este é o nosso HTML, agora vamos adicionar o stroke ao h1 com o seguinte CSS:
h1 {
font-family: Helvetica;
color: #FFF;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #000;
}
Aqui adicionamos uma fonte sem serifa, que ajuda em textos com contorno, mudamos a cor para branco e adicionar o stroke com as regras de width e color
Veja o resultado:
Podemos também utilizar uma regra para preencher o contorno, que é a text-fill-color, você deve utilizar desta maneira:
-webkit-text-fill-color: red;
E apresenta o seguinte resultado:
E é desta maneira que realizamos um contorno em texto com CSS! 😀
Conclusão
Neste artigo como fazer um contorno em texto com CSS, de uma forma muito simples e rápida
Utilizamos as regras text-stroke-width e text-stroke-color para atingir nosso objetivo
Vimos também que precisamos utilizar o -webkit- nelas
Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube
Matheus Battisti
Formações
Formação Vibe Coding
Do Prompt ao Produto: Crie Software Real com IA
- 474 aulas
- 20 projetos
- 39h 27min
Blog | Mais populares
Tags HTML: comandos e códigos básico a avançado
O conhecimento das principais tags HTML é vital para qualquer programador front-end, pois elas são a base da estrutura de qualquer página web. O HTML […]
Como fazer um select mudar de URL/link
Como fazer input de password com olho de mostrar senha
O que é o input type password? Antes de sair codando, bora entender a base O input type password é o campo de senha do […]
