What will be an elegant way to build something like this:
I came up something like this:
But yet could not handle text.
what will be the best approach? relative/absolute or some box-shadow method?
Well you could make an unordered list, then simply style the <li> elements so they have some padding, rounded corners (border-radius), a border and then box shadows and that should get you there.
4 Likes
was able to make something with box-shadow:
Here’s my attempt:
If you zoom in you will see the two shadows.
2 Likes
But what I understand is that shadow can’t have its own border, but you seems to have worked on that also, which I am trying to understand.
The lighter colour has 2px x-offset and y-offset while the darker colour has 3px x-offset and y-offset (both with zero blur and zero spread).
I was a little surprised to find that I had to put the lighter colour before the darker colour in the CSS code.
One of your shadows in your opening post looks like this, but they are all different:
The top border seems to be rather grey whereas the bottom of the shadow seems to be dark purple. That’s why I picked three different colours for border and the two shadows.
2 Likes
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.