khronosschoty
/
palemoon-dev


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041
							<!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>