Aktuálně: Postihly zákazy tvou profesi? Poptávka po ajťácích prudce roste, využij slevové akce 50% výuky zdarma!
Pouze tento týden sleva až 80 % na e-learning týkající se Javy
Discount week - May - 50

Lekce 13 - Počítání v CSS pomocí funkce calc()

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

Vítejte u další lekce ohledně funkcí v CSS 3, 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;
}
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

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 další lekci, Změny vlastností posuvníků (scrollbarů), si ukážeme, jak v CSS změnit velikost, barvu, nebo dokonce i tvar posuvníků na stránce.


 

Stáhnout

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

Staženo 48x (849 B)

 

Předchozí článek
Čítač a vlastnost content v CSS 3
Všechny články v sekci
CSS3 od A do Z
Článek pro vás napsal Filip Opluštil
Avatar
Jak se ti líbí článek?
1 hlasů
Aktivity (3)

 

 

Komentáře

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zatím nikdo nevložil komentář - buď první!