Blog

Responzivní text na celou šířku

Kvě 7, 2022

PSK Olymp Praha

PSK Olymp Praha

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:

Co si ještě přečíst?

Zajímavosti z projektů

Jak změnit wp-login URL

Občas je zajímavé podívat se, kdo na Váš web chodí a hlavně - kam. Např. pluginy jako Wordfence a...

Bezvýpadkové nasazení webu

O co vlastně jde Ne vždy má člověk štěstí na to, aby dělal nový web od základu a občas je potřeba...

Formuláře s výpočty

Jednou jsme se setkali při hledání zakázek s dotazem o kalkulaci ceny schodiště. Hledali jsme tedy...

Práce s DIVI

Dlouhé sticky menu na mobilu

Při použití sticky menu (menu, které při scrolování stránky zůstane nalepené nahoře a je tedy vždy...

Lokální fonty v DIVI

DIVI má k dispozici velký výběr fontů, hlavně Google Fonts (i když některé chybí) a další. V tom...

Mega menu bez pluginu

Poslední dobou čím dál častěji potkávám tzv. "Mega-menu", tedy podmenu, které je přes celou šířku...

Návody

Dlouhé sticky menu na mobilu

Při použití sticky menu (menu, které při scrolování stránky zůstane nalepené nahoře a je tedy vždy...

Jak změnit wp-login URL

Občas je zajímavé podívat se, kdo na Váš web chodí a hlavně - kam. Např. pluginy jako Wordfence a...

Lokální fonty v DIVI

DIVI má k dispozici velký výběr fontů, hlavně Google Fonts (i když některé chybí) a další. V tom...

Mixed content na webu

Mixed content na webu dokáže pěkně potrápit. V lepším případě se zobrazí jako otravná hláška v...