Skip to content

Instantly share code, notes, and snippets.

@madrobby
Created September 16, 2012 19:09
Show Gist options
  • Star 24 You must be signed in to star a gist
  • Fork 8 You must be signed in to fork a gist
  • Save madrobby/3733875 to your computer and use it in GitHub Desktop.
Save madrobby/3733875 to your computer and use it in GitHub Desktop.
Fade out elements on WebKit and Firefox
<style>
.fade-right {
-webkit-mask-image: -webkit-gradient(linear, left top, right top, from(rgba(0,0,0,1)), color-stop(0.75, rgba(0,0,0,1)), to(rgba(0,0,0,0)));
mask: url(#fade_right_svg_mask);
}
#mask_demo {
background: #d0d0d0;
height: 100px;
width: 500px;
padding: 10px;
}
</style>
<div id="mask_demo" class="fade-right">
Bacon ipsum dolor sit amet pig capicola flank drumstick tri-tip cow pork. Tenderloin pork belly ham cow chuck strip steak andouille fatback beef ribs. Tongue jowl pig chicken flank drumstick pancetta strip steak capicola biltong. Swine jowl beef ribs filet mignon spare ribs, beef bresaola tail venison pork loin pancetta prosciutto meatloaf fatback turkey. Bresaola turducken beef ribs ribeye salami chicken hamburger meatloaf. T-bone spare ribs rump, strip steak tongue sirloin biltong capicola corned beef bresaola. Swine ham tail filet mignon t-bone flank.
</div>
<svg height="0">
<mask id="fade_right_svg_mask" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
<linearGradient id="fade_right_svg_gradient" gradientUnits="objectBoundingBox" x2="1" y2="0">
<stop stop-color="white" stop-opacity="1" offset="0.75"></stop>
<stop stop-color="white" stop-opacity="0" offset="1"></stop>
</linearGradient>
<rect x="0" y="0" width="1" height="1" fill="url(#fade_right_svg_gradient)"></rect>
</mask>
</svg>
@Daniel15
Copy link

What about a transparent PNG overlay for IE?

@defo550
Copy link

defo550 commented Sep 26, 2012

I created my own gist replicating your masking effect with just CSS ( no svg component): https://gist.github.com/1cd66a8710aedc0ab78d. Seems to work well in most recent versions of FF, Chrome, and Safari.

I used background-gradients and a pseudo element to create your masking component, possibly using an IE filter for gradients it might be possible to to get a masking effect similar to yours in IE8, I am unsure of whether or not you can use rgba colors in this filter (most likely not)?? Alternatively, we can target the selector conditionally in IE8 and use the opacity property inside the pseudo element??

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment