Efeito de esboço do texto - CSS

Folha de estilo em cascata é uma linguagem de design simples que torna o processo de criação de páginas da web apresentáveis ​​e atraentes. Além disso, nos permite adicionar vários estilos ao texto, como cor, sombra e outros elementos. Adicionar um efeito de contorno é um deles. Os usuários alteram o tamanho da fonte, a decoração e o peso da fonte aplicando mais propriedades de estilo.

Este post descreverá:

• Como adicionar efeito de esboço ao texto usando “TEXT-STOW" Propriedade?
• Como adicionar efeito de esboço ao texto usando “Shadow de texto" Propriedade?

Como adicionar efeito de esboço ao texto usando a propriedade "text-stroke"?

O "TEXT-STOW”A propriedade pode ser utilizada para adicionar um efeito de esboço ao texto. Alguns dos tipos de propriedade "text-slow" são mencionados abaixo:

• ““-WebKit-Text-Stroke”Propriedade dá um golpe no texto. Pode ser especificado como uma propriedade abreviada, definindo os valores de largura e cores.
• ““-WebKit-Text-Stroke-Width”Determina a largura do derrame.
• ““-WebKit-Text-Stroke-cor”Aplica a cor ao golpe.
• ““-WebKit-Text-Fill-Color”Adiciona cor ao texto.

A propriedade de AVC de texto deve ser declarada com o “webkit-”Prefixo. É suportado apenas por navegadores baseados em Webkit, como “Ópera","Safári","cromada", e "Android”. Alternativamente, o “Shadow de texto”A propriedade é compatível com quase todos os navegadores.

Para uma melhor compreensão, confira os exemplos mencionados abaixo.

Exemplo 1

Crie um arquivo HTML seguindo as instruções:

• Primeiro, adicione um “”Elemento e atribui o“contente" aula.
• Dentro deste "", adicione o "

  ”Elemento com o ID“texto”Para especificar algum texto no documento. Esse "texto”O ID será aplicado com as propriedades CSS para adicionar um efeito de esboço:

CSS- Efeito de esboço do texto

Agora, vá até a seção CSS para aplicar efeitos de contorno ao texto.

Classe de “conteúdo” de estilo

.contente
Largura: 500px;
margem: automático;

O ".contente”É utilizado para acessar o“”Elemento com classe“contente”. As seguintes propriedades são aplicadas a ele:

• ““largura”Propriedade define a largura do elemento.
• ““margem”Especifica o espaço ao redor do elemento.

Elemento de estilo “P”

Agora, acesse o “p”Elemento por id“texto”E aplique as seguintes propriedades:

#texto
cor branca;
-WebKit-Text-Stroke: 1px branco;
Shadow de texto: 0px 1px 4px #46256D;
Size da fonte: 45px;

Aqui:

• ““cor”Especifica a cor da fonte do elemento.
• ““tamanho da fonte”Propriedade define o tamanho da fonte do elemento.
• ““-WebKit-Text-Stroke”A propriedade é usada para aplicar o efeito de esboço ao texto.

Saída

Exemplo 2

#texto
cor branca;
Size da fonte: 42px;
-WebKit-Text-Stroke-Width: 1px;
-WebKit-Text-Stroke-cor: roxo;

No segundo exemplo, definimos a largura e a cor do esboço do texto especificando o “-WebKit-Text-Stroke-Width" e "-WebKit-Text-Stroke-cor”Propriedades.

Saída

Exemplo 3

#texto
Fonte-família: cursiva;
cor branca;
Size da fonte: 35px;
-WebKit-Text-Stroke-Width: 2px;
-WebKit-Text-Stroke-cor: Black;

Neste exemplo, o “família de fontes”Propriedade especifica o estilo do texto do elemento.

Saída

Como adicionar efeito de esboço ao texto usando a propriedade "Text-Shadow"?

O CSS “Shadow de texto”A propriedade é utilizada para adicionar um efeito de sombra ao texto e é suportada por todos os navegadores.

Aqui está a representação gráfica de adicionar várias sombras ao texto:

Exemplo 1

#texto
cor branca;
Size da fonte: 40px;
Shadow de texto: -1px 1px 2px #253f11, 1px 1px 2px #253f11, 1px -1px 0 #253f11,
-1px -1px 0 #253F11;

A descrição das propriedades adicionadas é ilustrada acima.

Saída

Exemplo 2

#texto
cor branca;
Size da fonte: 48px;
-Webkit-Text-Stroke: 1px #f0ecec;
Shadow de texto: 0px 1px 5px RGB (0, 0, 175);

No código acima mencionado, aplicamos os dois “Shadow de texto" e "-WebKit-Text-StrokePropriedades do CSS.

Saída

Fornecemos exemplos diferentes para aplicar o efeito de esboço ao texto.

Conclusão

Para adicionar um efeito de esboço ao texto, o CSS “TEXT-STOW”A propriedade pode ser utilizada. Esta propriedade inclui “largura de texto de texto","Text-stroke-cor", e "TEXTO-FILLOR”. Outra propriedade para adicionar efeitos de esboço ao texto no CSS é “Shadow de texto”. Este blog explicou como adicionar um efeito de esboço ao texto com vários exemplos.