Lekce 14 - Pokročilejší okraje a rámečky v CSS3

V minulé lekci, Okraje a rámečky v CSS3, jsme si ukázali, jak pracovat se vzhledy okrajů, jaké jim lze nastavit barvy, velikost a styl.

Vítejte u další lekce ohledně vlastností CSS3, ve které si ukážeme, jak pracovat s tvarem okrajů rámečků a jeho vzhledu. V této lekci se tedy naučíme udělat následující:

Vlastnost border-radius

Díky této vlastnosti můžeme rámečkům nastavit poloměr zakulacení rohů rámečku okolo HTML elementu. Tato vlastnost je shrnující a umožňuje nastavit všechny 4 rohy najednou. Dříve se pro tento efekt musely ručně vytvářet obrázky, nyní postačí jediný řádek v CSS. Hodnoty můžeme zadávat v jakýchkoliv jednotkách (px, %, rem atd.). Zadávání hodnot funguje stejně jako u ostatních nastavení z minulé lekce. Použijeme pro ukázku nějaký tag <div> na rámeček:

<div class="okraj">

</div>

Nastavíme elementu šířku, výšku a plný rámeček o velikosti 3px:

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

Nyní přidáme do třídy okraj vlastnost border-radius s hodnotou 10px:

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

Výsledkem je, že jsou okraje nyní lehce zaoblené. Čím větší je použitá hodnota (např. 100%), tím více je okraj zakulacen:

Zadat můžeme dokonce 2 sady hodnot, abychom nastavili každé polovině rohu jiný poloměr. Hodnoty se zadávají stejně, jako výše, pouze se přidají další za lomítkem, které nastavují druhou polovinu rohů. Hodnoty před lomítkem jsou vodorovné poloměry, za lomítkem svislé:

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

Při bližším pohledu je vidět že rohy jsou sice zaoblené, ale nerovnoměrné:

Tato vlastnost využívá i pro nastavení zaoblení okrajů obrázků, tabulek, tlačítek atd. Pojďme si tedy ukázat v rychlosti tlačítko, kde se zaoblené rohy v dnešní době hodně používají:

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

Nastavili jsme rámeček, jeho šířku, barvu a styl. Dále jsme nastavili zakulacení, vnitřní odsazení (padding), barvu textu, styl textu (ať není text podtržen) a nakonec jsme textu na tlačítku nastavili velká písmena. Stačí ještě vytvořit odkaz, čili tag <a>, kde aplikujeme tento styl:

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

Výsledek:

Po najetí kurzorem na tlačítko to nemá žádnou zpětnou vazbu, přidáme si tedy ještě trochu CSS:

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

Výsledek je nyní mnohem lepší:

Vlastnost outline

Pomocí CSS3 vlastnosti outline nastavujeme obrys okolo rámečku HTML elementu. Obrys je velmi podobný rámečku, na rozdíl od něj ale nepřidává elementu na jeho velikosti. Syntaxe je stejná jako u vlastnosti border. Jedná se o shrnující vlastnost, ve které nastavujeme 3 hodnoty:

• šířku,
• styl a
• barvu.

outline: šířka styl barva;

Pro každou složku outline opět existuje zvlášť CSS vlastnost, která ji nastavuje:

• outline-width - Šířka obrysu
• outline-style - Styl obrysu
• outline-color - Barva obrysu

Jako příklad nastavíme v naší třídě okraj vlastnost outline na hodnotu 6px double #0d7b1b, barva je zelená:

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

Výsledek:

Vlastnost border-image

Místo barvy můžeme jako pozadí rámečku nastavit také obrázek. Prohlížeč vezme námi zvolený obrázek, ořízne jeho okraje a ty poté použije. Tato vlastnost je také shrnující, a forma jejího zápisu je následující:

border-image: source slice width outset repeat;

• border-image-source - Odkaz na místo, kde je obrázek uložen.
• border-image-slice - Oříznutí obrázku.
• border-image-width - Nastavení šířky rámečku.
• border-image-outset - Jak daleko od obsahu elementu má být obrázkový rámeček.
• border-image-repeat - Typ opakování vzoru obrázku.

Vybereme si nyní nějaký obrázek, v našem případě obrázek s modrými kosočtverci:

a přidáme do třídy okraj vlastnost border-image:

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

Zde je velice důležité zachovat vlastnost border (respektive styl a šířku), jinak se nám okraj nevykreslí:

Pokud chceme změnit šířku rámečku, můžeme použít buď vlastnost border-image-width nebo nastavit šířku v rodičovské vlastnosti border:

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

Vlastnost border-image-width nám předešlou hodnotu z vlastnosti border přepíše (je níže v CSS dokumentu, má tedy vyšší prioritu):

Dále můžeme pomocí vlastnosti border-image-outset nastavit, jak daleko chceme, aby se rámeček zobrazil od obsahu. Pro lepší viditelnost nastavíme elementu ještě barvu pozadí. Opět lze zadat jednu hodnotu pro nastavení všech stran nebo více hodnot pro specifické 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 vlastnost border-image-outset na hodnotě 25px, nalevo bez této vlastnosti:

border-image-slice

Tato vlastnost nám určuje, jak se ořezávají rohy obrázku. V praxi se používá především proto, že při jejím zápisu můžeme kromě číselné hodnoty přidat také hodnotu fill, což způsobí, že oříznutý obrázek se nastaví také jako pozadí obsahu rámečku:

border-image-slice: fill 30%;

Vytvoříme si nyní příklad pozadí:

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

Výsledek:

border-image-repeat

Nakonec pomocí vlastnosti border-image-repeat nastavujeme, jak se bude chovat vzor obrázku na stranách. Zadávat můžeme jednu nebo více hodnot pro nastavení jednotlivých stran:

• stretch (výchozí) - Obrázek rámečku se roztáhne kolem elementu.
• repeat - Obrázek se opakuje, aby zaplnil celý prostor.
• round - Rámeček se opakuje tak, aby zaplnil celý prostor, ale nebyl nikde oříznutý (může se tedy i trochu roztáhnout).
• space - Obrázek se opakuje a pokud nezaplní celou plochu, ke konci se vloží mezera (velmi podobné hodnotě repeat).

Nyní si ukážeme tři rámečky různých hodnot:

.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 přidáme jen elementy <div> se specifickými třídami, jako výsledek získáme tyto efekty:

V další lekci, Okraje a rámečky v CSS3 - Animace, si ukážeme, jak mohou vypadat animace rámečků a jak s nimi pracovat u moderních stránek.