Ostatnio edytowany:

mask

Autor: Virtual Patriot

Opis właściwości mask

Za pomocą właściwości mask możemy określić kilka różnych cech maski interesującego nas elementu HTML.

Informacje dodatkowe

brak

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

przeznaczenie

element HTML każdego typu

pozycja

dowolna

dziedziczenie

nie

wartość initial

none auto 0% 0% /auto repeat border-box border-box add

wyjątki initial

brak

animowanie

tak samo jak dla poszczególnej właściwości CSS, której wartość tworzy poszczególny składnik grupy wartości właściwości mask

Interpretacja właściwości mask

Firefox

tak

Google Chrome

tak, lecz z przedrostkiem -webkit-

Nie interpretuje wartości składnika mode oraz wartości składnika composite.

Safari

tak, lecz z przedrostkiem -webkit-

Nie interpretuje wartości składnika mode oraz wartości składnika composite.

Opera

tak, lecz z przedrostkiem -webkit-

Nie interpretuje wartości składnika mode oraz wartości składnika composite.

Internet Explorer

nie

Edge

nie

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

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

grupa wartości

Opis

Za pomocą właściwości mask oraz z góry zdefiniowanej grupy wartości możemy określić kilka różnych cech maski interesującego nas elementu HTML.

/* OBIE REGUŁY CSS SĄ SOBIE RÓWNOZNACZNE */

/* REGUŁA - 1 */
div {
  mask:url(maska-01.png) luminance 50% 25% /300px 200px no-repeat border-box content-box add;
}

/* REGUŁA - 2 */
div {
  mask-image:url(maska-01.png);
  mask-mode:luminance;
  mask-position:50% 25%;
  mask-size:300px 200px;
  mask-repeat:no-repeat;
  mask-origin:border-box;
  mask-clip:content-box;
  mask-composite:add;
}

Składniki grupy wartości właściwości mask

Ważne

jeżeli w naszym zapisie wystąpi tylko jedna wartość należąca do grupy box (czyli wartość border-box, padding-box lub wartość content-box), wtedy wartość ta określi zarówno wartość składnika origin, jak i wartość składnika clip

podana przez nas grupa wartości właściwości mask nie może zawierać wartości globalnych oraz sekwencji wartości

Przykładowe zapisy

url(maska-01.png) center no-repeat

url(maska-01.png) 25% 50% /150px repeat-x padding-box

url(maska-01.png) luminance border-box content-box

url(maska-01.png) center /50% repeat round content-box exclude

image

Składnik image nie jest wymaganym składnikiem grupy wartości właściwości mask. Składnik image określa wartość właściwości mask-image, czyli to, który obrazek powinien tworzyć maskę interesującego nas elementu HTML.

Wartość domyślna

none

mode

Składnik mode nie jest wymaganym składnikiem grupy wartości właściwości mask. Składnik mode określa wartość właściwości mask-mode, czyli to, jakiego typu maska ze wskazanego przez nas obrazka powinna zostać utworzona przez przeglądarkę internetową dla interesującego nas elementu HTML.

Wartość domyślna

auto

position

Składnik position nie jest zawsze wymaganym składnikiem grupy wartości właściwości mask. Składnik position określa wartość właściwości mask-position, czyli względem krawędzi obszaru pozycjonowania pozycję początkową maski interesującego nas elementu HTML.

Sposób podawania

gdy w naszym zapisie chcemy określić wartość składnika size, wtedy w naszym zapisie musimy również określić wartość składnika position

Wartość domyślna

0% 0%

/size

Składnik size nie jest wymaganym składnikiem grupy wartości właściwości mask. Składnik size określa wartość właściwości mask-size, czyli rozmiar maski interesującego nas elementu HTML.

Sposób podawania

przed wartością składnika size należy umieścić znak /

ponadto gdy w naszym zapisie chcemy określić wartość składnika position, wtedy w naszym zapisie musimy również określić wartość składnika size

Wartość domyślna

auto

repeat

Składnik repeat nie jest wymaganym składnikiem grupy wartości właściwości mask. Składnik repeat określa wartość właściwości mask-repeat, czyli sposób powtarzania się maski interesującego nas elementu HTML.

Wartość domyślna

repeat

origin

Składnik origin nie jest wymaganym składnikiem grupy wartości właściwości mask. Składnik origin określa wartość właściwości mask-origin, czyli obszar pozycjonowania maski interesującego nas elementu HTML.

Wartość domyślna

border-box

clip

Składnik clip nie jest wymaganym składnikiem grupy wartości właściwości mask. Składnik clip określa wartość właściwości mask-clip, czyli sposób przycięcia maski interesującego nas elementu HTML.

Wartość domyślna

border-box

composite

Składnik composite nie jest wymaganym składnikiem grupy wartości właściwości mask. Składnik composite określa wartość właściwości mask-composite, czyli tryb mieszania się masek interesującego nas elementu HTML.

Wartość domyślna

add

Przykład

  mask:url(http://webkod.pl/files/css/maska-02.png) luminance right top /300px 400px no-repeat padding-box 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

Przykładowy element "div" posiada maskę (utworzoną na podstawie obrazka znajdującego się pod adresem "url(http://webkod.pl/files/css/maska-02.png)", posiadającą typ "luminance", znajdującą się przy prawej oraz górnej krawędzi obszaru pozycjonowania, posiadającą rozmiar szerokości równy 300 pikseli, posiadającą rozmiar wysokości równy 400 pikseli, ponadto niepowtarzającą się ani w poziomie, ani w pionie, posiadającą obszar pozycjonowania wyznaczony przez zewnętrzne krawędzie marginesów wewnętrznych przykładowego elementu "div" oraz przyciętą do zewnętrznych krawędzi obramowania przykładowego elementu "div"), ponieważ do wspomnianego elementu "div" została dodana właściwość "mask" wraz z następującą grupą wartości: "url(http://webkod.pl/files/css/maska-02.png) luminance right top /300px 400px no-repeat padding-box border-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:url(http://webkod.pl/files/css/maska-02.png) luminance right top /300px 400px no-repeat padding-box border-box;
        -webkit-mask:url(http://webkod.pl/files/css/maska-02.png) luminance right top /300px 400px no-repeat padding-box border-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

Za pomocą sekwencji kilku oddzielonych od siebie znakiem przecinka grup wartości właściwości mask możemy sprawić, że interesujący nas element HTML będzie posiadał kilka masek o różnych cechach jednocześnie.

Przykład

  mask:url(http://webkod.pl/files/css/kolo-01.png) 0 0 no-repeat exclude, url(http://webkod.pl/files/css/kwadrat-01.png) 100px 100px no-repeat;
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

Przykładowy element "div" posiada dwie różne maski o różnych cechach jednocześnie, ponieważ do wspomnianego elementu "div" została dodana właściwość "mask" wraz z następującą sekwencją wartości: "url(http://webkod.pl/files/css/kolo-01.png) 0 0 no-repeat exclude, url(http://webkod.pl/files/css/kwadrat-01.png) 100px 100px no-repeat".

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:url(http://webkod.pl/files/css/kolo-01.png) 0 0 no-repeat exclude, url(http://webkod.pl/files/css/kwadrat-01.png) 100px 100px no-repeat;
        -webkit-mask:url(http://webkod.pl/files/css/kolo-01.png) 0 0 no-repeat exclude, url(http://webkod.pl/files/css/kwadrat-01.png) 100px 100px 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>