7.1 Propriedade text-decoration
CSS oferece várias propriedades para estilização e decoração de texto em páginas web. As propriedades text-decoration, text-transform e text-shadow permitem adicionar sublinhado, mudar o caso do texto e criar sombras, o que ajuda a tornar o texto mais expressivo e atraente.
A propriedade text-decoration controla os efeitos decorativos do texto, como sublinhado, sobrelinhado e riscado. Ela também permite definir a cor e o estilo das linhas usadas para decorar o texto.
Valores:
none: remove todas as decorações de textounderline: sublinha o textooverline: adiciona uma linha acima do textoline-through: adiciona uma linha através do texto (riscar)blink: texto pisca (não suportado por todos os navegadores)text-decoration-color: define a cor da linha de decoraçãotext-decoration-style: define o estilo da linha (solid, double, dotted, dashed, wavy)text-decoration-thickness: define a espessura da linha de decoração
Exemplo de uso:
.underline {
text-decoration: underline;
}
.overline {
text-decoration: overline;
}
.line-through {
text-decoration: line-through;
}
.custom-decoration {
text-decoration: underline wavy red;
}
<body>
<p class="underline">Este texto está sublinhado.</p>
<p class="overline">Este texto está sobrelinhado.</p>
<p class="line-through">Este texto está riscado.</p>
<p class="custom-decoration">Este texto está sublinhado com linha ondulada vermelha.</p>
</body>
7. 2 Propriedade text-transform
A propriedade text-transform controla a transformação do texto, alterando o caso das letras. Isso é útil para alterar automaticamente texto em títulos, letras minúsculas, etc.
Valores:
none: sem transformações (valor padrão)capitalize: a primeira letra de cada palavra se torna maiúsculauppercase: todas as letras se tornam maiúsculaslowercase: todas as letras se tornam minúsculasfull-width: transforma o texto em tamanho completo (duplo) (não suportado por todos os navegadores)
Exemplo de uso:
.capitalize {
text-transform: capitalize;
}
.uppercase {
text-transform: uppercase;
}
.lowercase {
text-transform: lowercase;
}
<body>
<p class="capitalize">este texto terá a primeira letra de cada palavra em maiúscula.</p>
<p class="uppercase">este texto ficará completamente em maiúsculas.</p>
<p class="lowercase">ESTE TEXTO FICARÁ COMPLETAMENTE EM MINÚSCULAS.</p>
</body>
7.3 Propriedade text-shadow
A propriedade text-shadow adiciona sombra ao texto, o que permite criar efeitos visuais e melhorar a legibilidade do texto na página web.
Valores:
<offset-x>: deslocamento da sombra no eixo X (horizontal)<offset-y>: deslocamento da sombra no eixo Y (vertical)<blur-radius>: raio de desfoque da sombra (opcional)<color>: cor da sombra (opcional)
Exemplo de uso:
.text-shadow {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.multiple-shadows {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5), -2px -2px 4px rgba(255, 255, 255, 0.5);
}
<body>
<p class="text-shadow">Este texto tem sombra.</p>
<p class="multiple-shadows">Este texto tem sombras múltiplas.</p>
</body>
Explicação do código:
text-shadow: 2px 3px 4px rgba(0, 0, 0, 0.5);: adiciona uma sombra com deslocamento horizontal de 2px, deslocamento vertical de 3px, raio de desfoque de 4px e cor preta semitransparentetext-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5), -2px -2px 4px rgba(255, 255, 255, 0.5);: adiciona duas sombras com parâmetros diferentes, criando um efeito visual mais complexo
GO TO FULL VERSION