Image Blurs

Normally when a CSS3 blur filter is applied it creates “soft” edges as shown in this example. But crisp edges in the example above are achieved with an “inset border” trick using the :before and :after pseudo elements. This works by matching the border’s color with the page content’s main background color.  And then also by reducing the Item Spacing between elements, as the border will effectively serve as the visual spacing instead.

After copying the CSS below over to your Item Skin Editor’s CSS Editor, adjust all occurances of “.eg-washington-” with your skin’s Class Prefix. Then adjust the “background-color” part to match your page content’s background color.

Normally when a CSS3 blur filter is applied it creates “soft” edges as shown in this example. But crisp edges in the example above are achieved with an “inset border” trick using the :before and :after pseudo elements. This works by matching the border’s color with the page content’s main background color.  And then also by reducing the Item Spacing between elements, as the border will effectively serve as the visual spacing instead.

After copying the CSS below over to your Item Skin Editor’s CSS Editor, adjust all occurances of “.eg-washington-” with your skin’s Class Prefix. Then adjust the “background-color” part to match your page content’s background color.