Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Box-shadow with different size per side

Box-shadow with different size per side

Problem

I am currently working on basing a design, in which the designer has used a Shadow on a div. Since I am not fond of using images for this sort of thing, I have decided to take my CSS skills to the next level. I am completely new to CSS3, yet I want to give this a try using box-shadow. I have been reading into this new feature but I cannot seem to get my exact design working.

This is what I am searching for:

Top: 1px; Right: 5px; Bottom: 9px; Left: 5px

The designer has used different spreads (well, I believe it's called spreads in this context) for the shadow. My issue is that I cannot manage to get this working with different spreads per side of the div, can anyone help me?

Thanks in advance.

div {
    box-shadow: 0px 0px 5px #000;
}
Problem courtesy of: Aquillo

Solution

The intention of box-shadow is to create a shadow of the div you are assigning it to. You can't make specific top-left-right-bottom parts bigger or smaller

See: http://css3gen.com/box-shadow/

The only way this can be done is to fiddle with the variables

For example:

box-shadow: 0px 9px 15px 5px #888888;

This box-shadow will generate a box-shadow that..

  • [0px] doesn't shift left or right
  • [9px] is 9px down
  • [15px] has 15px of blur (play around with it for the desired effect)
  • [5px] is 5px wide (on all sides)
  • [#888888] has a grey color

Another way would be to use border-images.

Solution courtesy of: Biketire

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Box-shadow with different size per side

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×