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.
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?
Jedním z přístupů by bylo vytvořit několik
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.
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: