7

Existe alguma forma de colocar um texto nesse formato sem precisar usar imagem?

Ou gostaria de fazer um texto meio que curvado, mas não consegui fazer. A ideia seria fazer algo próximo dessa imagem, porém apenas com código para facilitar a edição rápida etc...

inserir a descrição da imagem aqui

Alguém sabe se tem alguma forma de fazer esse efeito no texto?

Cheguei até esse ponto, mas não tenho mais ideia de como fazer o texto alinhar na curva ou algo próximo disso...

.box {
    background-color: peachpuff;
    text-align: center;
    width: 200px;
    height: 100px;
    position: relative;
    overflow: hidden;
}
.box::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    border-radius: 50%;
    border: 1px solid;
    width: 200px;
    height: 100px;
    box-sizing: border-box;
}
.box span {
    display: inline-block;
    font-weight: bold;
    font-size: 24px;
    line-height: 100px;
}
<div class="box">
    <span>
        NEW YORK
    </span>
</div>

5

1 Resposta 1

7

Existem várias opções para fazer o desejado, mas aqui vou apresentar duas soluções (a resposta iria ficar muito grande com todas elas).

Algumas das opções são:

  • Canva
  • CSS "puro"
  • CSS com JavaScript (Exemplo 1)
  • SASS
  • SVG e path (Exemplo 2)

Poderia fazer com SASS, mas o SO não tem suporte no snippet. Então vamos fazer com um pouco de JavaScript (que irá aplicar CSS a elementos).

Observação: Antes de entender o que está acontecendo com o código vou ressaltar que essa não é a melhor solução, até porque existem bibliotecas, com o Arctext.js que faria de uma maneira simples isso para nós, apenas estou atendendo a solicitação da pergunta.

O maior problema desse método vai ser que se alterar uma palavra na div teria que voltar e mexer no JavaScript e CSS novamente. Mas enfim, veja o exemplo 1:

let deg = 6;
for (let i = 1; i <= 20; i++) {
  let div = document.querySelector(".container div:nth-child(" + i + ")");
  div.style.transform = 'rotate(' + deg + 'deg)';
  deg = deg + 6;
}
.container {
  margin: auto;
  position: relative;
  transform-origin: bottom left;
  transform: rotate(-61deg);
  height: 200px;
  width: 200px;
}

.container div {
  display: inline-block;
  font: 900 1.5em Monaco, Monospace;
  color: #000000;
  height: 200px;
  width: 15px;
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: bottom center;
  text-align: center;
}
<div class="container">
  <div>c</div>
  <div>a</div>
  <div>r</div>
  <div>a</div>
  <div>m</div>
  <div>b</div>
  <div>a</div>
  <div> </div>
  <div>o</div>
  <div> </div>
  <div>c</div>
  <div>a</div>
  <div>r</div>
  <div>a</div>
  <div> </div>
  <div>é</div>
  <div> </div>
  <div>t</div>
  <div>o</div>
  <div>p</div>
</div>

Se olhar bem no meu exemplo vai perceber que não está 100% alinhado, para isso eu precisaria ter aumentado a precisão da rotação na div container (o motivo: tenho prova hoje).

Basicamente nesse exemplo nós temos um div container que irá ser rotacionada para qualquer direção, e que permitiria o arco ir para qualquer lado (ficar na direita, esquerda, topo...).

Fora isso, precisamos apenas aplicar a propriedade transform: rotate do CSS em cada elemento filho dela, para eles também rotacionarem junto. Além disso, sempre mantenha um padrão para rotacionar, nesse exemplo fiz aumentando 6 a cada interação do for.

Observação 2: O exemplo 1 (com JavaScript) daria para fazer 100% com CSS, mas o código ficaria extremamente gigante visto que precisariámos aplicar a cada elemento aquela propriedade aumentando 6 na rotação.

Entendido o primeiro exemplo poderemos ir ao segundo feito com SVG e path. Acho a melhor solução pois permite fazer várias coisas com o texto, não só um arco.

Chega de texto e vamos entender por etapas:

Imagine esse SVG com um path no estilo de um arco, é nele que iremos "escrever em cima".

<svg viewBox="0 0 500 500">
  <path id="curve" d="M73.2,148.6c4-6.1,65.5-96.8,178.6-95.6c111.3,1.2,170.8,90.3,175.1,97" />
</svg>

Agora vamos adicionar um texto que irá seguir esse path (caminho, lógico não?).

<svg viewBox="0 0 500 500">
  <path id="curve" d="M73.2,148.6c4-6.1,65.5-96.8,178.6-95.6c111.3,1.2,170.8,90.3,175.1,97" />
  <text width="500">
    <textPath xlink:href="#curve">
      Olha a curva vindo
    </textPath>
  </text>
</svg>

E o melhor de tudo, só mude o texto e ele ainda continua seguindo o caminho (por isso é melhor, não precisamos refatorar CSS e JavaScript).

Porém tem um problema, não queremos que a curva apareça. Então vamos a alteração. Para isso basta colocar dentro do path a propriedade fill="transparent".

<svg viewBox="0 0 500 500">
  <path id="curve" fill="transparent" d="M73.2,148.6c4-6.1,65.5-96.8,178.6-95.6c111.3,1.2,170.8,90.3,175.1,97" />
  <text width="500">
    <textPath xlink:href="#curve">
      Olha a curva vindo
    </textPath>
  </text>
</svg>

Agora estamos com tudo pronto, só estilizar com CSS e alterar o SVG um pouco.

body {
  font-family: 'Luckiest Guy', cursive;
  font-size: 50px;
}

path {
  fill: transparent;
}

text {
  fill: #FF9800;
}
<svg viewBox="0 0 1000 1000">
    <path id="curve" d="M73.2,148.6c4-6.1,65.5-96.8,178.6-95.6c111.3,1.2,170.8,90.3,175.1,97" />
    <text width="300">
      <textPath xlink:href="#curve">
        Olha a curva vindo
      </textPath>
    </text>
</svg>

Referências:

Curved Text

Path

2
  • Muito bom jovem, é isso mesmo! Boa sorte na prova :)
    – hugocsl
    21/09/2018 às 19:26
  • Muito obrigado mano! Fui bem na prova haha 22/09/2018 às 17:02

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .