CSS bevelled 3d edges with diagonal corners

I’ve got this client that really likes 3d bevel effects. I bit old-school, I know.
He’s given me his ideas in photoshop and I’m trying to get rid of the images and implement it in CSS only.

Here’s what I’m trying to get:

And here’s what I’ve got using box-shadows:

You can see in the top left corner the top shadow runs all the way to the left, rather than cutting the diagonal corner I’d like.

Any suggestions as to how to get this effect? If I can’t get it spot on with CSS I’m going to have to resort to using images. Eugh!

Sorry - do you have a question on how to do it, or are you showing off? We need more detail to know how to take the conversation.

Your question is…?

Sorry guys, I hit save before I was done. :blush: Hopefully my question will make sense now!

Could you please show us your attempt?

Here’s the css for my box-shadow attempt. I had a go with gradients but that didn’t go well.

#header_top_bar {
  width: 990px;
  height: 38px;
  margin: auto;
  position: relative;
  margin-bottom: 14px;
  background-color: rgb(206,206,206);
  box-shadow: inset -10px 10px 5px 0 rgba(255, 255, 255, 1),inset 8px -8px 7px 0 rgba(131, 131, 131, 1);
}

Which looks like this:

Here’s a rough demo. Here’s a starting point.

http://codepen.io/ryanreese09/pen/EaJxvK

You’ll probably need to mess with the box shadow but I have the borders basically working minus your aesthetic color choices.

Thanks for that.

That’s kinda what I’m after, in that CSS borders have the right shaped corners, except that they’re too sharp and defined, whereas I’m after a softer look, like the first example in my opening post. Is it possible without images?

I also tried putting the shadow outside the box to try and soften the sharp borders, but the outside shadow goes outside the border. Doh!

Not sure if this is any better and requires an extra nested element.

1 Like

Yeah I attempting something close to that. I was going to try and put the box shadow on an inner element and then negative margin the overlay. Then I got called to do some CSS at work :stuck_out_tongue: .

I like your solution Paul.

Ooh I like this approach, Paul.

It’s not quite there, but it’s given me an approach which I might be able to tweak into submission. At least there’s hope - I thought it couldn’t be done.

Cheers guys.

Yes I think it needs playing around with to get optimal performance.I’m sure there is a better version in there somewhere. ( I did start with a demo using linear gradients and stops etc to blur out the lines but ran out of time as work got in the way :smile:)

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.