Comprehending the Clipping and Masking Process with CSS

157 Flares Twitter 77 Facebook 55 Google+ 24 StumbleUpon 1 Pin It Share 0 157 Flares ×

Illustrating a Web design with the best possible output involves a proper chalked out plan. A developer has to take care of all the intricacies involved and then go about projecting the lay-out. Use of HTML5 and CSS are two of the styling elements that a developer can’t do without. A proper know how is required to give the design a proper architecture.

Masking and clipping are two important features available in CSS that a developer should adhere to while designing. A lot of mistakes are made while carrying out these features in reality.

Actually, masking in image editing is attributed to a method of ‘hiding’ a portion of an object based on another object. This method has been prevalent before in Image editors like Photoshop and a similar methodology can be made use of in CSS also by applying some of the properties.

But, before proceeding ahead it will better to take a plunge into how the method is carried out in Photoshop and then move over to incorporating a similar effect with CSS.

The Effect in Photoshop

For a masking process to work out effectively in Photoshop, there has to be a presence of two objects. After getting the desired objects, we can move on to the next step. We can then hold the Alt(Win) or the Option (Mac) key and then position the mouse pointer in between the layers of the objects. For help go through the underlined illustration.

The above example illustrates clipping a circle into a rectangular.

The masking effect can also be applied to various other layers as well. In the example we will mask an image to a text.

The question that arises out the effects is that are similar things applicable on the Web? Well, the answer is in the positive. Below is the process on how it is carried out.

Now the CSS’s Turn

There are some properties inculcated in CSS which we can use to recreate the similar effects on the Web as well. They are ‘overflow’, ‘clip’ and the latest CSS3 property ‘background-clip.’ We will discuss the properties in details below:

Overflow Property

This property defines the areas that exceed the CSS box model. The underlined example is the same as the above one, the only difference: it is recreated using CSS.

Where the HTML Markup is considered, we have two ‘div’, one to form the circle and the other one to form the rectangle. Together with this, we should place the ‘div’ for the circle inside the ‘div’ for the rectangle as illustrated below:

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

After this a tad styling is added and the circle is positioned slightly out of the rectangle inclined towards 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;
}

The following depiction comes out as a result.

Thus complete, the same result is achieved as the one got in the Photoshop method.

Clip Property

This property also helps us get our desired result. This property has been into existence and prevalent since the days of CSS2 and is thus supported by the older versions of the browser as well.

<div class=”circle”> </div>

While making use of the clip property we can leave the rectangular ‘div’ and concentrate on the circle as illustrated as follows:

Using the same style we can form this ‘div’ into a circle and then make use of the clip property to hide half of the formed circle. The property as per the current scenario supports the rect() function and contains the four values that go about defining the rectangle’s co-ordinates that are described as : rect( top, right, bottom, left).

Last but not the least, in order that the clip property functions properly in hiding the element, the element’s position should be defined to absolute.

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

The result is shown below, but since the rectangle is defined through the rect() function, we cannot add background color to it, though the masking elements are present.

Background Clip Property

This property has been recently added in CSS3 and it helps determine the background painting area. This property helps us in limiting the scope as to where the background might be applied. The exact syntax of this property is as follows:

background-clip: border-box padding box content-box;.

All said and done, the Webkit browser, though takes it to the next level by adding a ‘text’ value which makes it all the more possible to use text for the mask.

The following example illustrates the second masking effect that was dealt with in the Photoshop example and recreates it using this property.

First we add the text as: <h1>Galaxy</h1>  

Then, taking the style-sheet into consideration we add the background-image to this text and declare the background-clip as well. Making the background appear can be done by decreasing 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);
}

The code written above gives the below mentioned effect for the text.

Finally

The above-mentioned approaches for masking objects help you out in the best possible way and adjudging one to the best amongst them is not possible. The situation demands you to use anyone of the techniques and create your Web design.

Leave a Reply

Your email address will not be published. Required fields are marked *

 

GET A QUOTE

Get a Quote from Top Web Agency in the World

  • *
  • *
  • *
  • *
  • NOTE: All (*) fields are mandatory.
  • *captcha

    Enter the characters that are displayed in the image on left. They are case sensitive!