Autor publikacji: Virtual Patriot - Administrator

mask-mode

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

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

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

Za pomocą właściwości mask-mode możemy określić jakiego typu maska ze wskazanego przez nas obrazka powinna zostać utworzona przez przeglądarkę internetową dla interesującego nas elementu HTML.

Informacje dodatkowe: niezależnie od wybranego typu maski, gdy obrazek tworzący maskę elementu HTML nie wypełni niektórych obszarów elementu HTML, wspomniane obszary elementu HTML staną się obszarami wyciętymi z widoku

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

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

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

: tak
: nie
: nie
: nie
: nie
: nie

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

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

auto

Wyjaśnienie

Wartość auto jest domyślną wartością właściwości mask-mode.

Domyślnie przeglądarka internetowa sama określa jakiego typu maska powinna zostać utworzona dla elementu HTML ze wskazanego przez nas obrazka.

Cechy wartości `auto` właściwości `mask-mode`

gdy wskazaliśmy obrazek typu .svg, wtedy wartość auto właściwości mask-mode wskazuje na maskę typu luminance
w każdym innym przypadku wartość auto właściwości mask-mode wskazuje na maskę typu alpha

Przykład

  mask-mode:auto;

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

Przeglądarka internetowa zdecydowała, że typem maski utworzonej z obrazka znajdującego się pod adresem "url(https://webkod.pl/files/css/maska-01.png)" dla przykładowego elementu "div" będzie typ "alpha", ponieważ wspomniany obrazek "maska-01.png" nie jest obrazkiem typu ".svg", lecz jest obrazkiem typu ".png".

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);
        -webkit-mask-image:url(https://webkod.pl/files/css/maska-01.png);
        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>

alpha

Wyjaśnienie

Za pomocą wartości alpha właściwości mask-mode możemy sprawić, że typem tworzonej przez przeglądarkę internetową maski dla interesującego nas elementu HTML ze wskazanego przez nas obrazka będzie typ alpha.

Cechy wartości `alpha` właściwości `mask-mode`

obszary wskazanego przez nas obrazka, które nie są w żadnym stopniu obszarami przezroczystymi staną się otworami tworzonej maski alpha
pozostałe obszary wskazanego przez na obrazka staną się widocznymi obszarami tworzonej maski alpha zawierającymi odwrócony stopień przezroczystości
ponadto wszystko to co znajduje się pod elementem HTML, do którego zostanie dodana maska alpha będzie widoczne na widocznych obszarach tejże maski alpha

Przykład

  mask-mode:alpha;

Typem utworzonej z obrazka znajdującego się pod adresem "url(https://webkod.pl/files/css/maska-01.png)" maski dla przykładowego elementu "div" jest typ "alpha", ponieważ do wspomnianego elementu "div" została dodana właściwość "mask-mode" wraz z wartością "alpha".

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-mode:alpha;
        -webkit-mask-image:url(https://webkod.pl/files/css/maska-01.png);
        -webkit-mask-mode:alpha;
        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>

luminance

Wyjaśnienie

Za pomocą wartości luminance właściwości mask-mode możemy sprawić, że typem tworzonej przez przeglądarkę internetową maski dla interesującego nas elementu HTML ze wskazanego przez nas obrazka będzie typ luminance.

Cechy wartości `luminance` właściwości `mask-mode`

obszary wskazanego przez nas obrazka, które posiadają kolor biały staną się otworami tworzonej maski luminance
pozostałe obszary wskazanego przez na obrazka staną się widocznymi obszarami tworzonej maski luminance (im ciemniejszy kolor obszaru obrazka tym mniej przezroczysty kolor widocznego obszaru tworzonej maski luminance)
ponadto wszystko to co znajduje się pod elementem HTML, do którego zostanie dodana maska luminance będzie widoczne na widocznych obszarach tejże maski luminance

Przykład

  mask-mode:luminance;

Typem utworzonej z obrazka znajdującego się pod adresem "url(https://webkod.pl/files/css/maska-02.png)" maski dla przykładowego elementu "div" jest typ "luminance", ponieważ do wspomnianego elementu "div" została dodana właściwość "mask-mode" wraz z wartością "luminance".

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-02.png);
        mask-mode:luminance;
        -webkit-mask-image:url(https://webkod.pl/files/css/maska-02.png);
        -webkit-mask-mode:luminance;
        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-mode możemy określić osobny typ dla poszczególnej maski interesującego nas elementu HTML.

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

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

Przykład

  mask-mode:alpha, luminance;

Typem utworzonej z obrazka znajdującego się pod adresem "url(https://webkod.pl/files/css/maska-t1.png)" pierwszej maski dla przykładowego elementu "div" jest typ "alpha", natomiast typem utworzonej z obrazka znajdującego się pod adresem "url(https://webkod.pl/files/css/maska-t2.png)" drugiej maski dla przykładowego elementu "div" jest typ "luminance", ponieważ do wspomnianego elementu "div" została dodana właściwość "mask-mode" wraz z następującą sekwencją wartości: "alpha, luminance".

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-t1.png), url(https://webkod.pl/files/css/maska-t2.png);
        mask-mode:alpha, luminance;
        mask-repeat:repeat-x, no-repeat;
        mask-position:left top, right bottom;
        -webkit-mask-image:url(https://webkod.pl/files/css/maska-t1.png), url(https://webkod.pl/files/css/maska-t2.png);
        -webkit-mask-mode:alpha, luminance;
        -webkit-mask-repeat:repeat-x, no-repeat;
        -webkit-mask-position:left top, right bottom;
        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>