Ostatnio edytowany:

mask-size

Autor: Virtual Patriot

Opis właściwości mask-size

Za pomocą właściwości mask-size możemy określić rozmiar maski interesującego nas elementu HTML.

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

przeznaczenie

element HTML każdego typu

dziedziczenie

nie

wartość initial

auto

wyjątki initial

brak

animowanie

tak, lecz nie wartość auto, cover oraz contain

Interpretacja właściwości mask-size

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-size

auto

Opis

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

Domyślnie maska elementu HTML posiada niezmieniony rozmiar (czyli rozmiar obrazka, który tworzy daną maskę elementu HTML).

Przykład

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

Maska przykładowego elementu "div" posiada niezmieniony rozmiar.

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;
        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>

cover

Opis

Za pomocą wartości cover właściwości mask-size możemy sprawić, że rozmiar maski interesującego nas elementu HTML zostanie przeskalowany w taki sposób, aby wypełnić w całości rozmiar szerokości obszaru pozycjonowania tejże maski.

Przykład

  mask-size:cover;
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

Rozmiar maski przykładowego elementu "div" został przeskalowany w taki sposób, aby wypełnić w całości rozmiar szerokości obszaru pozycjonowania maski przykładowego elementu "div", ponieważ do wspomnianego elementu "div" została dodana właściwość "mask-size" wraz z wartością "cover".

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

contain

Opis

Za pomocą wartości contain właściwości mask-size możemy sprawić, że rozmiar maski interesującego nas elementu HTML zostanie przeskalowany w taki sposób, aby wypełnić w całości rozmiar wysokości obszaru pozycjonowania tejże maski.

Przykład

  mask-size:contain;
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

Rozmiar maski przykładowego elementu "div" został przeskalowany w taki sposób, aby wypełnić w całości rozmiar wysokości obszaru pozycjonowania maski przykładowego elementu "div", ponieważ do wspomnianego elementu "div" została dodana właściwość "mask-size" wraz z wartością "contain".

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

wzorzec wartości

Opis

Za pomocą właściwości mask-size oraz z góry zdefiniowanego wzorca wartości możemy określić rozmiar maski interesującego nas elementu HTML.

Składniki wzorca wartości właściwości mask-size

Przykładowe zapisy

50px

50px 100px

auto 100px

25%

25% 50%

width

Składnik width jest wymaganym składnikiem wzorca wartości właściwości mask-size. Składnik width określa rozmiar szerokości maski interesującego nas elementu HTML.

Dostępne wartości

dowolna nieujemna liczba wraz z wybraną jednostką absolutną lub jednostką relatywną lub procenty lub wartość auto

Wartości procentowe

wartości procentowe liczone są względem aktualnego rozmiaru szerokości obszaru pozycjonowania maski elementu HTML, której rozmiar chcemy określić

Wartość domyślna

brak

height

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

Dostępne wartości

dowolna nieujemna liczba wraz z wybraną jednostką absolutną lub jednostką relatywną lub procenty lub wartość auto

Wartości procentowe

wartości procentowe liczone są względem aktualnego rozmiaru wysokości obszaru pozycjonowania maski elementu HTML, której rozmiar chcemy określić

Wartość domyślna

auto

Przykład

  mask-size:300px 150px;
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

Rozmiar szerokości maski przykładowego elementu "div" wynosi 300 pikseli, natomiast rozmiar wysokości maski przykładowego elementu "div" wynosi 150 pikseli, ponieważ do wspomnianego elementu "div" została dodana właściwość "mask-size" wraz z następującymi wartościami: "300px 150px".

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-size:300px 150px;
        -webkit-mask-image:url(http://webkod.pl/files/css/maska-01.png);
        -webkit-mask-repeat:no-repeat;
        -webkit-mask-size:300px 150px;
        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-size możemy określić osobny rozmiar dla poszczególnej maski interesującego nas elementu HTML.

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

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

Przykład

  mask-size:150px 200px, 100px 125px;
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

Rozmiar szerokości pierwszej maski przykładowego elementu "div" wynosi 150 pikseli, natomiast rozmiar wysokości pierwszej maski przykładowego elementu "div" wynosi 200 pikseli, ponadto rozmiar szerokości drugiej maski przykładowego elementu "div" wynosi 100 pikseli, natomiast rozmiar wysokości drugiej maski przykładowego elementu "div" wynosi 125 pikseli, ponieważ do wspomnianego elementu "div" została dodana właściwość "mask-size" wraz z następującą sekwencją wartości: "150px 200px, 100px 125px".

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-size:150px 200px, 100px 125px;
        -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-size:150px 200px, 100px 125px;
        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>