Ostatnio edytowany:

mask-origin

Autor: Virtual Patriot

Opis właściwości mask-origin

Za pomocą właściwości mask-origin możemy określić obszar pozycjonowania maski interesującego nas elementu HTML. Mowa tu o obszarze między innymi względem którego określana jest pozycja początkowa maski elementu HTML.

Dodatkowe techniczne informacje o właściwości mask-origin

przeznaczenie

element HTML każdego typu

dziedziczenie

nie

wartość initial

border-box

wyjątki initial

brak

animowanie

nie (animacja nieciągła)

Interpretacja właściwości mask-origin

Firefox

tak

Google Chrome

tak, lecz z przedrostkiem -webkit-

Safari

tak, lecz z przedrostkiem -webkit-

Opera

tak, lecz z przedrostkiem -webkit-

Internet Explorer

nie

Edge

nie

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

Opis wartości właściwości mask-origin

border-box

Opis

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

Domyślnie obszarem pozycjonowania maski elementu HTML jest obszar wyznaczony przez zewnętrzne krawędzie obramowania tego elementu HTML.

Przykład

  mask-origin: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

Obszarem pozycjonowania maski przykładowego elementu "div" jest obszar wyznaczony 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(http://webkod.pl/files/css/maska-01.png);
        mask-repeat:no-repeat;
        -webkit-mask-image:url(http://webkod.pl/files/css/maska-01.png);
        -webkit-mask-repeat:no-repeat;
        border:15px solid black;
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </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

Opis

Za pomocą wartości padding-box właściwości mask-origin możemy sprawić, że obszarem pozycjonowania maski interesującego nas elementu HTML będzie obszar wyznaczony przez zewnętrzne krawędzie marginesów wewnętrznych tego elementu HTML.

Przykład

  mask-origin:padding-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

Obszarem pozycjonowania maski przykładowego elementu "div" jest obszar wyznaczony 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-origin" 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(http://webkod.pl/files/css/maska-01.png);
        mask-repeat:no-repeat;
        mask-origin:padding-box;
        -webkit-mask-image:url(http://webkod.pl/files/css/maska-01.png);
        -webkit-mask-repeat:no-repeat;
        -webkit-mask-origin:padding-box;
        border:15px solid black;
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </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

Opis

Za pomocą wartości content-box właściwości mask-origin możemy sprawić, że obszarem pozycjonowania maski interesującego nas elementu HTML będzie obszar wyznaczony przez rozmiar zawartości tego elementu HTML.

Przykład

  mask-origin:content-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

Obszarem pozycjonowania maski przykładowego elementu "div" jest obszar wyznaczony przez rozmiar zawartości przykładowego elementu "div", ponieważ do wspomnianego elementu "div" została dodana właściwość "mask-origin" 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(http://webkod.pl/files/css/maska-01.png);
        mask-repeat:no-repeat;
        mask-origin:content-box;
        -webkit-mask-image:url(http://webkod.pl/files/css/maska-01.png);
        -webkit-mask-repeat:no-repeat;
        -webkit-mask-origin:content-box;
        border:15px solid black;
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </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

Opis

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-origin możemy określić osobny obszar pozycjonowania dla poszczególnej maski interesującego nas elementu HTML.

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

Jeżeli podana przez nas sekwencja wartości właściwości "mask-origin" 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-origin" tak, aby uzyskać wystarczającą liczbę wartości.

Przykład

  mask-origin:border-box, content-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

Obszarem pozycjonowania pierwszej maski przykładowego elementu "div" jest obszar wyznaczony przez zewnętrzne krawędzie obramowania przykładowego elementu "div", natomiast obszarem pozycjonowania drugiej maski przykładowego elementu "div" jest obszar wyznaczony przez rozmiar zawartości przykładowego elementu "div", ponieważ do wspomnianego elementu "div" została dodana właściwość "mask-origin" 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(http://webkod.pl/files/css/maska-m1.png), url(http://webkod.pl/files/css/maska-m2.png);
        mask-repeat:no-repeat, no-repeat;
        mask-position:left top, right bottom;
        mask-origin:border-box, content-box;
        -webkit-mask-image:url(http://webkod.pl/files/css/maska-m1.png), url(http://webkod.pl/files/css/maska-m2.png);
        -webkit-mask-repeat:no-repeat, no-repeat;
        -webkit-mask-position:left top, right bottom;
        -webkit-mask-origin:border-box, content-box;
        border:15px solid black;
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </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>