We all have come across this situation, when there is a need of showing some part of one image and some part of another image, developers usually prefer to get a new image from designer without knowing this, that they can also combine the images with the help of CSS. A very good example of this problem is whenever the developer wants to show half rated stars like 1.5, 2.5 or averaged stars like 2.7, 1.3. To fix this problem clip property of CSS can be used.
The clip property of CSS can be used to merge two images. Let’s suppose that we have two same images with different color and we want to show some part of the first image and some part of the second image, then at that time we can use this property.
Let’s suppose we have the following two images:
1. StarRed
2. StarRated
CSS Syntax:
Example:
Clip: rect(0px 30px 30px 0px);
<img src=” Icons/StarRed.png”>
<img src=” Icons/StarRated.png”>
</div>
Let’s have a look to different ways to use clip property by applying CSS.
Demo 1:
Demo 2:
Demo 3:
Demo 4:
Demo 5:
There is lots of information provided of clip property on this link Clip CSS Property. If you have any query or need more information about clip property? Contact us today at +1 -484-876-1867 or send us a message.
