How do i create this shadow effect?

[Anonymous]

I want to create this exact shadow effect without using any images and hopefully without adding any new elements. I want to apply the shadow to the header and have it on that one side. If doing it this way is impossible im open to any solution. Thank you.
image

[yoyo]

The image you uploaded is not opened here, it says

server not found

[Anonymous]

Thats weird. Its on google drive and its working for me. try it again please.

[Anonymous]

here is the image https://drive.google.com/file/d/0B6uLS_xxWkjha3EtRmZ2ZGwydXc/edit?usp=sharing

[Senff]

So that’s like a curved shadow. I’m sure it can be done with some really clever/fancy CSS, but I would just go for an image, really.

[Anonymous]

its possible to create the effect. This actually shows you how http://www.paulund.co.uk/creating-different-css3-box-shadows-effects But i don’t want to create another element. I want to apply the shadow to the header. And i also want it to be on one side only. ill even use javascript if necessary.

[Merri]

http://codepen.io/Merri/pen/jGbiz

Only the part that is of interest:

.your-topbar-element:after {
  border-radius: 0 0 100% 100%;
  box-shadow: 0 1em .5em rgba(64, 48, 0, .4);
  content: '';
  bottom: .5em;
  left: 1em;
  right: 1em;
  top: 0;
  position: absolute;
  z-index: -1;
}

The after pseudo element is the only thing required, and position: relative; on the parent element in addition to the properties above.

Just adjust the left and right values in the pseudo element and that lets you align the shadow to the position you want it to appear in.

[Author]

Posts