efeito letterpress text-shadow
Letterpress é uma técnica de impressão do século 19 em que um tipo em relevo pressiona o papel, deixando a letra afundada com uma borda de luz de um lado e sombra do outro; o CSS reproduz essa impressão com duas camadas opostas de text-shadow, sem imagem nem filtro, e esta página explica a física por trás das duas sombras.
A cor do texto fica só um tom mais clara que o fundo, e as duas sombras sem desfoque criam o sulco fino típico de títulos impressos.
Trocar qual sombra fica em cima inverte a leitura do relevo, simulando a letra empurrada para dentro do fundo escuro em vez de para fora.
1px de blur suaviza a transição da sombra em fontes grandes, onde o corte abrupto de um blur zero fica visível demais de perto.
Sim. A propriedade recebe uma lista separada por vírgulas, pintada de frente para trás, a primeira sombra fica por cima. É assim que se criam contornos e brilhos de várias camadas.
Porque o relevo depende do olho perceber duas bordas de luz sutis ao redor da letra, não um contorno forte; se o texto tiver contraste alto com o fundo, as duas sombras finas somem visualmente atrás da diferença de cor principal, e o efeito de sulco impresso deixa de aparecer.
Tecnicamente sim, mas o efeito só se lê bem a partir de títulos médios ou grandes, porque as duas sombras de 1px ficam proporcionalmente enormes em relação a uma letra pequena; em corpo de texto o resultado costuma parecer só uma borda borrada, sem o relevo pretendido.
Precisa inverter qual sombra é clara e qual é escura e qual fica por cima na lista, porque o relevo depende da direção da luz simulada continuar plausível; manter a mesma receita clara em cima num fundo escuro faz a letra parecer flutuando em vez de afundada.
Só na aparência final: a técnica em CSS não pressiona nada, ela desenha duas sombras deslocadas para simular a leitura visual que o olho faz de um sulco impresso de verdade, um efeito puramente óptico que imita séculos de tipografia mecânica sem nenhum relevo físico na tela.
color: #E6ECE8;
text-shadow: 3px 4px 8px #3DDC97,
6px 8px 10px #3DDC97,
9px 12px 12px #3DDC97;O CSS é calculado localmente; o texto não é enviado ao servidor.