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.
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.
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.
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. The difference mainly for accessibility purposes.
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.
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 ©2020 River SRL
IT06208340486 — REA FI-609716