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