Lekce 15 - Okraje a rámečky v CSS3 - Animace

V minulé lekci, Pokročilejší okraje a rámečky v CSS3, jsme si ukázali, jak pracovat s tvarem okrajů rámečků a pokročilým nastavením barevného vzhledu.

Vítejte u další lekce ohledně nastavení v CSS3, ve které si ukážeme, jak mohou vypadat animace rámečků a jak s nimi pracovat u moderních stránek. V této lekci se tedy naučíme udělat následující:

Vlastnost box-shadow

Poslední vlastnost, která se vztahuje ke vzhledu okolo elementu je box-shadow. Při vytváření nefunguje jako okraj elementu, ale jako další elementy umístěné buď do pozadí, nebo do popředí. Díky tomu se na stránce nechová jako další element, ale pouze jako rozšiřující část už existujícího. Máme celkem 6 hodnot, které v této vlastnosti můžeme specifikovat.

box-shadow: 1px 2px 3px 4px red inset;

• 1px - Posunutí podle osy x (doleva nebo doprava)
• 2px - Posunutí podle osy y (nahoru nebo dolů)
• 3px - Velikost rozmazání
• 4px - Velikost stínu
• Nastavení barvy
• Specifikace umístění (za elementem / v elementu)

Našemu prvnímu elementu vytvoříme tedy třídu s názvem okraj1. Nastavíme mu šířku 300px, výšku 200px a libovolnou barvu pozadí:

<div class="okraj1"></div>

.okraj1{
    width: 300px;
    height: 200px;
    background-color: lightblue;
}

K tomu přidáme vlastnost box-shadow s posunem 10px a 10px, rozmazáním 5px a červenou barvou:

.okraj1{
    width: 300px;
    height: 200px;
    background-color: lightblue;
    box-shadow: 10px 10px 5px red;
}

Velikost stínu a umístění mohu při definici klidně vynechat. Výsledek bude vypadat takto:

Pokud chceme, je možné v rámci jednoho elementu nastavit i více těchto vlastností najednou. Přidáme si k naší vlastnosti pomocí hodnoty inset ještě další vnitřní stín:

.okraj1{
    width: 300px;
    height: 200px;
    background-color: lightblue;
    box-shadow: 10px 10px 5px red, 5px 5px 3px green inset;
}

Pokaždé stačí pouze čárkou oddělit nastavení dalšího stínu.

Vlastnost border-block

Tato vlastnost se používá pouze zřídka, nicméně je dobré vědět, že existuje. Touto vlastností nastavujeme okraj protilehlých stran okolo HTML elementu. Podobně jako u mnoha dalších CSS3 vlastností, i border-block je shrnující vlastnost, ve které nastavujeme celkem 3 vlastnosti:

• šířku - border-block-width - Šířka rámečku
• styl - border-block-style - Styl rámečku
• barvu - border-block-color - Barva rámečku

border-block: šířka styl barva;

Opět nám nezáleží na jejich pořadí při zápisu a každou složku lze nastavit zvlášť. Vytvoříme si další html element s novou třídou okraj2:

<div class="okraj2"></div>

Použijeme stejné základní nastavení jako u prvního elementu, jen přidáme vlastnost border-block s velikostí 5px, tečkovaným vzorem a žlutou barvou:

.okraj2{
    width: 300px;
    height: 200px;
    background-color: lightblue;
    border-block: 5px dotted yellow;
}

U elementu se tedy vytvořil horní a spodní okraj, každý s výškou 5px, což znamená, že celková výška elementu je poté 210px. Pokud bychom chtěli nastavovat levý a pravý okraj, stačí pouze přidat doplňující vlastnost writing-mode. Ta nám definuje orientaci písma, tedy jestli píšeme vertikálně, nebo horizontálně. Pro ukázku doplníme do elementu ještě nějaký text:

<div class="okraj2">TEXT</div>

.okraj2{
    width: 300px;
    height: 200px;
    background-color: lightblue;
    border-block: 5px dotted yellow;
    writing-mode: vertical-lr;
}

Opět musíme pamatovat na to, že tímto nastavením zvětšíme šířku elementu o celkem 10px.

Pokročilé animace a využití okrajů

Jako poslední věc si ukážeme, jak mohou dnes na stránkách vypadat animace okrajů. Tyto složitější funkce však vyžadují hlubší znalosti CSS3. Nejprve zkusíme vytvořit animaci okraje, při které se budou dokola měnit barvy. Začneme dalším elementem s třídou okraj3:

<div class="okraj3"></div>

Do třídy okraj3 přidáme vlastnost border s šířkou 5px:

.okraj3{
    width: 300px;
    height: 200px;
    background-color: lightblue;
    border: 5px solid;
}

Dále doplníme vlastnost border-image-slice a border-image-source, ve kterých nastavíme velikost 1 a funkci pro barevnou paletu linear-gradient():

.okraj3{
    width: 300px;
    height: 200px;
    background-color: lightblue;
    border: 5px solid;
    border-image-slice: 1;
    border-image-source: linear-gradient(var(--angle), #0ebeff, #ffdd40, #ae63e4, #47cf73);
}

Uvnitř funkce linear-gradient() nastavíme jako první hodnotu proměnnou var(--angle) a poté barvy, které chceme v naší barevné paletě zahrnout. Proměnnou var(--angle) musíme ale definovat, jinak by nám poté nefungovala animace. To uděláme pomocí následujícího CSS kódu:

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

Důležitá pro nás je hodnota initial-value: 0deg;, kterou budeme v animaci měnit.

Teď už pouze doplníme jednoduchou animaci pomocí vlastnosti animation. Pro ukázku necháme délku 5s, lineární průběh a nekonečné opakování:

.okraj3{
    width: 300px;
    height: 200px;
    background-color: lightblue;
    border: 5px solid;
    border-image-slice: 1;
    border-image-source: linear-gradient(var(--angle), #0ebeff, #ffdd40, #ae63e4, #47cf73);
    animation: animace 5s linear infinite;
}

@keyframes animace{
    to{--angle: 360deg;}
}

V nastavení keyframes animace používáme pouze definici toho, jak chceme aby element vypadal po skončení animace, v tomto případě změnu hodnoty v proměnné --angle z 0deg na 360deg: `

Díky tomu se nám barvy okraje pěkně dokolečka mění. Často se dnes můžeme setkat také s animacemi, které jsou napsané pomocí <svg> tagů. Ty už jsou ale obsahově na samostatnou kapitolu.

Pokud něčemu nerozumíte, doporučuji 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 - Okraje a rámečky v CSS3, si vyzkoušíme nabyté zkušenosti z předchozích lekcí.

 

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.