logo-tworzenie-stron-legnica

config

Style CSS

Spis alfabetyczny stylów CSS.

Ściąga CSS - przykłady, style CSS alfabetycznie, spis stylów CSS, właściwości CSS, skorowidz stylów CSS.


 

Właściwość CSS clip-path

Definicja stylu, przeznaczenie i użycie clip-path

Właściwość clip-path umożliwia przycięcie elementu do podstawowych kształtów lub do źródła SVG.

Uwaga: właściwość clip-path zastąpi przestarzałą właściwość clip.

Wartości właściwości clip-path

Wartość Opis
clip-source Definiuje adres URL, natomiast dla elementu SVG ścieżkę clipPath.
basic-shape Przycina element do podstawowego kształtu: koła, elipsy, wielokąta lub wartości inset.
margin-box Używa pola marginesu (margin)jako odniesienia.
border-box Używa pola obramowania, ramki (border) jako odniesienia.
padding-box Używa pola dopełnienia (padding)jako odniesienia.
content-box Używa pola zawartośći (content-box) jako odniesienia.
fill-box Używa object bounding box jako odniesienia.
stroke-box Używa stroke bounding box jako odniesienia.
view-box Używa SVG viewport jako pola odniesienia.
none Brak przycinania. Ustawienie domyślne.
initial Ustawia tę właściwość na jej wartość domyślną.
inherit Dziedziczy tę właściwość z elementu nadrzędnego.

Składnia CSS clip-path

clip: clip-source | basic-shape | margin-box | border-box | padding-box | content-box | fill-box | stroke-box | view-box | none | initial | inherit;

Wsparcie przeglądarek dla właściwości clip-path

Liczba w tabeli określa pierwszą wersję przeglądarki w pełni obsługującą tę właściwość.

Liczby przed -webkit- określają pierwszą wersję, która działała z prefiksem.

Właściwość chrome edge firefox safari opera
clip-path 55.0
23.0 -webkit-
79.0* 54.0 9.1
6.1 -webkit-
42.0
15.0 -webkit-

* Przed wersją 79 Edge obsługiwał tylko clip-path w elementach SVG (nie w elementach HTML).

Przykładowe zastosowania z właściwością clip-path

Kliknij wartości właściwości poniżej, aby zobaczyć wynik.

Właściwość CSS:
clip-path:

Uwaga: właściwość clip-path nie jest obsługiwana w przypadku elementów HTML w Edge / IE.

Rezultat:
Kod CSS:
img#myImg {
clip-path: circle(40%);
}
 

 

Przykłady właściwości clip-path

1. clip-path: circle(50%);

2. clip-path: inset(20px 40px 55px 70px);
-webkit-clip-path: inset(20px 40px 55px 70px);

3. clip-path: circle(110px at 160px 140px);
-webkit-clip-path: circle(110px at 160px 140px);

4. clip-path: ellipse(130px 60px at 140px 90px);

5. clip-path: polygon(35px 45px, 410px 60px, 260px 200px);

 

Witold Czuba Tworzenie stron Warszawa, Wrocław i Legnica | Grafik | Strony , , Marynarska 54, 59-220, Legnica, dolnośląskie, Polska, tel. +48 780 060 995, Pon. - pt. 8:00 - 17:00

 

 

Witold Czuba

Tworzenie stron Warszawa, Wrocław i Legnica | Grafik | Strony

Marynarska 54
59-220, Legnica,
dolnośląskie, Polska,
tel. +48 780 060 995,
Pon. - pt. 8:00 - 17:00