EverWeb Widgetbox

Mask

Rectangular & Circular Image Mask

This widget use the CSS inset box shadow property to create an image mask.

The first example has a small corner radius and a contrasting shadow color. A screenshot shows the widget settings and the caption is dropped on using the Google Headings widget.

The second example has a shaow color the same as the page background and the corner radius is set to create a circle.

To create a circle from a square set the corner radius to 50% of the width or height. In this case the image is set to 400px square so the corner radius is set to 200px.

Rectangle Circle Image Mask

Rectangle Mask

Circular Mask

Image Rectangle Mask Widget
Image Round Mask Widget