Clip

CSS vlastnost clip určuje vystřižený obdélník, přes který bude prvek vidět.

clip
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):

  1. a je vzdálenost horního okraje ostřihu od horního okraje prvku
  2. b je vzdálenost pravého okraje ostřihu od levého okraje prvku
  3. c je vzdálenost spodního okraje ostřihu od horního okraje prvku
  4. 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)

clip:rect(a b c d);

Nebo jiný obrázek z textu ořez a skrollování:

obrázek s čísly, z nichž se dá pochopit jejich pořadí

Podpora

Podpora clip
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

Pokus s CSS vlastností clip.

Test CSS vlastností clip.

 

Reklama

www.webhosting-c4.cz, extra rychlý SSD webhosting s doménou v ceně
o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

CSS kurz Přehled hodnot Vlastnosti CSS příklady

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.