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
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
