New Bevel stack

The easiest way to make angles and bevels in your designs.

Bevel is super simple to use and can make a big difference to your design options. As used on the ButtonPlus 2 demo site and of course, this one:

Bevel is, of course, totally free.


Another brilliant stack everyone can use and what a beautiful web site too.

1 Like

Very nice @tav. looking forward to taking a look at this one.

1 Like


Great, useful stack Andrew :slight_smile:

1 Like

Hi Steve, it’s only working on Foundation? -your download

@TINO I believe Steve’s demo is a Foundation project but the principle should also work with Foundry. It is BWD’s magic that makes it all work so well. Try dropping a Nav Bar in a Pin or ScrollUp stack and go from there.

@SteveB It is quite normal to use 2 versions to create the Tablet up and mobile versions. It is easier just to do it that way and you then have total control.


Seems like there is only one on the page now. Which setting(s) would you like a mobile option for?

Also, don’t forget that the menu need not be in the bevel stack. Bevel could be immediately below the menu within the Pin stack - that way you would only need to swap bevels using visibility controls and not replicate the entire menu.

Ah, I see what you mean - sorry missed that point completely… I think the way that you have done it is the best method.

There are just too many possible layouts to put that sort of thing in the settings without horrendously complicating things. There are of course width settings for small and larger screens which are designed to keep the sizing correct when columns are set to not stack on small screens.

No, I’m afraid not. A bevel is made up of two parallelograms and so you would need to provide two halves of a spliced image.
If you want angles with image backgrounds then Sections Angle is the appropriate tool.

Two opposite angles in a 2 column with half the image in each should work. If you are very pedantic you will want to apply the opposite skew in Photoshop or whatever to ensure it is straight when skewed in CSS. This is a lot of work though.

Depending on what you are trying to achieve there may be a much easier way by just using a bevel at the bottom of a straight section - i.e. use it as a mask to match the page background or following stack colour.

There is also SectionsMask that can be used to create some interesting shapes on images

1 Like

Andrew, for some reason in Safari on the iPad mini 1 and iOS7 instead of corners shows a straight line. On the computer in different browsers it shows fine. And in the Preview in Rapidweaver normally is shown, with the angles. Why?

I would assume it’s because iOS 7 was replaced by 8 that was replaced by 9 that was replaced by 10 and 11 is on the horizon.
Acording to Wikipedia:
iOS 7 is the seventh major release of the iOS mobile operating system developed by Apple Inc., being the successor to iOS 6. It was announced at the company’s Worldwide Developers Conference on June 10, 2013,[1] and was released on September 18, 2013.[2] It was succeeded by iOS 8 on September 17, 2014.[3]

1 Like

Here’s a useful page that shows the iOS user stats
iOS 7 has 1.9% share and if you look at it on just the iPad it’s 1.1%

Yes, iOS 7 is quite old.
The iPad mini 1st generation should be able to be updated to iOS 9.3.5.

That will be it for that hardware.

I have a couple of iPad 3rd generations that I’m in the same boat with. Sorry, Apple. Not going to upgrade hardware on a tablet until it is needed. I run my old iPad iOS 9.3.5 and use Chrome (latest version works fine).

1 Like

My old iPad3 with iOS 9.35 works fine with Bevel. The only thing I can do is to suggest that you update iOS.
I have no clue and no way to test why Safari in iOS7 does not render the angles, there is not really any ultra modern CSS involved.
Sorry about that but some things are just beyond our control.

1 Like

Thank you all for the answers! But to upgrade the iPad Mini 1 does not want to, since version 9 may work slowly.

But also wanted to ask, is it possible to add a border to the corners? That is, to the bend line was the border. Don’t know how to explain it properly in English.

Love, LOVE the site @tav

I’m not sure what you mean about the borders do you mean like the image below?
As you will see in that image if you look closely, the border gets cropped near the point of the bevel. This is not insurmountable but would require a lot of CSS calculations to prevent it happening.
Maybe I will look at adding it in a future update.

1 Like

Thanks @Aaron, always nice coming from a proper designer.

1 Like

Yes, it was meant (how on the image).