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

Text shadow not behind gradient clip background

Text shadow not behind gradient clip background

Problem

I am trying to get a logo to use gradient fill with clip and then place a text Shadow behind it. However the shadow always seems to be placed on top?

Obviously I can do this in SVG etc. but for other reasons I would like do it with CSS.

I have created a fiddle "http://jsfiddle.net/Mgz6H/

Please help.

Thanks in advance.

Problem courtesy of: Christopher A. Lewis

Solution

I have used z-index for depth and created absolute div element for shadow. Please check the updated code here

CSS

.logo-shadow {
    position:absolute;
    top:0;
    left:0;
    text-shadow:3px 3px 3px black;
    color:transparent;
    z-index:0;
}

HTML

Light Meter .com
Solution courtesy of: sureshunivers

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

Text shadow not behind gradient clip background

×

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

Get updates delivered right to your inbox!

Thank you for your subscription

×