Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Lekce 2 - Počítání v CSS3 pomocí funkce calc()

V předchozí lekci, Čítač a vlastnost content v CSS3, jsme si ukázali, jak vytvořit CSS3 čítač a využili jsme vlastnost content na několik způsobů.

Vítejte u další lekce ohledně funkcí v CSS3, ve které si ukážeme, jak funguje a na co se využívá funkce calc(). V této lekci se naučíme následující:

Funkce calc()
calc.html

Funkce calc()

Tato funkce se hojně využívá při tvorbě moderních web stránek. Prohlížeč díky ní totiž jednoduše přepočítává rozměry jednotlivých elementů podle toho, v jak velkém okně stránku otevíráme. Kromě změny velikostí elementů se dá také použít při přepočtu úhlů, frekvence, nebo časových průběhů u animací. Funkce pracuje s čtyřmi základními operátory - Sčítání (+), odčítání (-), násobení (*) a dělení (/). Podíváme se tedy na to, jak ji v CSS zapsat. Vytvoříme si HTML dokument s naším obvyklým nastavením:

<div class="div1"></div>
<div class="div2"></div>

A také CSS soubor:

* {
 margin: 0;
 padding: 0;
 font-family: monospace;
}

body {
 display: flex;
 justify-content: center;
 align-items: center;
 min-height: 100vh;
 font-size: 20px;
}

Soubor CSS musíme také do HTML dokumentu nalinkovat:

<link rel="stylesheet" href="main.css" type="text/css">

Nyní nastavíme třídě .div1 pevnou velikost šířky 100px a výšky 100px. Odlišíme ji také červenou barvou:

.div1 {
 width: 100px;
 height: 100px;
 background-color: red;
}

Nakonec nastylujeme další třídu .div2, té ale nastavíme rozměry pomocí funkce calc() a dáme ji modrou barvu. Výška se pomocí procent dá nastavit pouze s určitým obsahem, uděláme to tedy pomocí jednotky vh s hodnotou 67:

.div2 {
 width: calc(10%);
 height: calc(67vh);
 background-color: blue;
}

Výsledek bude vypadat nějak takto:

Funkce calc()
calc.html

Na první pohled se může zdát, že se vlastně nestalo nic neobvyklého. Stačilo by obyčejně nastavit šířce hodnotu 10% nebo 10vw. Zvláštnost této funkce ale začíná ve chvíli, kdy se zadá více, než jedna hodnota. Navíc je této funkci naprosto jedno, jaké jednotky mají zadané hodnoty, můžeme použít px, procenta, em, prostě cokoliv a to vše v rámci jedné funkce. Jediné, na co si musíme dávat pozor, je mezera mezi operátory a jednotlivými hodnotami. Pokud bychom to udělali bez mezer, tak funkce nebude fungovat:

  • Takto ano: calc(80% - 30px);
  • Takto ne: calc(80%- 30px); nebo calc(80% -30px);

V naší třídě .div2 změníme naši hodnotu 10% na výpočet, který se bude rovnat 10%:

.div2 {
 width: calc(2% + 3% + 5%);
 height: calc(67vh);
 background-color: blue;
}

Jak můžeme nyní vidět, celkový výsledek je stále 10%, šířka se tedy vůbec nezměnila:

Funkce calc()
calc.html

Tato funkce se nejčastěji využívá u velkých projektů, kde se místo různých hodnot používají předem definované proměnné. Ukážeme si tedy jak to vypadá v praxi. Nejprve si definujeme proměnnou v rámci našeho CSS dokumentu, která poté bude na naší stránce obecně platit:

:root {
 --width1: 100px;
}

Dále přidáme našemu dokumentu ještě jednu třídu .div3. Nastavíme barvu pozadí na zelenou, výšku na 100px a šířku necháme vypočítat pomocí funkce calc(). Použijeme naši proměnnou --width1 a přidáme k ní hodnoty 2% a 3vw:

.div3 {
 background-color: green;
 min-height: 100px;
 width: calc(var(--width1) + 2% + 3vw);
}

Šířka se nám tedy automaticky dopočítá:

Funkce calc()
calc.html

Nyní můžeme libovolně měnit naši proměnnou --width1, ale i když ji nastavíme hodnotu na 0px, stále bude element vidět, protože jeho šířka bude 2% + 3vw.

Další zajímavé využití si ukážeme na barvě posledního elementu. Místo pevně stanovené barvy green použijeme zápis rgb() a funkci calc(). Definujeme si novou proměnnou --color1 s hodnotou 127:

:root {
 --color1: 127;
}

Dále si v naší třídě .div3 změníme vlastnost background-color následujícím způsobem:

.div3 {
 width: calc(var(--width1) + 2% + 3vw);
 min-height: 100px;
 background-color: rgb(0, calc(255 - var(--color1)), 0);
}

Náš výsledek po provedení změn:

Funkce calc()
calc.html

Takto bude nastavena barva na stejnou zelenou jako byla předtím, nyní ji ale lze jednoduše změnit pomocí naší proměnné. Samozřejmě bychom to takto mohli nastavit i bez této funkce, nicméně toto je pouze příklad, že funkci calc() lze použít prakticky všude, kde máme nějaká čísla. Nejčastěji se tato funkce potom používá při kombinaci s JavaScriptem, kdy nastavujeme změny elementů pomocí nějakých hodnot.

Pokud něčemu nerozumíte, doporučujeme stáhnout si soubory v příloze k této lekci a vše si pořádně vyzkoušet. :)

V následujícím kvízu, Kvíz - calc(), čítač a vlastnost content v CSS3, si vyzkoušíme nabyté zkušenosti z předchozích lekcí.


 

Stáhnout

Stažením následujícího souboru souhlasíš s licenčními podmínkami

Staženo 351x (849 B)

 

Předchozí článek
Čítač a vlastnost content v CSS3
Všechny články v sekci
Pokročilé vlastnosti a animace CSS3
Přeskočit článek
(nedoporučujeme)
Kvíz - calc(), čítač a vlastnost content v CSS3
Článek pro vás napsal Filip Opluštil
Avatar
Uživatelské hodnocení:
38 hlasů
Aktivity