I have a design of navbar in mind that I want to implement for my web page. Please see the drawing I created using Inkscape.

my design of navbar

I read the tutorial on w3.org and there is an example of adding padding to a list in navbar.

ul.navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid black }

I am thinking if that method could be extended to create the shadow in my design or there is a better way.

  • downvotes without suggestions for improvement? – swoopin_swallow Mar 2 '17 at 18:41

You can create the shadow with the CSS's box-shadow.


box-shadow: .6em .6em 0 black;

The first two values are the offset values, the third is the blur radius (we want a solid shadow so set it to 0). There is an optional fourth numeric value that controls the spread (i.e. makes the shadow bigger or smaller; we've left that out). The last value is, obviously, the color.

A very quick full recreation of your menu would look something like this:


li {
  display: block;
  width: 4em;
  font-size: 2em;
  background: white;
  border: 2px solid black;
  margin: 1em;
  padding: 1em;
  box-shadow: .6em .6em 0 black;

Which should look something like this:

enter image description here


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.