Quando se trata de web design, o apelo visual do seu conteúdo desempenha um papel fundamental para capturar e reter a atenção do seu público. Um aspecto do design que pode afetar significativamente a estética geral e a legibilidade do seu site é o estilo do texto.
O estilo do texto vai além da simples escolha da fonte e da cor da fonte. Envolve combinar cuidadosamente várias propriedades CSS para alcançar o efeito desejado, como utilizar contornos de texto para tornar seu texto visualmente impactante.
Neste artigo, vamos nos aprofundar na arte de estilizar o contorno de textos usando CSS e explorar como isso funciona juntamente com as várias opções que você pode usar.
Entendendo os textos da web
Os textos na web são textos exibidos em uma página da web. As fontes desempenham um papel vital na exibição de textos na web. Essas fontes são essencialmente gráficos baseados em vetores, o que significa que os dados de pixels não as limitam e podem ser renderizados em vários tamanhos, mantendo sua nitidez e clareza.
Um aspecto fascinante das fontes serem gráficos baseados em vetores é a capacidade de aplicar traços ou contornos ao redor de caracteres individuais. Assim como é possível desenhar um traço ao redor de uma forma em programas vetoriais como o Adobe Illustrator, o CSS fornece os meios para alcançar o mesmo efeito em textos na web.
2 métodos para adicionar contorno de texto com CSS
Quando se trata de adicionar um efeito de contorno ao seu texto usando CSS, existem dois métodos que você pode usar. Vamos explorar e ver as desvantagens desses métodos e como usá-los.
1. Usando a propriedade text-stroke
text-stroke é uma propriedade CSS que você pode usar para adicionar um contorno aos seus textos. Ela permite que você especifique o width e o color do contorno. Essa propriedade é compatível apenas com navegadores baseados no WebKit e, para usá-la, você deve adicionar o prefixo -webkit-.
Por exemplo, vamos adicionar um contorno a um texto de cabeçalho h1 – “Welcome to Kinsta”:
<h1>Welcome to Kinsta</h1>É assim que a propriedade text-stroke será usada com o prefixo -webkit-:
h1 {
-webkit-text-stroke-width: 3px;
-webkit-text-stroke-color: black;
}-webkit-text-stroke-width e -webkit-text-stroke-color especificam, respectivamente, a largura width e a cor color do contorno. Define a largura width como 3px e a cor como preta black.
Essas duas propriedades acima podem ser combinadas com a propriedade abreviada -webkit-text-stroke, que especifica simultaneamente o contorno color e width.
h1 {
-webkit-text-stroke: 3px black;
}Isso dará o mesmo resultado.
Suporte para a propriedade text-stroke
Conforme o caniuse, não há suporte para a propriedade text-stroke no navegador Internet Explorer.
Se você usar a propriedade text-stroke para definir o contorno dos seus textos e um usuário usar um navegador sem suporte, esse texto poderá não ser visível se a cor corresponder à cor de fundo.
Para corrigir isso, você pode usar a propriedade -webkit-text-fill-color para definir um color para o texto e definir uma cor de fallback com a propriedade color:
h1 {
color: black;
-webkit-text-fill-color: white; /* Will override color (regardless of order) */
-webkit-text-stroke: 3px black;
}Quando um navegador não é compatível com a propriedade text-stroke, ele usa a cor definida pela propriedade color.
Outra opção é confirmar se o navegador é compatível com a propriedade -webkit-text-stroke antes de adicionar o estilo.
@supports (-webkit-text-stroke: 3px black) {
h1 {
-webkit-text-fill-color: white;
-webkit-text-stroke: 3px black;
}
}2. Uso da propriedade text-shadow
Se não quiser lidar com diferenças de suporte, você poderá usar a propriedade text-shadow, que oferece suporte para todas as versões mais recentes dos navegadores mais populares.
Para a propriedade text-shadow, usaremos quatro sombras, cada uma no canto superior direito, no canto superior esquerdo, no canto inferior esquerdo e no canto inferior direito.
h1 {
color: #fff;
text-shadow:
3px 3px 0 #000,
-3px 3px 0 #000,
-3px -3px 0 #000,
3px -3px 0 #000;
}Neste exemplo, usamos quatro sombras para criar um efeito de contorno de texto. Cada sombra tem um deslocamento de 3 pixels do texto e a cor é definida como preta (#000). Esse efeito é semelhante ao gerado pelo primeiro método.
Ao aplicar sombras a todos os quatro cantos do texto, você obtém um contorno bem definido. Sinta-se à vontade para ajustar os deslocamentos em pixels, as cores das sombras ou as cores do texto de acordo com suas preferências específicas de design.
Esse método oferece uma vantagem adicional, pois você pode ajustar as sombras horizontais e verticais de acordo com o que for mais adequado ao texto. Você também pode adicionar um pequeno raio de desfoque:
h1 {
color: #fff;
text-shadow:
3px 3px 2px #000,
-3px 3px 2px #000,
-3px -3px 0 #000,
3px -3px 0 #000;
}
Uma limitação do uso de sombras de texto é que você pode encontrar um efeito de traço descontínuo quando o comprimento da sombra exceder 1 pixel (você verá isso se comparar com o método text-stroke ).
Combinação das propriedades text-stroke e text-shadow
Você pode combinar as duas propriedades para obter um efeito visualmente impressionante que combine um contorno de texto perfeito com um desfoque sutil e efeitos adicionais oferecidos pela propriedade text-shadow. Essa combinação permite uma abordagem versátil e personalizável para aprimorar a aparência do seu texto.
h1 {
-webkit-text-stroke: 1px black;
color: white;
text-shadow:
3px 3px 0 #000,
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
Você também pode evitar a necessidade de adicionar sombras individuais a cada canto e aplicar uma sombra geral com uma linha:
#heading-1{
color: white;
-webkit-text-stroke: 1px #F8F8F8;
text-shadow: 0px 1px 4px #23430C;
}
#heading-2{
color: white;
-webkit-text-stroke: 1px #F8F8F8;
text-shadow: 0px 2px 4px red;
}
#heading-3{
color: #333;
-webkit-text-stroke: 1px #282828;
text-shadow: 0px 4px 4px #282828;
}
Resumo
As propriedades text-stroke e text-shadow oferecem opções valiosas para você adicionar contornos ao seu texto. A escolha entre elas depende da compatibilidade com o navegador, dos efeitos desejados e do nível de controle que você precisa para o seu design.
Você pode experimentar diferentes técnicas e encontrar a melhor abordagem para criar contornos de texto cativantes e visualmente atraentes. Você pode combinar os recursos de hospedagem da Kinsta com seu projeto completo para obter uma presença on-line envolvente.
Compartilhe sua experiência! Você usou alguma outra abordagem não mencionada neste artigo? Compartilhe conosco nos comentários.
Deixe um comentário