Boxes are decorative elements that can be used as backgrounds for actual content, and can contain a fill color, a gradient fill, a pattern, bitmap or vector image.

The base settings of a box are very simple but they hide a great degree of customizability.

Boxes can be stretched to the full browser width, this is so common there’s a shortcut “wide box” in the toolbar.

Box border

Common to all box content types, you can specify a box border. The border is added outside of the box extent. You can either have a single border setting for all sides or a separate setting for each edge, the canvas will show the exact output.

Box corner rounding

Box corners can be rounded with a specified pixel radius, you can opt for each corner to be rounded or not.

The border, when visible, will follow the rounded edges.

Box drop shadow

Drop shadows used to be cool and trendy, for this reason alone their use can make your design look dated.

However used carefully and tastefully they can add a subtle 3D effect and provide an organic sense of depth. 

Box opacity

Adjusting the opacity can be useful for some visual effects. Opacity affects the box content as well as the border and the shadow, if present.

Fixed background

When using an image background, the inspector shows the additional “Fixed in window” option. The “Fixed in window” option locks the background so that the visible portion changes when the box moves or you scroll. This can be used for many interesting visual effects such as a quasi parallax effect, as illustrated in many of the sample designs.

Boxes and images

When configured with an image background, box settings are very similar to those of images, and can be visually indistinguishable from image elements. Images are intended as content, boxes as background or decoration.

Boxes as page sections

A common use for boxes is to visually group different sections within a page. This is effective with any of the content modes, a solid color, a gradient, an image or a pattern will all make the box visually separate from the next or previous sections of the page.

A particularly effective section break can be achieved by using an SVG as box background, with a slope or non-straight edge. When the browser width grows, the SVG will be stretched and will expand, so the SVG will need to be aligned against the top or bottom edge of the box.

A similar effect could be achieved with a PNG image with partially transparent background, but at the expense of a much larger download size than typical vector SVG content.

The box settings
The box border settings
The box shadow settings

Please report any shortcoming in this documentation and we’ll fix it as soon as possible!

Updated for Sparkle 5.2

Made with Sparkle

Copyright © Crinon SRL 

This website makes use of cookies.

Please see our privacy policy for details.

It’s Okay