Como implementar decoração de texto usando CSS

Este artigo fornecerá a você um conhecimento detalhado e abrangente dos diferentes tipos de decoração de texto usando CSS com exemplos.

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?

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}

Overline-text-decoration-using-css

  • 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ê.