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):
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í:
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 |
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().
Jak psát web píše Yuhů, Dušan Janovský. Kontakt.