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

Updated for Sparkle 3.1

Auf Deutsch

En Français

In Italiano

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

Sparkle combines an all-in-one approach, an understandable interface and a focus on producing high performance and search engine optimized websites. 

All in a powerful native Mac app. 

Nothing else comes close.

Copyright ©2021 River SRL 

IT06208340486 — REA FI-609716

This site uses cookies. Some are essential to make our site work; others help us improve the user experience and display third party content. By using the site, you agree to our site sending these cookies. Read our privacy policy to learn more or opt out.