November Black Friday C/C++ week
Black Friday je tu! Využij jedinečnou příležitost a získej až 80 % znalostí navíc zdarma! Více zde
Pouze tento týden sleva až 80 % na e-learning týkající se C/C++

clip-path - Český CSS 3 manuál

Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem.
Vydávání, hosting a aktualizace umožňují jeho sponzoři.

Dnes si vysvětlíme, co je a jak se dá při tvorbě designu využít CSS vlastnost clip-path.

 

Co je to clip-path

Vlastnost clip-path nám umožní oříznout HTML element na jednoduchý geometrický tvar, jako je kruh, složitější polygony nebo dle SVG.

 

Použití

Na první příklad nám bude stačit vložit do HTML obyčejný obrázek:

<div class="content">
    <img src="image.jpg" />
</div>
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

Na začátek můžeme zkusit vykreslit obrázek jako kruh. V CSS upravíme styl pro náš <img>, abychom pomocí clip-path dosáhli oříznutí do kruhu:

.content img {
    height: 300px;
    clip-path: circle(150px);
}

Výsledek:

clip-path circle

Obrázek se nám nyní vykreslí jako kruh o poloměru 150px a přesně uprostřed HTML elementu. Pro vykreslení kruhu na jiné pozici je třeba zadat souřadnice:

.content img {
    height: 300px;
    clip-path: circle(150px at 20% 30%);
}

Výsledek:

clip-path circle

Nyní jsme přesunuli střed kruhu na pozici 20% šířky a 30% výšky elementu.

Složitější tvary

Jak jsme si říkali na začátku, s clip-path dokážeme vykreslit i složité polygony. Jako parametr zadáme souřadnice bodů, podle kterých se změní tvar našeho obrázku:

.content img {
    height: 300px;
    clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
}

Výsledek:

clip-path polygon

Se zápisem si můžete pomoci webem https://bennettfeely.com/clippy/, kde si jednoduše vyberete požadovaný tvar a vygenerované CSS pak jen zkopírujete.


 

 

Aktivity (2)

 

 

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