Webové zákusky

Responzivní text na celou šířku

7. 5. 2022

[ds_layout_sc id=“7572″]

Problematika

Pokud máte štěstí na kreativního grafika (což je vždy super, pokud máte 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í.

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.

Postup

1) Připravíme si section, jednoduchou row a uvnitř 2 stejné moduly se stejným (nebo jiným textem). V našem případě je to „PSK Olymp Praha“.

image 4

2) Pro row nastavíme plnou šířku displeje bez okrajů a výšku 200px, aby se tam text hezky vešel.

  • width: 100%
  • max-width: 2560px
  • height: 200px
responzivní font s překryvem

3) Pro první textový modul (který bude podkladový), nastavíme:

  • content: „PSK OLYMP PRAHA
  • font: Koulen
  • font weight: Bold
  • font style: uppercase
  • text color: rgba(255,1,79,0.2)
  • text size: 9 vw
  • text alignment: center
  • height: 100 px
  • position: abosulute
  • position-location: top center
Responzivní stín textu

4) Pro druhý textový modul (který bude hlavní a viditelný) nastavíme:

  • content: „PSK OLYMP PRAHA
  • font: Koulen
  • font weight: Bold
  • font style: uppercase
  • text color: #8446ab
  • text size: 7 vw
  • letter spacing: 4 px
  • text alignment: center
  • height: 100 px
responzivní font na celou šířku

A máme hotovo! Pokud zmenšíte okno, text se vždy přizpůsobí podle šířky okna.

Jednotky vw jsou užitečné i v mnoha dalších případech, ale v případě, když chceme responzivní text na celou šířku, jsou to opravdu super.

Tady je reálný příklad z praxe – nový web pro PSK Olymp Praha.

PSK Olymp Praha - ukázka

Zdroje inspirace

Další články

Jak přidat fonty do DIVI

V článku o lokálních fontech v DIVI jsem popisovala, jak je možné přidat do DIVI vlastní font a co dělat, pokud DIVI daný formát fontu nepodporuje (tedy jiný formát než TFF nebo OTF). Někdy je...