Gradienty, pozadí a globální CSS

Barva, přechod nebo obrázek mohou odlišit důležitou sekci. Globální CSS je až poslední nástroj pro pravidlo, které běžné ovládání nenabízí.

Co se naučíte

  • Použít jednobarevné, gradientové nebo obrázkové pozadí.
  • Uložit vlastní přechod pro další práci.
  • Rozlišit místní styl a globální CSS.
  • Respektovat bezpečnostní a exportní omezení obrázků.
Gradienty
Gradienty tvorba

Zvolte nejjednodušší vhodné pozadí

Jednobarevné pozadí je nejlépe čitelné a rychlé. Lineární gradient mění barvu jedním směrem, radiální vychází z určitého bodu. Obrázek může dodat atmosféru, ale musí mít dostatečný kontrast vůči textu a nesmí být jediným nositelem důležité informace.

Začněte v inspektoru vybraného řádku nebo modulu. Tím změnu omezíte na správný prvek. Globální CSS použijte jen tehdy, když má pravidlo platit ve více částech a nejde je vyjádřit tokenem, skinem nebo běžnou volbou.

U řádků lze také vybrat horní nebo spodní oddělovače.

Praktický postup

  1. Vyberte cílový prvek a otevřete jeho nastavení pozadí.
  2. Zkuste nejprve barvu z globální palety. U gradientu nastavte dva či tři související odstíny a směr.
  3. Povedený přechod můžete uložit do lokálního katalogu. K dispozici je nejvýše 24 vlastních gradientů.
  4. Pro obrázkové pozadí vybírejte přes Image Bank, aby vznikla bezpečná reference.
  5. Nastavte čitelnost textu, případně jemný barevný překryv. Ověřte ořez na mobilu.
  6. Globální CSS přidejte až po kontrole selektoru. Uložte a projděte více typů ukázkových stránek, nejen aktuální blok.

Globální CSS má širší dosah

Chybné nebo příliš obecné pravidlo může ovlivnit více modulů, proto změny dělejte po malých částech.

Uložené presety gradientů a barev se drží v localStorage konkrétního prohlížeče. Do konfigurace šablony se uloží skutečně použitá hodnota. Důležitější je však exportní hranice: lokální a ukázkové obrázky se do ZIPu nekopírují. Export je nahradí placeholderem, který po instalaci musíte v cílové Joomle nahradit skutečným médiem.

Náhled obrázku není zabalený soubor

Image Bank pomáhá při návrhu, ale nevytváří přenosnou fotobanku. Před publikováním na cílovém webu připravte finální obrázky a jejich licence samostatně.

Pozadí a výkon

Velký obrázek na pozadí může být nejnáročnějším souborem celé úvodní obrazovky. Při přípravě finálních médií na cílovém webu použijte přiměřené rozměry a moderní formát, ale zachovejte dostatečnou kvalitu pro největší zobrazení. Nepoužívejte několik těžkých fotografií jen jako dekoraci.

Pohyblivé pozadí nebo výrazný efekt může rušit návštěvníka; podporované animace respektují nastavení omezeného pohybu. Důležitý text nesmí záviset na pohybu ani na konkrétní části fotografie. Ověřte také, že při vypnutí obrázku zůstane sekce čitelná díky základní barvě pozadí.

U globálního CSS si před každým pravidlem položte otázku, zda stejný výsledek nenabízí token, plovoucí inspektor nebo skin. Tyto nástroje mají užší dosah a začátečník v nich snáze odhalí chybu.

Další krok: Image Bank: lokální a Pixabay obrázky.