dodání ihned! nové
Pouze tento týden sleva až 80 % na e-learning týkající se PHP. Zároveň využij akce až 30 % zdarma při nákupu e-learningu. Více informací.
Hledáme programátora do rostoucího týmu ITnetwork.cz, 100% home office, 100% flexibilní pracovní doba. Více informací
discount week 30

Lekce 19 - Pokročilejší okraje a rámečky v CSS 3

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

Vítejte u další lekce ohledně vlastností CSS 3, 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í:

Okraje a rámečky 2
index.html

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:

Okraje a rámečky 2
index.html

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é:

Okraje a rámečky 2
index.html

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:

Zaoblené tlačítko
index.html
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

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ší:

Zaoblené tlačítko
index.html

Vlastnost outline

Pomocí CSS 3 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:

Okraje a rámečky 2
index.html

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í:

Okraje a rámečky 2
localhost

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):

Okraje a rámečky 2
localhost

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:

Okraje a rámečky 2
index.html

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:

Okraje a rámečky 2
index.html

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:

Okraje a rámečky 2
index.html

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


 

Předchozí článek
Okraje a rámečky v CSS 3
Všechny články v sekci
CSS3 od A do Z
Přeskočit článek
(nedoporučujeme)
Okraje a rámečky v CSS 3 (3. část)
Článek pro vás napsal Filip Opluštil
Avatar
Uživatelské hodnocení:
2 hlasů
Aktivity

 

 

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í!