Cross-browser clipping masks

cross-browser css mask image-clipping
AntonAL picture AntonAL · Feb 15, 2011 · Viewed 8.5k times · Source

My web site has navigation, presented as a list of rectengular buttons with round corners.

Each button should have it's own custom background, which is a photo. Photo is bigger than button and should move in response to mouse movement over this button. We have an effect, like we are looking through the window.

Navigation has following HTML structure: "ul > li > a > img".

I think, each "ul > li" should be a rectangle with round corner and acting as clipping mask for image.

Setting "overflow: hidden;" does't works, because clipping area is simple rectangle without round corners.

CSS properties, like below, does working under Webkit-browsers, but not Firefox.

mask-image: url(/images/mask.png);
mask-position: 0 0;
mask-repeat: no-repeat no-repeat;
mask-size: 125pt 77pt;

What is a cross-browser way to do it ?

Answer

frontsideup picture frontsideup · Feb 16, 2011

I find the best way to do this is to use overflow:hidden.

Anything inside your "div/li" buttons will be clipped to the buttons dimensions. Works well on round corners.

e.g. (div example)( the yellow box is a 400 x 400 image, the red box is 200 x 200 ..example = chrome/-webkit-) 

 <html>

<style>
.box{width:200px; height:200px; background:red;overflow:hidden;border-radius:30px;}
.image {width:400px; height:400px; background:yellow;}

</style>

<div class="box"> <div class="image"> Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image </div>

</div> </html>

(Sorry...I'm new...I assumed they had some method of converting symbols, my bad)

Related questions

How to disable text selection highlighting

For anchors that act like buttons (for example Questions, Tags, Users, etc. which are located on the top of the Stack Overflow page) or tabs, is there a CSS standard way to disable the highlighting effect if the user accidentally …

Read More
How do I style a <select> dropdown with only CSS?

Is there a CSS-only way to style a <select> dropdown? I need to style a <select> form as much as humanly possible, without any JavaScript. What are the properties I can use to do so in …

Read More
How to vertically center a div for all browsers?

I want to center a div vertically with CSS. I don't want tables or JavaScript, but only pure CSS. I found some solutions, but all of them are missing Internet Explorer 6 support. <body> <div>Div to …

Read More