Question

For my mobile-desktop nav-bar I have background buttons (default). On top I’m using :after to insert an element with background (plain grey) which on hover changes to (lt. blue) and content( url(image.alpha-png) ) or -webkit-mask-image.

I’m looking for a way to show nothing (=default background image) on browsers/devices not supporting :after or not being able to handle -webkit-mask-image.

I got it to work for pseudo-classes by removing fallback background-colors (takes care of IE 7,8)and now I’m looking for a away to not show the the gray/blue background on browsers/devices that don’t support -webkit-mask-image (or their not working -o/-ms/-moz-equivalents)

Here is some code:

HTML:

<p class="test">target</p>

CSS (I left away the gradient and mask CSS for all other browsers):

 .test    { position: relative;}
p.test:after  { width: 30px; height: 30px; position: absolute; 
                top: 0; bottom: 0; left: 0; right: 0; content: "";
                -webkit-mask-image:      url("../../../IMG/gen/testsprite.png");
                -webkit-mask-position:   -60px -15px;
                -webkit-mask-repeat:     no-repeat;
                -webkit-mask-size:       150px 45px;                    
                background-image: -webkit-linear-gradient(bottom, #ccc, #333);
              }
p.test:hover:after  {
               -webkit-linear-gradient(center top, rgba(68,213,254,.0) 0%, rgba(68,213,254,.0) 23%, #44D5FE 100%), 
               -webkit-radial-gradient(100% 320%, circle farthest-corner, #317BDC 65%, #317BDC 78%, rgba(49,123,220,.0) 80%), 
               -webkit-radial-gradient(40% 190%, circle farthest-corner, #7DAAE7 30%, #E6EEFA 90%), url("../../../IMG/gen/fallback_active.png");
              }

As -webkit is the only vendor providing a image-mask, I’m looking for help on:

• hiding the background-gradients on non webkit devices
• providing some info on a good alternative for FF, Opera…
• opinion on whether it would make sense to switch image-mask for alpha-png, which means having to create a “negative” of my CSS-sprite

Thanks for help!

Answer 1

Ok. Only webkit supports image-mask so to get a masking-effect you can either use

a) SVG images = you will need the SVG plugin to be loaded in IE
b) Cutout PNG images

I went with cutting out png shapes from a background-image

Example see here