- O
text-stroke do CSS aceita apenas um único valor, mas é possível criar um efeito retrô de texto com múltiplos contornos sobrepondo várias camadas da mesma letra e definindo espessuras de contorno e cores diferentes para cada camada
- Usando como referência o efeito de texto de Graphic Japan : from woodblock and zen to manga and kawaii, ao definir
text-stroke-width diferentes para vários elementos, obtém-se um resultado mais próximo
- Combinando
text-stroke-width, text-stroke-color e z-index por camada, é possível controlar a ordem e as cores dos contornos, e o formato original da letra é preservado mesmo quando a espessura aumenta
- O resultado de renderização varia entre navegadores, e o Firefox parece mais suave do que Chrome e Safari; ao colocar várias letras em uma linha, as formas das letras acabam se fundindo
- O resultado depende bastante da fonte escolhida e, em
font-size grandes, pode haver cintilação; por isso, funciona bem para experimentos ou geração de imagens com css-doodle, mas não é adequado para uso em produção
Como funciona a implementação
-webkit-text-stroke-color: @pn(--c, #f4e1e8);
-webkit-text-stroke-width: $em(.08n+.02(1-(-1)^n));
- Ao aplicar uma cor diferente a cada camada e sobrepô-las na ordem desejada, é possível controlar as cores e a sequência dos contornos
-webkit-text-stroke-color: @pn(#f4e1e8, #cc0d55);
-webkit-text-stroke-width: @i(*3px);
Renderização e limitações
- O Firefox oferece uma renderização mais suave do que Chrome e Safari
- Ao colocar várias letras em uma linha, as formas das letras se fundem entre si
@content: '秋收冬藏';
- Para experimentar rapidamente várias fontes, foi adicionada a função
@google-font, acelerando o carregamento das fontes
font-family: @google-font(Matemasie);
@content: 'b';
font-family: @google-font(Tangerine);
@content: 'Love';
font-family: @google-font('Cherry Bomb One');
@content: '+';
- O desempenho não é tão bom quanto o de filtros CSS e, especialmente à medida que o
font-size aumenta, pode haver cintilação
- Exemplos adicionais foram gerados com css-doodle, e o CodePen do primeiro exemplo pode ser visto em https://codepen.io/yuanchuan/pen/ogzarGo
1 comentários
Comentários do Hacker News
Este artigo foi feito pelo autor de css-doodle usando o próprio css-doodle. Esse web component permite colocar diretamente no HTML uma sintaxe derivada de CSS usada no blog
O exemplo fica assim:
@grid: 15 / 90%;border-radius: 50%;background: hsl(@t(/20), 70%, 60%);scale: sin(@atan2(@dx, @dy) + @ts);Fora importar a definição do componente, não precisa de JavaScript, e funciona em HTML comum, Markdown, frameworks etc.
https://css-doodle.com/
Boa parte do CSS desta página parece código cifrado para mim. Em uma era com tantos estilos padronizados, parabéns ao autor por publicar algo novo e interessante
Fico curioso sobre por que o motor de renderização CSS do Firefox prefere tratar isso de forma mais suave. A implementação parece dramaticamente diferente, mas pode ser só por ser um caso-limite de renderização
O Firefox decidiu expandir com base na distância em todos os pontos, o que é uma das respostas razoáveis e provavelmente a abordagem mais geral. Por isso, cuspes pontiagudos viram curvas na expansão
Outros navegadores decidiram preservar o cuspe, o que também pode ser razoável e imagino que tenha um custo computacional bem menor. Mas, quando você expande mais do que o tamanho da característica, isto é, a distância entre nós, aparecem muitos casos degenerados, então lá pelo quarto anel vermelho já parece claramente errado
box-shadowtambém é outro caso em que ocorre expansão. É o quarto valor de comprimento, o spread distance. Se o canto for um cuspe, o canto da sombra também será um cuspe; se for arredondado, o canto da sombra também será arredondado. Há uma ilustração útil em https://drafts.csswg.org/css-backgrounds/#shadow-shapeCom um pequeno truque, você pode usar
0.1px border-radius, e a caixa ainda parecerá quadrada, mas a sombra expandida ficará curva. Às vezes isso é útil. Voltando ao assunto do post original, se você usar uma fonte com curvas minúsculas no lugar de nós em forma de cuspe, Chromium/Safari também ficarão mais próximos do FirefoxIntuitivamente, eu esperaria que o contorno em forma de estrela se aproximasse de um hexágono comum, mas nenhum navegador consegue fazer isso
Os cantos arredondados da primeira camada estariam todos à mesma distância do canto mais próximo do caractere original
Gostei muito do design deste blog. É simples, claro e prioriza o conteúdo
A série Daily Sketch e
CSS Animation with offset-pathtambém são igualmente divertidosFoi com este artigo que conheci https://css-doodle.com pela primeira vez
Alguns meses atrás eu estava fazendo algo parecido com a HTML Canvas API, mas não sabia que dava para fazer esses pequenos experimentos divertidos também com CSS. Gostei muito
Tentei trocar o fiddle pelo logo e as cores da Apple, e o primeiro anel acaba comendo parte da maçã. O topo da maçã é cortado, e queria saber se alguém entende por quê
--c: #5EBD3E,#FFB900,#F78200,#E23838,#973999,#009CDF;@content: '';Queria saber qual é a melhor forma de fazer texto com contorno duplo sem usar caracteres Unicode chamativos, mas ainda preservando a aparência recomendada pela fonte
No momento estou usando caracteres chamativos no meu blog, mas isso prejudica os resultados de busca. Estou migrando o blog de HTML manual para 11ty, então queria aproveitar para melhorar o blog também
Além disso, também gostaria de ouvir opiniões sobre o design atual do blog
Muito legal. Só é uma pena que a diferença de renderização entre navegadores seja tão grande
Fico curioso se alguém já tentou fazer o mesmo com sombras. Parece que também daria para empilhá-las
A primeira coisa em que pensei foi colocar emoji no content. Mas só apareceu aquele quadrado de caractere desconhecido. Acho que eu estava esperando alguma mágica