Moderní tvorba webových aplikací

O webu

Oříznutí CSS vlastností clip

CSS vlastnost clip slouží k oříznutí obsahu elementu.

2 minuty

Už před rokem 2000 (od IE 4) bylo možné absolutně posicované elementy oříznout ve tvaru obdélníku. Více na JPW.

V roce 2014 začíná být pomalu možné provádět i ořezávání nepravidelných tvarů vlastností clip-path. Výhoda a velký rozdíl také je, že pro oříznutí už nemusí být element absolutně posicovaný.

Podpora

Nepravidelné oříznutí podporuje Chrome 24+, Opera 15+ a Safari 8+.

Zápis

Tvar je možné zadat jako polygon.

Nejjednodušší útvar je proto trojůhelník.

element {
  clip-path: polygon(
    50% 0%, 
    0% 100%, 
    100% 100%
  );
}

Výsledek:

Oříznutí trojúhelníkem

Funkci polygon se předávají jednotlivé body. Každý bod má dvě hodnoty – souřadnici zleva a souřadnici shora. Hodnotu je možné zadávat v obvyklých délkových jednotkách. Pro oříznutí, co se přizpůsobuje velikosti elementu, je vhodné použít procenta.

Zadané hodnoty mohou být i mimo hranice ořezávaného elementu (záporné nebo větší než 100 %). Oříznutí se ale aplikuje jen na element, co ho má nastavené.

Oříznutí je skutečné, tj. například po najetí myši bude oříznutý obsah reagovat jen na ploše, která po oříznutí zbyla.

Živá ukázka

Nástroje

Protože kreslit polygon pro oříznutí by byla nuda, existují nástroje, kde si jde potřebnou cestu naklikat.

Clippy — CSS clip-path maker

Související články

Znázornění možnosti scrollování

Jak dát uživateli informaci, že je možné někam scrollovat.

10 minut

Plynulé scrollování na obsah

Jak vytvořit plynulé odrolování na určitou část stránky.

6 minut

Různá šířka <input type=number> s min/max

Proč má <input type=number> různou výchozí šířku v závislosti na min/max atributech.

3 minuty

Poskakování stránky kvůli posuvníku

Jak zabránit, aby obsah stránky poskakoval v závislosti na posuvníku.

8 minut

Web jecas.cz píše Bohumil Jahoda, kontakt
Seznam všech článků
2013–2025