Sublinhar um documento ou texto é sempre considerado fácil. Mas se considerarmos o caso dos sites, ainda é fácil? A maioria de nós diria que sim, mas fazer uma linha horizontal incluindo alguns designs personalizados torna esta tarefa simples cansativa. Vamos começar a jornada de decoração de texto usando CSS da seguinte maneira:
- O que é decoração de texto?
- Tipos de decorações de texto em CSS
- Decoração de texto usando CSS: código
- Pular Decoração de Texto
O que é decoração de texto?
Ele define a aparência das linhas decorativas no texto. É uma propriedade abreviada para:
- linha de decoração de texto
- texto-decoração-cor
- estilo de decoração de texto
É especificado como um ou mais valores separados por espaço que representam o te longoPropriedades de decoração xt.
Sintaxe:
decoração de texto: || ||
Onde,
text-decoration-line: É usado para definir o tipo de decoração usada, comosublinhado, sublinhado e linear.
text-decoration-color:É usado para definir a cor da decoração.
estilo de decoração de texto: É usado para definir o estilo da linha, comosólido, ondulado, pontilhado, tracejado, duplo
Tipos de decorações de texto em CSS
- Overline:
#decoration {text-decoration: overline} 
- Line-Through:
#decoration {text-decoration: line-through}- Sublinhado:
#decoration {text-decoration: underline}- Combinação:
#decoration {text-decoration: underline line-through overline}Resultado:
tutorial passo a passo do tableau
Decoração de texto usando CSS: código
Código:
Código CSS:
#overline {text-decoration: wavy overline lime} #underover {text-decoration: traceed underline overline} #dotted {text-decoration: underline overline dotted red} #wavy {text-decoration: line-through wavy}Resultado:
Pular Decoração de Texto
Uma propriedade conhecida como text-decoration-skip também pode ser usada quando um texto é sobreposto, atravessado e sublinhado. Ajuda na decoração do texto. Ele simplesmente especifica como sobrelinha e sublinhado são desenhados quando passam por ascendentes e descendentes.
#decoration {text-decoration-skip: ink}Os valores que podem ser usados com saltos de decoração de texto são:
objetos : (padrão) linha pula objetos embutidos, como imagens ou elementos de bloco embutido.
Nenhum : linha cruza tudo.
espaços : a linha de decoração pula espaços, caracteres separadores de palavras e quaisquer espaços definidos com espaçamento entre letras ou espaços entre palavras.
tinta : a linha de decoração pula glifos, descendentes ou ascendentes.
arestas : linha de decoração começa um pouco depois da borda inicial do conteúdo e termina um pouco antes da borda final do conteúdo.
decoração de caixa : a linha de decoração pula sobre a margem, borda e preenchimento herdados.
Como essa propriedade ainda não é compatível com nenhum navegador, não há demonstração, mas aqui está um exemplo na imagem abaixo de como cada um dos valores poderia ficar depois que text-decoration-skip for implementado.
Com isso, chegamos ao final deste blog Decoração de Texto Usando CSS. Se você tiver alguma dúvida sobre este tópico, deixe um comentário abaixo e entraremos em contato com você.
Confira nosso que vem com treinamento ao vivo conduzido por instrutor e experiência em projetos da vida real. Este treinamento torna você proficiente em habilidades para trabalhar com tecnologias da web de back-end e front-end. Inclui treinamento em Desenvolvimento Web, jQuery, Angular, NodeJS, ExpressJS e MongoDB.
Tem alguma questão para nós? Mencione isso na seção de comentários do blog “Decoração de texto usando CSS” e entraremos em contato com você.