CODEWITHSUNDEEP
htmlcanvascssmask
Nypam
Nypam

Reputation: 1498

Best way to mask an image in HTML5

I was wondering what is the best way to mask images in HTML 5 ?

In fact I would like to display circle thumbnails in a gallery without bothering my client with the preparation of the circular pictures...

So I have, in my opinion, two options : Canvas masking or old fashioned way

Do you have others ideas ? Best practices ?

Thanks

Upvotes: 10

Views: 29430

Answers (4)

dhc
dhc

Reputation: 657

To update the answer, try clip-path (see this css-tricks post).

caniuse shows over 80% support now, if you use the -webkit- prefix as well. So this is working for me (IE/Edge, though, may be limiting factors):

clip-path: circle(125px at center);
-webkit-clip-path: circle(125px at center);

Upvotes: 0

Ryan Shea
Ryan Shea

Reputation: 4302

Here's the method that works best for me:

  1. create an SVG of the shape of mask you want.
  2. edit the css of the appropriate element and specify the URL of the SVG for the mask

For a 200px circle, your SVG could look like this:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="image-mask" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
<circle cx="100" cy="100" r="100" stroke="black" stroke-width="0" fill="black" />
</svg>

And your CSS could look like this:

#image-mask {
    width: 200px;
    height: 200px;
    mask: url('/static/images/avatarmask.svg');
    -webkit-mask-image: url('/static/images/avatarmask.svg');
}

And if you want something more in-depth, I found this guide to be very helpful: http://collidercreative.com/how-to-create-css-image-masks-for-the-web-with-svgs/.

Upvotes: 0

aWebDeveloper
aWebDeveloper

Reputation: 38352

  -circle {
        -webkit-border-radius: 61px;
        -moz-border-radius: 61px;
        border-radius: 61px;
        border:1px solid #aaaaaa;
        width:122px;
        height:122px;
   }

see this

check this http://jsfiddle.net/WQSLa/1/

EDIT

u can also try this http://jsfiddle.net/jalbertbowdenii/WQSLa/3 as suggested by albert

Upvotes: 3

gion_13
gion_13

Reputation: 41533

you could use

  • the old fashioned way - by using a transparent png on top of the desired element
  • the css3 border-radius of the image set to half of it's dimensions (so that the border defines a circle)
  • the css3 mask and mask-clip properties (here's a nice demo : http://www.webkit.org/blog/181/css-masks/)
  • canvas to do the masking
  • svg circles with the image as background-pattern

The choice depends on the targeted browsers and the time you want to invest.
For a fully cross-browser result, I recommend the old fashioned way, but if you want more shapes (maybe dynamic ones) or more than just image masking, you could try svg or canvas.

Upvotes: 15

Related Questions