Ostatnio edytowany:

mask-mode

Autor: Virtual Patriot

Opis właściwości mask-mode

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

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.

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

przeznaczenie

element HTML każdego typu

dziedziczenie

nie

wartość initial

auto

wyjątki initial

brak

animowanie

nie (animacja nieciągła)

Interpretacja właściwości mask-mode

Firefox

tak

Google Chrome

nie

Safari

nie

Opera

nie

Internet Explorer

nie

Edge

nie

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

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

auto

Opis

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

alpha

Opis

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ładowy obrazek mogący stanowić maskę alpha elementu HTML

Przykładowy obrazek, na podstawie którego może zostać utworzona maska alpha elementu HTML.

Przykład

  mask-mode:alpha;
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

Typem utworzonej z obrazka znajdującego się pod adresem "url(http://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(http://webkod.pl/files/css/maska-01.png);
        mask-mode:alpha;
        -webkit-mask-image:url(http://webkod.pl/files/css/maska-01.png);
        -webkit-mask-mode:alpha;
        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>

luminance

Opis

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ładowy obrazek mogący stanowić maskę luminance elementu HTML

Przykładowy obrazek, na podstawie którego może zostać utworzona maska luminance elementu HTML.

Przykład

  mask-mode:luminance;
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

Typem utworzonej z obrazka znajdującego się pod adresem "url(http://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(http://webkod.pl/files/css/maska-02.png);
        mask-mode:luminance;
        -webkit-mask-image:url(http://webkod.pl/files/css/maska-02.png);
        -webkit-mask-mode:luminance;
        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-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ładowy obrazek mogący stanowić maskę alpha elementu HTML

Przykładowy obrazek, na podstawie którego może zostać utworzona maska alpha elementu HTML.

przykładowy obrazek mogący stanowić maskę luminance elementu HTML

Przykładowy obrazek, na podstawie którego może zostać utworzona maska luminance elementu HTML.

Przykład

  mask-mode:alpha, luminance;
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

Typem utworzonej z obrazka znajdującego się pod adresem "url(http://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(http://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(http://webkod.pl/files/css/maska-t1.png), url(http://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(http://webkod.pl/files/css/maska-t1.png), url(http://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:#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>