Day 87: mask properties

You can use mask properties to apply a mask to an element.

Let’s say you have an image and a logo. You can use the logo to mask the image.

a huge fire. multiple large palettes burning.
HTMHell logo

img {
  mask-image: url(/images/htmhell_logo.svg);
}

There are a bunch of properties you can use to adjust the styling of the mask.

img {
  mask-image: url(/images/htmhell_logo.svg);
  mask-size: cover;
  mask-repeat: no-repeat;
  mask-position: center;
}

You can also apply a mask to an element.

div {
  max-width: 400px;
  aspect-ratio: 1;
  background-color: red;

  mask-image: url(/images/htmhell_logo.svg);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}
Note: You need the -webkit- prefix for some browsers.

My blog doesn’t support comments yet, but you can reply via blog@matuzo.at.


This content originally appeared on Manuel Matuzović - Blog and was authored by Manuel Matuzović

You can use mask properties to apply a mask to an element.

Let's say you have an image and a logo. You can use the logo to mask the image.

a huge fire. multiple large palettes burning. HTMHell logo 
img {
  mask-image: url(/images/htmhell_logo.svg);
}

There are a bunch of properties you can use to adjust the styling of the mask.

img {
  mask-image: url(/images/htmhell_logo.svg);
  mask-size: cover;
  mask-repeat: no-repeat;
  mask-position: center;
}

You can also apply a mask to an element.

div {
  max-width: 400px;
  aspect-ratio: 1;
  background-color: red;

  mask-image: url(/images/htmhell_logo.svg);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}
Note: You need the -webkit- prefix for some browsers.

My blog doesn't support comments yet, but you can reply via blog@matuzo.at.


This content originally appeared on Manuel Matuzović - Blog and was authored by Manuel Matuzović


Print Share Comment Cite Upload Translate Updates
APA

Manuel Matuzović | Sciencx (2023-01-24T00:00:00+00:00) Day 87: mask properties. Retrieved from https://www.scien.cx/2023/01/24/day-87-mask-properties-2/

MLA
" » Day 87: mask properties." Manuel Matuzović | Sciencx - Tuesday January 24, 2023, https://www.scien.cx/2023/01/24/day-87-mask-properties-2/
HARVARD
Manuel Matuzović | Sciencx Tuesday January 24, 2023 » Day 87: mask properties., viewed ,<https://www.scien.cx/2023/01/24/day-87-mask-properties-2/>
VANCOUVER
Manuel Matuzović | Sciencx - » Day 87: mask properties. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2023/01/24/day-87-mask-properties-2/
CHICAGO
" » Day 87: mask properties." Manuel Matuzović | Sciencx - Accessed . https://www.scien.cx/2023/01/24/day-87-mask-properties-2/
IEEE
" » Day 87: mask properties." Manuel Matuzović | Sciencx [Online]. Available: https://www.scien.cx/2023/01/24/day-87-mask-properties-2/. [Accessed: ]
rf:citation
» Day 87: mask properties | Manuel Matuzović | Sciencx | https://www.scien.cx/2023/01/24/day-87-mask-properties-2/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts