CODEWITHSUNDEEP
htmlcsssvg
hardkoded
hardkoded

Reputation: 21695

Blur half a page

I need to blur the content of half a page, basically I need to show a document preview before the customer pays for it.

In order to accomplish that I have a HTML page which looks pretty much like this: enter image description here

I need to apply a blur, the blur should start from the 50% of the page height, then I will take an screenshot and show that image to the customer.

So:

  1. I can't apply the filter blur to a div because there are many divs involved. Lets say that the blur will start from somewhere around "Where does it come from"
  2. I tried to add a div position absolute with a filter blur, but the blur is not being applied over the text. I also tried to do that with SVGs but no joy.

Ideas?

Upvotes: 1

Views: 367

Answers (1)

ccprog
ccprog

Reputation: 21821

Here's a solution that may be a bit rickety, but works - in Firefox, at least:

<?xml version="1.0" standalone="yes"?>
<svg width="600" height="800" version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:html="http://www.w3.org/1999/xhtml">
  <filter id="halfBlur" filterUnits="objectBoundingBox" x="0" y="0.5" width="1" height="0.5">
    <feGaussianBlur in="SourceGraphic" stdDeviation="2" />
  </filter>
  <g id="source">
    <foreignObject width="600" height="800">
      <html:iframe style="width:600px;height:800px" src=""></html:iframe>
    </foreignObject>
  </g>
  <use xlink:href="#source" filter="url(#halfBlur)"/>
</svg>

Mark that the <use> element only works if it references an SVG container element, but not the <foreignObject> directly.

Care must be taken to make all elements big enough to contain the complete html page. As an extra measure, it might be a good idea to provide the html element of the embeded page with a overflow:hidden rule. If scrollbars show up, they will work on both halfs of the page independently.

Upvotes: 2

Related Questions