26. diel - Okraje a rámčeky v CSS 3 (3.časť)

V predošlej lekcii, Nastaviteľná veľkosť a orezávanie prvkov , sme sa zaoberali tým, ako umožniť užívateľovi zmenu veľkosti prvku, popr. upraviť viditeľnú oblasť elementu.

Vitajte u ďalšej lekcie ohľadom nastavenia v CSS 3, v ktorej si ukážeme, ako môžu vyzerať animácie rámčekov a ako s nimi pracovať pri moderných stránok. V tejto lekcii sa teda naučíme urobiť nasledovné:

Vlastnosť box-shadow

Posledný vlastnosť, ktorá sa vzťahuje ku vzhľadu okolo elementu je box-shadow. Pri vytváraní nefunguje ako okraj elementu, ale ako ďalšie elementy umiestnené buď do pozadia, alebo do popredia. Vďaka tomu sa na stránke nespráva ako ďalší element, ale iba ako rozširujúca časť už existujúceho. Máme celkom 6 hodnôt, ktoré v tejto vlastnosti môžeme špecifikovať.

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

• 1px - Posunutie podľa osi x (doľava alebo doprava)
• 2px - Posunutie podľa osi y (nahor alebo nadol)
• 3px - Veľkosť rozmazanie
• 4px - Veľkosť tieňa
• nastavenie farby
• Špecifikácia umiestnenia (za elementom / v elemente)

Nášmu prvému elementu vytvoríme teda triedu s názvom okraj1. Nastavíme mu šírku 300px, výšku 200px a ľubovoľnú farbu pozadia:

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

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

K tomu pridáme vlastnosť box-shadow s posunom 10px a 10px, rozmazaním 5px a červenou farbou:

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

Veľkosť tieňa a umiestnenie môžem pri definícii pokojne vynechať. Výsledok bude vyzerať takto:

Ak chceme, je možné v rámci jedného elementu nastaviť aj viac týchto vlastností naraz. Pridáme si k našej vlastnosti pomocou hodnoty inset ešte ďalšie vnútorné tieň:

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

Zakaždým stačí len čiarkou oddeliť nastavenie ďalšieho tieňa.

Vlastnosť border-block

Táto vlastnosť sa používa iba zriedka, avšak je dobré vedieť, že existuje. Touto vlastnosťou nastavujeme okraj protiľahlých strán okolo HTML elementu. Podobne ako u mnohých ďalších CSS 3 vlastností, i border-block je zhrnutím vlastnosť, v ktorej nastavujeme celkom 3 vlastnosti:

• šírku - border-block-width - Šírka rámika
• štýl - border-block-style - Štýl rámčeku
• farbu - border-block-color - Farba rámčeku

border-block: šířka styl barva;

Opäť nám nezáleží na ich poradie pri zápise a každú zložku možno nastaviť zvlášť. Vytvoríme si ďalšie html element s novou triedou okraj2:

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

Použijeme rovnaké základné nastavenia ako u prvého elementu, len pridáme vlastnosť border-block s veľkosťou 5px, bodkovaným vzorom a žltou farbou:

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

U elementu sa teda vytvoril horný a spodný okraj, každý s výškou 5px, čo znamená, že celková výška elementu je potom 210px. Ak by sme chceli nastavovať ľavý a pravý okraj, stačí iba pridať doplňujúce vlastnosť writing-mode. Tá nám definuje orientáciu písma, teda či píšeme vertikálne, alebo horizontálne. Pre ukážku doplníme do elementu ešte nejaký text:

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

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

Opäť musíme pamätať na to, že týmto nastavením zväčšíme šírku elementu o celkom 10px.

Pokročilé animácie a využitie okrajov

Ako posledný vec si ukážeme, ako môžu dnes na stránkach vyzerať animácie okrajov. Tieto zložitejšie funkcie však vyžadujú hlbšie znalosti CSS3. Najprv skúsime vytvoriť animáciu okraje, pri ktorej sa budú dokola meniť farby. Začneme ďalším elementom s triedou okraj3:

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

Do triedy okraj3 pridáme vlastnosť border s šírkou 5px:

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

Ďalej doplníme vlastnosť border-image-slice a border-image-source, v ktorých nastavíme veľkosť 1 a funkciu pre farebnú 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);
}

Vnútri funkcie linear-gradient() nastavíme ako prvú hodnotu premennú var(--angle) a potom farby, ktoré chceme v našej farebnej palete zahrnúť. Premennú var(--angle) musíme ale definovať, inak by nám potom nefungovala animácie. To urobíme pomocou nasledujúceho CSS kódu:

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

Dôležitá pre nás je hodnota initial-value: 0deg;, Ktorú budeme v animácii meniť.

Teraz už len doplníme jednoduchú animáciu pomocou vlastnosti animation. Pre ukážku necháme dĺžku 5s, lineárny priebeh a nekonečné opakovanie:

.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žívame iba definíciu toho, ako chceme aby element vyzeral po skončení animácie, v tomto prípade zmenu hodnoty v premennej --angle z 0deg na 360deg: `

Vďaka tomu sa nám farby okraja pekne dokolečka mení. Často sa dnes môžeme stretnúť aj s animáciami, ktoré sú napísané pomocou <svg> tagov. Tie už sú ale obsahovo na samostatnú kapitolu.

Ak niečomu nerozumiete, odporúčam stiahnuť si súbory v prílohe k tejto lekcii a všetko si poriadne vyskúšať:)

 

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.