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!
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?
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 .
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.
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 )