Podríamos pensar que las fuentes altamente decorativas y multicolores pertenecen a la edad del tipo digital. No tan. El tipo cromático que permitió el uso de contornos, sombras y colores múltiples (entre otras cosas) se remonta a mediados del siglo XIX. Se componían de dos o más conjuntos correspondientes que se imprimían uno sobre el otro para crear el efecto deseado.

Sus descendientes digitales están diseñados para funcionar exactamente de la misma manera. Cada estilo en una familia de fuentes de capas se puede combinar con sus estilos complementarios para formar un compuesto.

Generalmente hay un estilo regular (o de relleno) que se puede usar de manera independiente y luego varios estilos suplementarios, como contornos y decoraciones, que se pueden agregar en la parte superior. Los estilos suplementarios generalmente no se pueden usar de manera independiente, deben usarse junto con al menos otro estilo para que sean legibles. Muchas familias de fuentes de capas también vienen con un estilo compuesto ya hecho.

Fuentes de capa en el navegador

En Photoshop, Illustrator o cualquier otro programa de gráficos que utiliza capas, las fuentes de capas es bastante sencillo, pero ¿cómo funciona esto en un navegador?

Capas de capas con divs

Un enfoque sería crear varios

s y fijarlos en el mismo punto como este:

Usar fuentes de capa en CSS

Usar fuentes de capa en CSS

Usar fuentes de capa en CSS

/ * CSS * / # primero, # segundo, # tercer {pantalla: bloque; posición: absoluta; superior: 10px; izquierda: 5px;} h1 {font: 5em 'Uno'; color: rgba (200,0,0, .85);} # second h1 {font-family: 'Two'; color: rgba (0,200,0, .85);} # third h1 {font-family: 'Three'; color: rgba (0,0,200, .85);}

Si bien esto funciona, implica crear un div para cada capa de la fuente, y luego repetir el mismo contenido en cada div. El marcado resultante es un desastre semántico, que falla por completo en separar el contenido y la información de estilo.

Capas de capas con pseudo elementos

Hay otra técnica relativamente simple que no interfiere con el marcado: al usar los pseudo elementos :: before y :: after , el texto se puede superponer sin saturar el html.

Esto es lo que vamos a construir: