3

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 ?

Hussein
  • 42,480
  • 25
  • 113
  • 143
AntonAL
  • 16,692
  • 21
  • 80
  • 114
  • 1
    FYI, image masking is only supported in Webkit based browsers. (I recently hit an issue with cross browser image masking as well). – linusthe3rd Feb 15 '11 at 21:00
  • I would stick to W3C, especially since with all of the browsers making the push to be HTML5 standards compliant (and CSS3 / JavaScript as well). (https://dvcs.w3.org/hg/FXTF/raw-file/tip/masking/index.html) – Danny Bullis Mar 29 '13 at 01:51

2 Answers2

6

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)

frontsideup
  • 2,833
  • 1
  • 21
  • 23
1

You could give each li div a width and a height then use the CSS background to apply the image positioned with background-position and then use this for rounded corners:

behavior: url("border-radius.htc");
-moz-border-radius: 20px; /* Firefox */
-webkit-border-radius: 20px; /* Safari and Chrome */
-khtml-border-radius: 20px; /* Linux browsers */
border-radius: 20px; /* Opera 10.50, IE and CSS3 */

And include this HTC file for IE support:

http://code.google.com/p/curved-corner/

Myles Gray
  • 8,711
  • 7
  • 48
  • 70