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

How do you get a CSS inset box shadow on front?

How do you get a CSS inset box shadow on front?

Problem

I have a list:

  • Apple
  • Banana
  • Citrus

When I put a background color on the

  • nodes the box-shadow (inset) that is on the
      node will be hidden. Is there a way I can get the inner shadow of the
        on the foreground so it will overlap the background-color of the
      • nodes?

        ON REQUEST HERE IS THE SAMPLE: http://jsfiddle.net/JbAEL/ Hover with your mouse over the items and you will see the red background color will overlap the inner shadow removing the effect.

        Problem courtesy of: Mark
      • Solution

        HTML & CSS rely on a strict set of defined logic, and unfortunately do not have a way to order via z-index an element's content and it's background independently from each other and interweave them with different elements (as far as I'm aware).

        Here's one proposed method, it's not the most ideal of solutions but sometimes breaking the rules involves getting dirty. Apply the shadow to each of your li elements and slide the shadow depending on which element it is on the list: top, bottom or any element in between.

        HTML

        • Elephant
        • Monkey
        • Snake
        • Zebra

        CSS

        li
        {
            overflow:hidden; height:30px;
        }
        
        li div /* middle items (default) */
        {
            box-shadow                : inset 0px 0px 10px #000000;
            -ms-box-shadow            : inset 0px 0px 10px #000000;
            -moz-box-shadow            : inset 0px 0px 10px #000000;
            -webkit-box-shadow        : inset 0px 0px 10px #000000;
            line-height:30px; height:30px; margin-top:-30px; padding:30px 10px;
        }
        
        li:first-child div /* top item */
        {
            margin-top:0; padding-top:0; padding-bottom:60px;
        }
        
        li:last-child div /* bottom item */
        {
            margin-top:-60px; padding-top:60px; padding-bottom:0;
        }
        

        You can see the full code and demo at the following jsFiddle, and seems to work fine in Firefox 11 and IE9, but can't vouch for other browsers.

        Solution courtesy of: Goran Mottram

        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

        How do you get a CSS inset box shadow on front?

        ×

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

        Get updates delivered right to your inbox!

        Thank you for your subscription

        ×