Charakterystyka właściwości clip CSS

Czas czytania: < 1 minut

Z pomocą własność CSS clip możemy określić, który fragment danego obiektu (np. grafiki) ma być widoczny lub też nie.

Z pomocą tej właściwości możemy nadawać jedynie prostokątne lub kwadratowe kształty. Nieco bardziej nietypowe jak np. trójkąty nie są niestety możliwe z tą właściwością. Właściwość Clip jest rozpoznawana przez większość przeglądarek.

Jak skorzystać z właściwości clip

Na początek przekształcane z pomocą CSS obiekty muszą posiadać inną właściwość: position absolute lub fixed.

Właściwość Clip pod wieloma względami przypomina inne. Domyślnym jej ustawieniem jest auto – w takim przypadku ilustracja lub inny obiekt jest całkowicie widoczny.

clip:auto;

„auto” to całkowita, naturalna wielkość obiektu.

Przycinanie obiektu

przykład:

See the Pen clip by Aura (@Julka85) on CodePen.dark

 

Jak widać w zależności od ustawionych parametrów uzyskujemy inny efekt – fragment obrazka widoczny lub ukryty. Oczywiście możemy uzyskać również całkowitą niewidoczność wystarczy ustawić ustawienia na 0,0,0,0.

Inne metody przycinania obrazów omówiłam:
https://www.aurainweb.pl/2016/08/dopasowywanie-tekstu-ksztaltu-okregu/