CSS HTML

Como fazer um contorno em texto com CSS

5 de junho de 2020

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.

contorno no texto com css capa

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:

contorno no texto com css ex1

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:

contorno no texto com css ex2

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

Subscribe
Notify of
guest
0 Comentários
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x