Problematika
Pokud máte štěstí na kreativního grafika (což je vždy super, mít po ruce člověka s nevšedními a zajímavými nápady), občas se stane, že jste pak jako webaři vystaveni větší či menší výzvě, pokud máte grafiku z obrázku převést do webové praxe. Hlavně do responzivní webové praxe.
Jednou z takových výzev může být na první pohled jednoduše vypadající věc, jako je responzivní text na celou šířku, navíc se stínem. Klasický CSS text-shadow totiž neumí nastavit výšku stínu (myšleno velikost fontu), pouze směr a rozostření, nemluvě o tom, jak zařídit, aby byl text na celou šířku a hezky responzivní. Podívejte se na nadpis výše :-)
Princip řešení
Celé kouzlo tkví v použití relativní jednotky vw (viewport width) – ta jde totiž nastavit též jako velikost písma. Vytvoříte dva texty pod sebe, překryjete se a nastavíte jim velikost písma, jakou potřebujete (v jednotkách vw). Díky tomu je text vždy responzivní a není třeba mu nastavovat speciální velikost v breakpointech.
Tady je reálný příklad z praxe – nový web pro PSK Olymp Praha:
