Como fazer texto tachado com CSS?
texto riscado css
Basta usar a propriedade text-decoration com o valor line-through. Veja mais detalhes abaixo!
Assista o vídeo abaixo:
Como Riscar uma Palavra com CSS: Guia Passo a Passo
Você já se deparou com a necessidade de destacar ou eliminar uma palavra em seu site? Bem, aqui está uma solução direta e eficaz: o uso do CSS para riscar texto. Vamos direto ao ponto!
Passo 1: Estrutura HTML
Primeiro, você precisa ter um elemento HTML onde deseja aplicar o efeito de riscar. Pode ser um parágrafo, um título, ou qualquer outra tag de texto. Por exemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Como Riscar uma Palavra com CSS</title>
</head>
<body>
<p>Este texto deve ser riscado.</p>
</body>
</html>
Passo 2: Adicionando Estilos CSS
Agora, vamos adicionar o estilo CSS necessário para alcançar o efeito desejado. Usaremos a propriedade `text-decoration` com o valor `line-through`. Veja como é simples:
CSS
p {
text-decoration: line-through;
}
Resultado
Ao aplicar esses estilos, a palavra dentro do elemento `<p>` será riscada, como mostrado abaixo:
Este texto deve ser riscado.
Explorando os Efeitos de Texto
A propriedade `text-decoration` oferece mais do que apenas a capacidade de riscar texto. Você também pode usar outros valores para criar diferentes efeitos visuais. Por exemplo:
- underline: Sublinha o texto.
- overline: Adiciona uma linha acima do texto.
- line-through:
Risca o texto. - blink: Faz o texto piscar (embora não seja recomendado devido à má usabilidade).
Com a propriedade `text-decoration`, você pode não apenas riscar o texto, mas também aplicar outras formas de formatação, como negrito ou itálico. Além disso, é uma prática recomendada usar recursos nativos da linguagem, como HTML e CSS, para manter seu código limpo, eficiente e seguindo as melhores práticas.
Agora você está pronto para dar um toque especial ao seu conteúdo web usando CSS para riscar texto até rabiscar as palavras como mostraremos a seguir!
Criando um Texto Rabiscado com CSS
Às vezes, queremos adicionar um toque artístico ao texto em nossos sites, como se fosse rabiscado com um lápis. Vou te mostrar como fazer isso apenas com CSS, sem precisar de imagens extras.
Passo 1: Estrutura HTML Simples
Começaremos com uma estrutura HTML básica. Não se preocupe, é simples:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Texto Rabiscado com CSS</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="rabiscado">Texto Rabiscado</div>
</body>
</html>
Passo 2: Adicionando Estilos CSS
Agora, vamos adicionar alguns estilos CSS para criar o efeito de texto rabiscado. Aqui está o que você precisa colocar no arquivo `styles.css`:
CSS
.rabiscado {
font-size: 24px;
position: relative;
display: inline-block;
}
.rabiscado::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
background-size: 20px 20px;
}
Resultado
Agora, quando você visualizar a página HTML no navegador, verá o texto "Texto Rabiscado" com um efeito de rabisco. Este é um exemplo básico, mas você pode ajustar os estilos conforme necessário para obter o efeito desejado.
Usando apenas CSS, você pode criar efeitos visuais interessantes, como o texto rabiscado que acabamos de fazer. Experimente ajustar os valores e propriedades para personalizar ainda mais o visual. Divirta-se criando!
Leia mais em: ww.w3schools.com/css/
