How to: nested SuperB&B stacks

When nesting stacks and using a border radius, you will need to calculate the border radius of each SuperB&B stack involved. Although this looks complicated at first sight, once you know the trick it is in fact quite easy.

Demo #1  |  Demo #2  |  Demo #3  |  Demo #4  |  Demo #5  |  Demo #6  |  back to the product page
Example #1: nested SuperB&B stacks without distances.

  1. Set the border width and color of each SuperB&B stack and the border radius of the inner stack to your liking.
  2. Set a background to the inner stack only (optionally).
  3. Calculate the value of the border radius of each SuperB&B stacks except the inner one. The border radius of each stack is the border radius of the stack inside it plus the border width of the stack itself. See the table for the calculations used to create the funky demo below.
show
border color
show

border width

show

border radius*

orange

10px

30px

yellow

15px

[30+15=] 45px

green

20px

[45+20=] 65px

blue

25px

[65+25=] 90px

purple

30px

[90+30=] 120px

show
show
show
show
* border radius of the stack inside it plus the border width of the stack itself
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris.
Example #2: nested SuperB&B stacks with distances.

  1. Set the border width, color and distance of each SuperB&B stack and the border radius of the inner stack to your liking.
  2. Set a background to the inner stack only (optionally).
  3. Calculate the value of the border radius of each JABBS stacks except the inner one. The border radius of each stack is the border radius of the stack inside it plus the border width of the stack itself plus the distance of the stack itself.
I think it’s best to look at the table with the calculations used, because it sounds more complicated than it is.
show
border color
show

border width

show

distance

border radius*

orange

10px

5px

30px

yellow

15px

10px

[30+15+10=] 55px

green

20px

15px

[55+20+15=] 90px

blue

25px

show

20px

[90+25+20=] 135px

purple

30px

25px

[135+30+25=] 190px

show
show
show
* border radius of the stack inside it plus the border width of the stack itself plus the distance of the stack itself
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris.
In the download of the stack, a RapidWeaver sandwich file is included with the examples on this page, and many more.
© 2012-2017 Marathia Web Design | Contact