| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| #container { |
| border: 3px dotted black; |
| background: yellow; |
| overflow: hidden; |
| width: 400px; |
| max-height: 25px; |
| } |
| |
| #container.masked { |
| mask: url('#fade_mask_bottom'); |
| } |
| .item { |
| font-size: 30px; |
| } |
| </style> |
| </head> |
| <body> |
| <div id='container' class="masked"><div class="item">PASS</div></div> |
| |
| <!-- BEGIN SVG MASK: --> |
| <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> |
| <mask id="fade_mask_bottom" |
| maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox"> |
| <linearGradient id="fade_gradient_bottom" |
| gradientUnits="objectBoundingBox" x2="0" y2="1"> |
| <stop stop-color="white" stop-opacity="1" offset="0.7"></stop> |
| <stop stop-color="white" stop-opacity="0" offset="1"></stop> |
| </linearGradient> |
| <rect x="0" y="0" width="1" height="1" |
| fill="url(#fade_gradient_bottom)"></rect> |
| </mask> |
| </svg> |
| <!-- END SVG MASK --> |
| |
| </body> |
| </html> |
