Clip
CSS vlastnost clip určuje vystřižený obdélník, přes který bude prvek vidět.
| hodnoty | ostřihnutí prvku |
|---|---|
| rect(a b c d) | souřadnice obdélníku, přes který je prvek vidět, zbytek je maskován |
| none | prvek nebude ostřižen |
Velice zřídka používaná a skoro nepoužitelná css vlastnost. Umožňuje skrýt okraje prvků. Dá se aplikovat pouze na prvky s position: absolute.
Při zápisu rect(a b c d):
- a je vzdálenost horního okraje ostřihu od horního okraje prvku
- b je vzdálenost pravého okraje ostřihu od levého okraje prvku
- c je vzdálenost spodního okraje ostřihu od horního okraje prvku
- d je vzdálenost levého okraje ostřihu od levého okraje prvku
všechno v pixelech. Vidíte, že se jedná o klasické pořadí stran, akorát je
trochu nelogické odvození, odkud se počítají. Místo jakéhokoli údaje se dá
zadat auto, v tom směru se nebude ostřihávat. Může pomoci obrázek, který
předpokládá výše zmíněný zápis
clip: rect(a b c d)
Nebo jiný obrázek z textu ořez a skrollování:
Podpora
| Prohlížeč | Podpora ve verzích | Poznámka |
|---|---|---|
| Internet Explorer | 4, 5, 5.5, 6 | pouze pro prvky s position: absolute |
| Firefox | všechny verze | |
| Opera | 5, 6, 7 | zobrazovala pozadí i pod odstřihnutou částí |
| Chrome | ano |
Ořez do konkrétního tvaru clip-path
Najděte si někde CSS vlastnost clip-path.
Příklad oříznutí na elipsu, která má vodorovnou osu dlouhou 100px, svislou 180px a střed má umístěný ve 33 procentech šířky a 50 procentech výšky objektu:
clip-path: ellipse(100px 180px at 33% 50%);
Možno kombinovat s vlastností shape-outside při obtékání. Obě vlastnosti clip-path i shape-outside mají stejný zápis tvarů hodnot, tedy circle(), ellipse(), inset() a polygon().
Příklady
Reklama
