tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

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>