Adicionando Bordas ao Texto com CSS

CSSPersonalização
O código é utilizado para adicionar bordas ao texto utilizando CSS, proporcionando um efeito de texto com contorno.

Como instalar

  • No widget de título adicione o código html <span class="stroke"></span>
  • Copie e cole o código CSS dentro da seção de Custom CSS do Elementor ou dentro de um arquivo CSS da sua instalação WordPress.
  • Substitua o texto e as cores conforme desejado, seguindo as instruções comentadas no código.

Explicando o código

  • selector .elementor-heading-title estiliza o container do título, garantindo que os itens dentro dele sejam centralizados verticalmente.
  • A classe .stroke é aplicada ao elemento span, e é estilizada para ter uma posição relativa, o que permite que os pseudo-elementos ::before e ::after sejam posicionados absolutamente em relação a ela.
  • .stroke::after e .stroke::before são pseudo-elementos que são utilizados para criar duas camadas de texto, uma com a cor do texto normal e outra com um contorno (borda).
      • content define o texto que será exibido.
      • position: absolute posiciona os pseudo-elementos absolutamente em relação ao elemento pai .stroke.
      • width, top, left, transform são utilizados para centralizar os pseudo-elementos.
      • z-index é utilizado para garantir que o texto contornado (::before) fique atrás do texto normal (::after).
      • white-space: nowrap impede que o texto seja quebrado em várias linhas.
      • text-stroke e -webkit-text-stroke são utilizados para adicionar uma borda ao texto no pseudo-elemento ::before.

 

Códigos

HTML

				
					/* Estilo Principal no widget de título */
<span class="stroke"></span>
				
			

CSS

				
					selector .elementor-heading-title {
    display: flex;
    align-items: center;
}

.stroke {
    position: relative;
    color: #000;
}

.stroke::after {
    content: "TEXTO COM BORDA"; /* TROQUE OS TEXTOS AQUI */
    position: absolute;
    width: 100%;
    top: 50%;
    left: 0;
    transform: translatey(-50%);
    color: #fff !important; /* TROQUE A COR DA FONTE PARA A MESMA DO FUNDO DA SEÇÃO */
    z-index: 1;
    white-space: nowrap;
}

.stroke::before {
    content: "TEXTO COM BORDA"; /* TROQUE OS TEXTOS AQUI */
    position: absolute;
    width: 100%;
    top: 50%;
    left: 0;
    transform: translatey(-50%);
    text-stroke: 3px #FFFFFF; /* TROQUE A COR DA BORDA AQUI */
    -webkit-text-stroke: 3px #000; /* TROQUE A COR DA BORDA AQUI */
    z-index: 0;
    white-space: nowrap;
}
				
			

Exemplo

Relacionados

Efeito de Brilho em Botão do Elementor

Este código CSS aplica um efeito de brilho...
CSSEstilo

Efeito de Gradiente Animado no Botão

Este código CSS é usado para adicionar um...
CSSPersonalização

Adicionando Bordas ao Texto com CSS

O código é utilizado para adicionar bordas ao...
CSSPersonalização

Fale com a Lab1