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

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

        The background-color
        of your li
        s fall on top of the shadows. If you want to retain the shadow, you can make the background color slightly transparent. Try changing background-color:red
        to background-color: rgba(255,0,0,0.1)
        say, where the last value is the opacity. This retains the inset box-shadow, but the color overlay will become a little faint.

        Discussion courtesy of: Abhranil Das

        Talking about a dirty approach, since there is no foreground
        property ;) I decided to make the UL
        node relative, append it with a div
        node at absolute that carries the inner shadow.

        For a working version: http://jsfiddle.net/JbAEL/14/

        Discussion courtesy of: Mark

        This recipe can be found in it’s original form on Stack Over Flow
        .

        责编内容来自:CSS3 Recipes (源链) | 更多关于

        阅读提示:酷辣虫无法对本内容的真实性提供任何保证,请自行验证并承担相关的风险与后果!
        本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
        酷辣虫 » 前端开发 » How do you get a CSS inset box shadow on front?

        喜欢 (0)or分享给?

        专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

        使用声明 | 英豪名录