Autor publikacji: Virtual Patriot - Administrator

mask-clip

Data publikacji: Maj 03 2017
Ostatnio edytowano: Wrzesień 07 2020

Zobacz również: w3.org - mask-clip property (LV1)

Przeznaczenie właściwości `mask-clip`

Za pomocą właściwości mask-clip możemy określić sposób przycięcia maski interesującego nas elementu HTML.

Informacje dodatkowe: brak

Informacje techniczne o właściwości `mask-clip`

przeznaczenie: element HTML każdego typu
pozycja: dowolna
dziedziczenie: nie
wartość initial: border-box
wyjątki initial: brak
animowanie: tak (animacja schodkowa)

Interpretacja właściwości `mask-clip`

: tak
: tak, lecz z przedrostkiem -webkit-
: tak, lecz z przedrostkiem -webkit-
: tak, lecz z przedrostkiem -webkit-
: nie
: tak, lecz z przedrostkiem -webkit-

Zobacz więcej informacji o interpretacji właściwości mask-clip.

Opis wartości właściwości `mask-clip`

border-box

Wyjaśnienie

Wartość border-box jest domyślną wartością właściwości mask-clip.

Domyślnie maska elementu HTML jest przycięta do obszaru wyznaczonego przez zewnętrzne krawędzie obramowania tego elementu HTML.

Przykład

  mask-clip:border-box;

ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych

Maska przykładowego elementu "div" jest przycięta do obszaru wyznaczonego przez zewnętrzne krawędzie obramowania przykładowego elementu "div".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        mask-image:url(https://webkod.pl/files/css/maska-01.png);
        mask-repeat:no-repeat;
        -webkit-mask-image:url(https://webkod.pl/files/css/maska-01.png);
        -webkit-mask-repeat:no-repeat;
        border:15px solid black;
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>
      ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
    </div>

  </body>
</html>

padding-box

Wyjaśnienie

Za pomocą wartości padding-box właściwości mask-clip możemy sprawić, że maska interesującego nas elementu HTML zostanie przycięta do obszaru wyznaczonego przez zewnętrzne krawędzie marginesów wewnętrznych tego elementu HTML.

Przykład

  mask-clip:padding-box;

Maska przykładowego elementu "div" została przycięta do obszaru wyznaczonego przez zewnętrzne krawędzie marginesów wewnętrznych przykładowego elementu "div", ponieważ do wspomnianego elementu "div" została dodana właściwość "mask-clip" wraz z wartością "padding-box".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        mask-image:url(https://webkod.pl/files/css/maska-01.png);
        mask-repeat:no-repeat;
        mask-clip:padding-box;
        -webkit-mask-image:url(https://webkod.pl/files/css/maska-01.png);
        -webkit-mask-repeat:no-repeat;
        -webkit-mask-clip:padding-box;
        border:15px solid black;
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>
      ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
    </div>

  </body>
</html>

content-box

Wyjaśnienie

Za pomocą wartości content-box właściwości mask-clip możemy sprawić, że maska interesującego nas elementu HTML zostanie przycięta do obszaru wyznaczonego przez rozmiar obszaru zawartości tego elementu HTML.

Przykład

  mask-clip:content-box;

Maska przykładowego elementu "div" została przycięta do obszaru wyznaczonego przez rozmiar obszaru zawartości przykładowego elementu "div", ponieważ do wspomnianego elementu "div" została dodana właściwość "mask-clip" wraz z wartością "content-box".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        mask-image:url(https://webkod.pl/files/css/maska-01.png);
        mask-repeat:no-repeat;
        mask-clip:content-box;
        -webkit-mask-image:url(https://webkod.pl/files/css/maska-01.png);
        -webkit-mask-repeat:no-repeat;
        -webkit-mask-clip:content-box;
        border:15px solid black;
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>
      ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
    </div>

  </body>
</html>

sekwencja wartości

Wyjaśnienie

Jeżeli zdecydowaliśmy się na to, aby interesujący nas element HTML posiadał kilka masek jednocześnie, wtedy za pomocą sekwencji kilku oddzielonych od siebie znakiem przecinka wartości należących do właściwości mask-clip możemy określić osobny sposób przycięcia poszczególnej maski interesującego nas elementu HTML.

Podana przez nas sekwencja wartości właściwości "mask-clip" nie może zawierać wartości globalnych.

Jeżeli podana przez nas sekwencja wartości właściwości "mask-clip" będzie zawierała mniejszą liczbę wartości niż liczba obrazków tworzących poszczególne maski elementu HTML, wtedy przeglądarka internetowa powtórzy podaną przez nas sekwencję wartości właściwości "mask-clip" tak, aby uzyskać wystarczającą liczbę wartości.

Przykład

  mask-clip:border-box, content-box;

Pierwsza maska przykładowego elementu "div" została przycięta do obszaru wyznaczonego przez zewnętrzne krawędzie obramowania przykładowego elementu "div", natomiast druga maska przykładowego elementu "div" została przycięta do obszaru wyznaczonego przez rozmiar obszaru zawartości przykładowego elementu "div", ponieważ do wspomnianego elementu "div" została dodana właściwość "mask-clip" wraz z następującą sekwencją wartości: "border-box, content-box".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        mask-image:url(https://webkod.pl/files/css/maska-m1.png), url(https://webkod.pl/files/css/maska-m2.png);
        mask-repeat:no-repeat, no-repeat;
        mask-position:left top, right bottom;
        mask-clip:border-box, content-box;
        -webkit-mask-image:url(https://webkod.pl/files/css/maska-m1.png), url(https://webkod.pl/files/css/maska-m2.png);
        -webkit-mask-repeat:no-repeat, no-repeat;
        -webkit-mask-position:left top, right bottom;
        -webkit-mask-clip:border-box, content-box;
        border:15px solid black;
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>
      ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
    </div>

  </body>
</html>