21. diel - Pokročilejšie okraje a rámčeky v CSS 3

V minulej lekcii, Pozície prvku v CSS3 , sme sa zaoberali umiestnením prvku a ukazovali sme si, že môže byť súčasťou obsahu, zasadený na miesto s pevnými súradnicami alebo prichytený k časti okna prehliadača.

Vitajte u ďalšej lekcie ohľadom vlastností CSS 3, v ktorej si ukážeme, ako pracovať s tvarom okrajov rámčekov a jeho vzhľadu. V tejto lekcii sa teda naučíme urobiť nasledovné:

Vlastnosť border-radius

Vďaka tejto vlastnosti môžeme rámečkům.Do nastaviť polomer zaoblenia rohov rámčeka okolo HTML elementu. Táto vlastnosť je zhrnutím a umožňuje nastaviť všetky 4 rohy naraz. Predtým sa pre tento efekt museli ručne vytvárať obrázky, teraz postačí jediný riadok v CSS. Hodnoty môžeme zadávať v akýchkoľvek jednotkách (px, %, rem atď.). Zadávanie hodnôt funguje rovnako ako u ostatných nastavení z minulej lekcie. Použijeme pre ukážku nejaký tag <div> na rámik:

<div class="okraj">

</div>

Nastavíme elementu šírku, výšku a plný rámček s veľkosťou 3px:

.okraj {
    height: 200px;
    width: 300px;
    border: #bd60be solid 3px;
}

Teraz pridáme do triedy okraj vlastnosť border-radius s hodnotou 10px:

.okraj {
    height: 200px;
    width: 300px;
    border: #bd60be solid 3px;
    border-radius: 10px;
}

Výsledkom je, že sú okraje teraz mierne zaoblené. Čím väčšia je použitá hodnota (napr. 100%), tým viac je okraj zaguľatený:

Zadať môžeme dokonca 2 sady hodnôt, aby sme nastavili každej polovici rohu iný polomer. Hodnoty sa zadávajú rovnako, ako vyššie, iba sa pridajú ďalšie za lomkou, ktoré nastavujú druhú polovicu rohov. Hodnoty pred lomítkom sú vodorovné polomery, za lomkou zvislé:

border-radius: 30px 15px 5px 5px / 5px 30px 15px 5px;

Pri bližšom pohľade je vidieť že rohy sú síce zaoblené, ale nerovnomerné:

Táto vlastnosť využíva aj pre nastavenie zaoblenie okrajov obrázkov, tabuliek, tlačidiel atď. Poďme si teda ukázať v rýchlosti tlačidlo, kde sa zaoblené rohy v dnešnej dobe veľa používajú:

.tlacitko
{
        border: 2px solid #8c66b6;
        border-radius: 25px;
        padding: 5px;
        color: black;
        text-decoration: none;
        text-transform: uppercase;
}

Nastavili sme rámček, jeho šírku, farbu a štýl. Ďalej sme nastavili zaoblenia, vnútorné odsadenie (padding), farbu textu, štýl textu (či nie je text podčiarknutý) a nakoniec sme textu na tlačidle nastavili veľké písmená. Stačí ešte vytvoriť odkaz, čiže tag <a>, kde aplikujeme tento štýl:

<a href="" class="tlacitko">Zaoblené tlačítko</a>

výsledok:

Po nabehnutí kurzorom na tlačidlo to nemá žiadnu spätnú väzbu, pridáme si teda ešte trochu CSS:

.tlacitko:hover
{
   color: white;
   background-color: #8c66b6;
}

Výsledok je teraz oveľa lepšie:

Vlastnosť outline

Pomocou CSS 3 vlastnosti outline nastavujeme obrys okolo rámčeka HTML elementu. Obrys je veľmi podobný rámčeku, na rozdiel od neho ale nepridáva elementu na jeho veľkosti. Syntax je rovnaká ako u vlastnosti border. Jedná sa o zhrňujúcu vlastnosť, v ktorej nastavujeme 3 hodnoty:

• šírku,
• štýl a
• farbu.

outline: šířka styl barva;

Pre každú zložku outline opäť existuje zvlášť CSS vlastnosť, ktorá ju nastavuje:

• outline-width - Šírka obrysu
• outline-style - Štýl obrysu
• outline-color - Farba obrysu

Ako príklad nastavíme v našej triede okraj vlastnosť outline na hodnotu 6px double #0d7b1b, farba je zelená:

.outline {
   border: 3px dotted #4bb4a1;
   outline: 6px double #0d7b1b;
   width: 200px;
   height: 200px;
}

výsledok:

Vlastnosť border-image

Namiesto farby môžeme ako pozadie rámčeka nastaviť aj obrázok. Prehliadač vezme nami zvolený obrázok, oreže jeho okraje a tie potom použije. Táto vlastnosť je aj súhrnné, a forma jej zápisu je nasledovné:

border-image: source slice width outset repeat;

• border-image-source - Odkaz na miesto, kde je obrázok uložený.
• border-image-slice - Orezanie obrázka.
• border-image-width - Nastavenie šírky rámčeka.
• border-image-outset - Ako ďaleko od obsahu elementu má byť obrázkový rámik.
• border-image-repeat - Typ opakovanie vzoru obrázku.

Vyberieme si teraz nejaký obrázok, v našom prípade obrázok s modrými kosoštvorcami:

a pridáme do triedy okraj vlastnosť border-image:

.okraj {
    height: 200px;
    width: 200px;
    border: #bd60be solid 100px;
    border-image: url("ramecek.png");
}

Tu je veľmi dôležité zachovať vlastnosť border (respektíve štýl a šírku), inak sa nám okraj nevykreslí:

Ak chceme zmeniť šírku rámčeka, môžeme použiť buď vlastnosť border-image-width alebo nastaviť šírku v rodičovskej vlastnosti border:

.okraj {
    height: 200px;
    width: 200px;
    border: #bd60be solid 100px;
    border-image: url("ramecek.png");
    border-image-width: 50px;
}

Vlastnosť border-image-width nám predošlú hodnotu z vlastnosti border prepíše (je nižšie v CSS dokumente, má teda vyššiu prioritu):

Ďalej môžeme pomocou vlastnosti border-image-outset nastaviť, ako ďaleko chceme, aby sa rámik zobrazil od obsahu. Pre lepšiu viditeľnosť nastavíme elementu ešte farbu pozadia. Opäť možno zadať jednu hodnotu pre nastavenie všetkých strán alebo viac hodnôt pre špecifické vlastnosti:

.okraj{
    height: 200px;
    width: 200px;
    text-align: center;
    border: #bd60be solid 100px;
    border-image: url("ramecek.png");
    border-image-width: 50px;
    background-color: lightblue;
    border-image-outset: 25px;
}

Napravo máme vlastnosť border-image-outset na hodnote 25px, naľavo bez tejto vlastnosti:

border-image-slice

Táto vlastnosť nám určuje, ako sa orezávajú rohy obrázku. V praxi sa používa predovšetkým preto, že pri jej zápise môžeme okrem číselné hodnoty pridať tiež hodnotu fill, čo spôsobí, že orezaný obrázok sa nastaví aj ako pozadie obsahu rámčeka:

border-image-slice: fill 30%;

Vytvoríme si teraz príklad pozadie:

.ramecek1 {
   border-image: url('ramecek.png') round;
   border-width: 20px;
   border-image-slice: fill 30%;
   width: 300px;
   height: 100px;
}

výsledok:

border-image-repeat

Nakoniec pomocou vlastnosti border-image-repeat nastavujeme, ako sa bude správať vzor obrázku na stranách. Zadávať môžeme jednu alebo viac hodnôt pre nastavenie jednotlivých strán:

• stretch (predvolené) - Obrázok rámčeku sa roztiahne okolo elementu.
• repeat - Obrázok sa opakuje, aby zaplnil celý priestor.
• round - Rámček sa opakuje tak, aby zaplnil celý priestor, ale nebol nikde orezaný (môže sa teda aj trochu roztiahnuť).
• space - Obrázok sa opakuje a ak nezaplní celú plochu, ku koncu sa vloží medzera (veľmi podobné hodnote repeat).

Teraz si ukážeme tri rámčeky rôznych hodnôt:

.ramecek1, .ramecek2, .ramecek3 {
    border-image: url("ramecek.png");
    border-image-slice: fill 35%;
    border-image-width: 31px;
    border-image-repeat: repeat;
    height: 200px;
    width: 200px;
    float: left;
}
.ramecek2 {
    border-image-slice: fill 35%;
    border-image-repeat: stretch;
}
.ramecek3 {
    border-image-slice: fill 49%;
}

V HTML si pridáme len elementy <div> so špecifickými triedami, ako výsledok získame tieto efekty:

V nasledujúcej lekcii, Vykresľovanie, prekrývanie a zvislé zarovnanie prvkov v CSS3 , sa pozrieme na vlastnosti upravujúce spôsob vykresľovania, prekrývania a zvislé zarovnanie elementov.