dynamic-mask-pre-effects-bbox-ref.html (1102B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 #container { 6 border: 3px dotted black; 7 background: yellow; 8 overflow: hidden; 9 width: 400px; 10 max-height: 25px; 11 } 12 13 #container.masked { 14 mask: url('#fade_mask_bottom'); 15 } 16 .item { 17 font-size: 30px; 18 } 19 </style> 20 </head> 21 <body> 22 <div id='container' class="masked"><div class="item">PASS</div></div> 23 24 <!-- BEGIN SVG MASK: --> 25 <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 26 <mask id="fade_mask_bottom" 27 maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox"> 28 <linearGradient id="fade_gradient_bottom" 29 gradientUnits="objectBoundingBox" x2="0" y2="1"> 30 <stop stop-color="white" stop-opacity="1" offset="0.7"></stop> 31 <stop stop-color="white" stop-opacity="0" offset="1"></stop> 32 </linearGradient> 33 <rect x="0" y="0" width="1" height="1" 34 fill="url(#fade_gradient_bottom)"></rect> 35 </mask> 36 </svg> 37 <!-- END SVG MASK --> 38 39 </body> 40 </html>