How to make an inkblot avatar with mask-image



In this tutorial I will show you how to make an inkblot avatar with CSS3’s mask-image property.

We will be using photoshop to create the masks, though you could follow along with any other software or just grab the source code and the images below.


Live demo Download source


Preparing the masks

First, we will have to prepare the masks. If you are just using the images from the source code, feel free to skip this part and move on to the next.

The first mask used for the shape of the image is black on a transparent background, saved as a .png file. For this I chose an inkblot that is 300px by 300px.

inkblot

Now, we also want an inset shadow. If we wanted a drop shadow, we won’t need any additional mask. We could just have used a CSS3 drop-shadow() filter. However this filter does not support inset shadows.

So, what we will want to do next is set our inkblot layer’s fill to 0 and add an inner shadow with photoshop. This will make our inkblot invisible, and only show the shadow.



inkblot2

Now we will have something like the image below.

inkblot3

Masking the image with CSS3

Now that we have the masks, we can start masking our image with CSS3.

First, add the image with HTML inside of a figure element.

<figure class="masked">
  <img src="http://placekitten.com/300">
</figure>

Now, we will use the mask-image property to mask the image.

However if we only mask the image itself, that would look a bit flat! So we can use the :after pseudo-element, and position it over the main masked image. We will then fill it with a background color and add the shadow mask image.

.masked {
	width: 300px;
	height: 300px;
	margin: 0 auto;
	position: relative;
}

.masked img {
	z-index: 0;
	position: relative;
	mask-image: url('../img/mask.png');
}

.masked:after {
	width: 300px;
	height: 300px;
	background-color: black;
	content: "";
	display: block;
	z-index: 1;
	mask-image: url('../img/shadow-mask.png');
	position: absolute;
	top: 0;
}

Why use mask-image for the shadow, and not background-image?

I did it this way so that you can change the color. What if, for example you find the shadow too dark. You would have to re-adjust the image if you used background-image. Or if you wanted to, for some reason, give it a color. With this method you can just change the background-color property.

Share the knowledge!
Share on Facebook0Tweet about this on Twitter0Share on Google+0Share on StumbleUpon5Share on Reddit0Share on LinkedIn0Share on TumblrBuffer this pageDigg this

Comments

You may also like...

Stay updated
Subscribe!