All geek questions in one place

Cross browser clipping masks

My website has navigation, presented as a list of rectangular buttons with round corners .

Each button should have its own custom background, which is a photograph. A photo is larger than a button and should move in response to mouse movement above that button. We have the effect, as if we were viewing a window.

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

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

Setting "overflow: hidden;" does't work because the clipping region is a simple rectangle without round corners.

CSS properties, as shown below, work in Webkit browsers, but not in 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?

+3
source share
2 answers

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

Everything inside your div / li buttons will be bound to the size of the buttons. Works well on round corners.

eg. (example div) (the yellow rectangle is an image of 400 x 400, 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 Image </div>

</div> </html>

(... ... , , )

+6

li div , CSS background, , background-position, :

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 */

HTC IE:

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

+1

Source: https://habr.com/ru/post/1792310/

More articles:


All Articles