25. diel - Nastaviteľná veľkosť a orezávanie prvkov

V minulom článku, Pretekaniu obsahu v CSS 3 , sme sa zaoberali pretekaním obsahu cez hranice prvku.

V tejto lekcii sa budeme zaoberať vlastnosťami, ktoré nám ďalej umožňujú pracovať s rozmery a tvary prvkov na stránke. Najprv sa pozrieme na vlastnosť resize, pomocou ktorej môže samotný návštevník stránky meniť rozmer určitého elementu, čo sa hodí napríklad u textových vstupov, do ktorých chce návštevník napísať viac textu a chce ho celistvejším vidieť pred sebou. Neskôr sa budeme zaoberať vlastnosťami clip a clip-path, ktoré slúžia na orezanie viditeľnej časti napr. obrázku.

Resize

Pomocou CSS 3 vlastnosti resize môžeme užívateľovi dovoliť rozťahovať element. V predvolenom nastavení sa môže napr. Textarea (vstupný formulár pre zadanie viac riadkového textu) ľubovoľne rozťahovať. Tento atribút stále nepodporuje Internet Explorer a už ani nikdy nebude, pretože nie je už vyvíjaný. Alternatívne môžete využiť Microsoft Edge. Vlastnosť sa dedia.

Hodnoty

• none (predvolené) - Používateľ nemôže zmeniť veľkosť elementu.
• both - Užívateľ môže element roztiahnuť horizontálne aj vertikálne.
• horizontal - Element sa môže roztiahnuť iba horizontálne.
• vertical - Element sa môže roztiahnuť iba vertikálne.
• initial - Nastaví vlastnosť na predvolenú hodnotu (teda na none).
• inherit - Hodnota sa zdedí z rodičovského elementu.

Pre využitie vlastnosti resize musíme nastaviť atribút overflow na inú hodnotu ako visible.

Ukážka

Vytvorme si element <div> s rozmermi 300px × 100px s modrým, plným rámčekom o šírke 1px, ktorý bude môcť užívateľ roztiahnuť iba vertikálne. Vlastnosti overflow nastavíme hodnotu auto:

div {
   width: 300px;
   height: 100px;
   border: 1px solid blue;
   resize: vertical;
   overflow: auto;
}

HTML je jednoduché:

<div>
Tento div může změnit velikost pouze vertikálně.</div>

výsledok:

Clip

Pomocou CSS3 vlastnosti clip nastavujeme viditeľnú časť absolútne pozicovaných elementov. Namiesto nezobrazeného obsahu bude ponechané prázdne miesto.

Vlastnosť clip je však zastaraná, využite namiesto alternatívu clip-path, o ktorej si povieme za chvíľu.

Syntaxe

V kóde nižšie je vytvorený obdĺžnikový orez, u ktorého sa postupne určujú jednotlivé rozmery:

clip: rect(nahoře, vpravo, dole, vlevo);

Čo to vlastne znamená? Jednotlivé čísla znamenajú vzdialenosť pomyselnej línie reze od horného (1. a 3. číslo) či ľavého (2. a 4.) okraje. Medzi týmito líniami potom vznikne výsledný rez. Z logiky veci teda vyplýva, že 1. číslo (hore) musí byť menší ako 3. číslo (dole) a 2. číslo (vpravo) musí byť väčšia ako 4. číslo (vľavo). V opačnom prípade nič z obrázku neuvidíme.

Pomôcť môže tento obrázok (zadané čísla rozmerov nezodpovedajú úplne presne):

Hodnoty

• tvar - Element je orezaný podľa zadaného tvaru. Podporovaným tvarom je len obdĺžnik, ktorý zadávame funkcií rect (pozri syntaxe vyššie).
• auto (predvolené) - Celý element je viditeľný.
• inherit - Vlastnosť clip bude zdedená od rodičovského elementu.

Ukážka

Obmedzme viditeľnú časť obrázka iba na jeho časť.

Takto bude vyzerať náš kód v CSS:

#papousek {
   position: absolute;
   clip: rect(80px, 700px, 430px, 240px);
}

A v HTML nastavíme obrázok klasickým spôsobom, avšak s identifikátorom #papousek:

<img src="images/73483/css/papousek.png" alt="Papoušek" id="papousek" />

výsledok:

Clip-path

Vlastnosť clip-path nám umožní orezať HTML element na jednoduchý geometrický tvar, ako je kruh, elipsa alebo zložitejšie polygóny.

Použitie

Na prvý príklad nám bude stačiť vložiť do HTML obyčajný obrázok:

<div class="content">
    <img src="image.jpg" />
</div>

Na začiatok môžeme skúsiť vykresliť obrázok papagája ako kruh. V CSS upravíme štýl pre náš <img>, aby sme pomocou clip-path dosiahli orezanie do kruhu.

HTML zostáva rovnaké, ale zmeníme CSS:

#papousek {
   height: 300px;
   clip-path: circle(150px);
}

výsledok:

Obrázok sa nám teraz vykreslí ako kruh s polomerom 150px a presne uprostred HTML elementu. Pre vykreslenie kruhu na inej pozícii je potrebné zadať súradnice (HTML kód zostáva stále rovnaký):

#papousek {
   height: 300px;
   clip-path: circle(150px at 20% 30%);
}

výsledok:

Teraz sme presunuli stred kruhu na pozícii 20% šírky a 30% výšky elementu.

Zložitejšie tvary

Ako sme si hovorili na začiatku, s clip-path dokážeme vykresliť aj zložité polygóny. Ako parameter zadáme súradnice bodov, podľa ktorých sa zmení tvar nášho obrázku (HTML kód je opäť rovnaký):

#papousek {
   height: 300px;
   clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
}

výsledok:

So zápisom si môžete pomôcť online nástrojom https://bennettfeely.com/clippy/, kde si jednoducho vyberiete požadovaný tvar a vygenerované CSS potom len skopírujete. Podporovaných tvarov existuje viac, ale pre začiatok iste postačí tie, ktoré sme si v tejto lekcii prebrali.

V ďalšej lekcii, Okraje a rámčeky v CSS 3 (3.časť) , si ukážeme, ako môžu vyzerať animácie rámčekov a ako s nimi pracovať pri moderných stránok.