Web Design: Clipping and Masking With CSS

Masking in image editing is a method of ‘hiding’ a portion of an object based on another object. This method has long been available in Image editors like Photoshop. A similar method can also be done in CSS with some of its properties.

View Demo

But before we proceed, let’s take a look at how we do this effect in Photoshop first, and then you will see how we can mimic a similar effect with CSS.

In Photoshop

In Photoshop, we need to have at least two objects for a ‘masking’. After that we can simply hold the Alt (Win) or Option (Mac) key and position the mouse pointer between the layers of these two objects (see screenshot).

In this example, we clipped a circle into a rectangular.

Masking can also be applied to other types of layers. In this example, we mask an image to a text.

So, the question is, can we apply similar things on the Web? In short, yes we can. Let’s see how it is done.

In CSS

There are some properties in CSS we can use to recreate similar effects on the Web, they are ‘overflow’, ‘clip’ and the new CSS3 property background-clip:

Overflow

The overflow property defines the areas that exceed the CSS box model. In the following example, we recreate our first example in Photoshop.

Regarding the HTML markup, we will have two div to form the circle and the rectangle, and we put the div for the circle inside the div for the rectangle like so;

<div class="rect">
	<div class="circle"> </div>
</div>

Then, we style it a little bit and position the circle slightly out of the rectangle to the right.

.rect {
	width: 200px;
	height: 200px;
	background-color: #eaeaea;
}
.circle {
	width: 200px;
	height: 200px;
	border-radius: 100px;
	background-color: #601785;
	position: relative;
	left: 100px;
}

At this point we will get the following result:

Now, to hide the part that exceeds the rectangle area, we simple declare the overflow property to hidden on the rectangle, like so;

.rect {
	width: 200px;
	height: 200px;
	background-color: #eaeaea;
overflow: hidden;}

There we go; we accomplish the same result as in the Photoshop method.

Clip

Another way is by using the clip property. This property has been in existence since CSS2, so we can rest assure that it is supported in old browsers. As we will be using clip property, we won’t need the rectangle div. So, our mark will just be the circle, as follows.

<div class="circle"> </div>

With the same style we form this div into a circle. Then, we use clip property to hide half of this circle. The clip property at this time only supports the rect() function; it contains four values that define the rectangle coordinates that is described as follows rect(top, right, bottom, left).

Lastly, for the clip property to work in hiding the element, we need to define the element’s position to absolute.

.circle {
	width: 200px;
	height: 200px;
	border-radius: 100px;
	background-color: #601785;
	position: absolute;
	left: 100px;
	clip: rect(0px,100px,200px,0px);
}

This code will result in the following. Unfortunately, since we define the rectangle through the rect() function we are not able to add background color for it, but the idea of masking elements is there.

Background Clip

Recently, CSS3 has a new property called background-clip, it determines the background painting area. With this property we are able to limit the scope to where the background will be applied.

The full syntax of this property is: background-clip: border-box|padding-box|content-box;.

But the Webkit browser is one step further in this area by also adding text value, which makes it possible to use text for the mask. In the following example, we would like to recreate the second masking effect from our Photoshop example. First we add the text, like so;

<h1>Galaxy</h1>

Then, in the stylesheet we add the background-image to this text as well as declare the background-clip. To make the background appear we also need to decrease the color fill in the text with RGBA color mode.

h1 {
	font-family: Arial;
	font-size: 5em;
	text-align: center;

	background-image: url(Galaxy.jpg);

	-webkit-background-clip: text;
	background-clip: text;

	color: rgba(0,0,0,0);
}

This code above will give us the following effect for the text.

Final Thoughts

In this post, we have covered three different approaches to masking objects on the Web. There is no one best way here. It depends on the purpose. Have you tried these properties on your website? Do you have some other tips to do something similar? Share your thoughts in the comment box below.

via hongkiat.com http://www.hongkiat.com/blog/css-masking/

Photoshop CS6 Download