B
bevel stack
stack setup
Bevel stack is an easy and simple way to bring angles into your designs with these simple settings.
Bevel stack is an easy and simple way to bring angles into your designs.
B
specific settings
More information about the settings relevant to each type of Bevel can be found on the Bevel Types pages. This page describes the settings that are common to all Bevel types.
B
Shape
The shape controls determine the horizontal and vertical direction of the bevel.
The outward and inward controls are used with double angled bevels to determine whether they point outwards or inwards.
Outward
Inward
Split Adjust
The Advanced Split Adjust control allows you to overlap the Bevel segments more than the actual value set in the Split control.
You may need to do this with very shallow bevels that are not as wide as the screen (like the example above).
This is necessary as although the two halves may be exactly 50% width, the browser may not be able to render such small tips of the angles when they fall below 1 pixel.
By overlapping the bevels slightly, you can ensure that visually the two halves join up.
B
Render Issues
Safari will sometimes display a bug when rendering two blocks of color next to each other that is seen as a very thin line where the background of the page shows through.
This only occurs in Safari but is none the less annoying and can make your layout look less than polished.
Bevel therefore provides a Render Adjust setting in the Advanced settings group. All this does is to apply a small negative or positive top margin to the stack.
Usually 0.5px or less is enough to convince Safari not to leave a gap.
Render Adjust
A negative value will move a Bevel stack upwards on the page.
Use negative values if there is a line visible in Safari between another stack and a Bevel stack below it.
A Positive value will move a Bevel stack downwards on the page.
Use positive values if there is a line visible in Safari between a Bevel stack above another stack.
Every project you make has the potential to break new ground. For this you need the tools to do it. Bevel is just one of them.
works in any theme with no dependencies