13. diel - Vlastné CSS pre tlač

V predchádzajúcej lekcii, Responzívne tabuľky, sme sa dozvedeli, aké spôsoby implementácie responzívnych tabuliek existujú a tiež sme si ich ukázali.

V tomto CSS tutoriáli sa naučíme, ako správne vytvárať CSS pre tlač stránok na tlačiarni.

Motivácia

Predstavte si, že uvidíte recept na vaše obľúbené gnocchi na nejakej webovej stránke:

Ukážka webovej stránky s receptom - Responzívny webdesign

Tento recept si chcete vytlačiť na papier. Máme tu však veľa rušivých elementov - navigačné menu hore a podobné alebo rovno úplne iné recepty naľavo. Farby tlačiarne by sme klasickým tlačením zbytočne plytvali. Keď stránku vytlačíme klasickým spôsobom (pravým kliknutím a výberom možnosti Tlač), dostaneme tento výsledok:

Vzhľad stránky na tlač - Responzívny webdesign

Webový prehliadač dokázal obsah stránky aspoň čiastočne zredukovať. V recepte je však stále zbytočné horné menu, filtre, vyhľadávanie a ďalšie tlačidlá. Ak ste všímaví, na stránke pod receptom je tlačidlo Print, kde skript nahrá vlastné CSS a vytlačíme tak iba daný recept bez zvyšku stránky:

Recept na tlač - Responzívny webdesign

Teraz je na papieri len to, čo tam má byť. .


 

...koniec náhľadu článku...
Pokračuj ďalej

Vedomosti v hodnote stoviek tisíc získaš za pár eur

Došiel si až sem a to je super! Veríme, že ti prvé lekcie ukázali niečo nového a užitočného.
Chceš v kurze pokračovať? Prejdi do prémiovej sekcie.

Obsah článku spadá pod licenciu Premium, kúpou článku súhlasíš s Prevádzkovými podmienkami.

Čo od nás v ďalších lekciách dostaneš?
  • Prístup k jednotlivým lekciám podľa spôsobu obstarania.
  • Kvalitné znalosti v oblasti IT.
  • Zručnosti, ktoré ti pomôžu získať vysnívanú a dobre platenú prácu.

Popis článku

Požadovaný článok má nasledujúci obsah:

V CSS tutoriále si vysvetlíme, ako vytvoriť CSS štýly, ktoré sa aplikujú pri vytlačení stránky na tlačiarni.
Článok pre vás napísala Vlasta
Avatar
Studentka překladatelství a informatiky, nadšenec do všeho možného.
Aktivity