: How to implement navbar list with shadow in html/css? 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. I read

@Berryessa866

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

e.g.

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:

<ul>
<li>Home</li>
<li>About</li>
<li>Pages</li>
</ul>




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:

Vote Up Vote Down