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;
}
- 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.
- 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.
- 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.
- /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.
- 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.
- 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.
- 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.
- 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.
mask:url(https://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(https://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(https://webkod.pl/files/css/maska-02.png) luminance right top /300px 400px no-repeat padding-box border-box".
<!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(https://webkod.pl/files/css/maska-02.png) luminance right top /300px 400px no-repeat padding-box border-box;
-webkit-mask:url(https://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:#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>
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.
mask:url(https://webkod.pl/files/css/kolo-01.png) 0 0 no-repeat exclude, url(https://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(https://webkod.pl/files/css/kolo-01.png) 0 0 no-repeat exclude, url(https://webkod.pl/files/css/kwadrat-01.png) 100px 100px no-repeat".
<!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(https://webkod.pl/files/css/kolo-01.png) 0 0 no-repeat exclude, url(https://webkod.pl/files/css/kwadrat-01.png) 100px 100px no-repeat;
-webkit-mask:url(https://webkod.pl/files/css/kolo-01.png) 0 0 no-repeat exclude, url(https://webkod.pl/files/css/kwadrat-01.png) 100px 100px 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>
