Há algum tempo atrás, eu decidi tentar criar uma dessas letter boards que geralmente vemos em cafés e outros estabelecimentos com o menu. Eu me desafiei a usar apenas CSS para simular o efeito das linhas onde as letras são encaixadas, a moldura e a própria tipografia.
Para isso, eu usei a função linear-gradient na propriedade background de uma div. Então eu calculei uma repetição vertical em em, para que as linhas coincidissem com o tamanho do texto, seja ele qual for. Assim, as letras realmente parecem estar encaixadas no quadro.
Aproveitei e adicionei o atributo contenteditable ao HTML da div, tornando assim o texto da letter board editável, como se fosse um input, e sem que seja necessário alterar o HTML.
Foi um exercício divertido. E para minha surpresa, o meu pen foi destacado na newsletter oficial do CodePen! Leia a edição aqui.
