Možná budeme chtít přemýšlet o vysoce dekorativních a vícebarevných fontech, které patří do věku digitálního typu. Není tak. Chromatický typ, který umožnil použití obrysů, stínů a více barev (mimo jiné), se datuje do poloviny 19. století. Byly tvořeny dvěma nebo více odpovídajícími sadami, které byly vytištěny jedna nad druhou, aby se vytvořil požadovaný efekt.

Jejich digitální potomci jsou navrženi tak, aby fungovali přesně stejným způsobem. Každý styl v rodině vrstev písma může být kombinován se svými komplementárními styly, které tvoří kompozit.

Obvykle se používá pravidelný (nebo výplňový) styl, který může být použit samostatně a pak několik doplňkových stylů, jako jsou obrysy a dekorace, které lze přidat nahoře. Doplňkové styly nejsou obecně použitelné nezávisle, musí být použity ve spojení s alespoň jedním jiným stylem, aby byly čitelné. Mnoho vrstev písemných rodin také přijde s ready-made kompozitní styl.

Písma vrstvy v prohlížeči

Ve Photoshopu, Illustratoru nebo jiném grafickém programu, který využívá vrstvy, je vrstva písma dostatečně přímočará, ale jak to funguje v prohlížeči?

Vrstva fontů s div

Jedním z přístupů by bylo vytvořit několik

s a připevněte je na stejný bod jako je toto:

Použití vrstevních písem v CSS

Použití vrstevních písem v CSS

Použití vrstevních písem v CSS

/ * CSS * / # první, #second, #third {display: block; position: absolute; top: 10px; left: 5px;} h1 {font: .85);} # sekunda h1 {font-family: 'Two'; barva: rgba (0,0200, .85);}

Zatímco to funguje, zahrnuje vytvoření div pro každou vrstvu písma a pak opakování stejného obsahu v každé div. Výsledná značka je sémantický nepořádek, protože úplně neodděluje obsah a informace o stylu.

Vrstva fontů s pseudo prvky

Existuje jiná, poměrně jednoduchá technika, která nenarušuje značkování: pomocí prvků :: before and :: after pseudo elements může být text navržen bez překrývání html.

Zde je to, co budeme stavět: