Add shadow for transparent text using CSS

Is there a way to add a shadow to transparent text so that the background behind the text remains visible? Maybe somehow use the text itself as a mask? Or text mode (with reasonable cross-browser support)?

My naive attempt:

span { background-image: url(http://i.imgur.com/EWDVnfb.png); color: #FFF; font-family: sans-serif; font-size: 100pt; font-weight: bold; line-height: 2em; padding: .5em; text-shadow: 0 0 .5em #F00; } 
 <span>Test</span> 
+6
source share
1 answer

Here is a solution that works in Chrome and Safari:

Fiddle

Basically, the idea is to have 2 div replayed on top of each other. Bottom provides background and shadow. And above the div just uses a mask to cut out the same text from the background image, so that it covers the text of the bottom element, but not the shadow:

 div { position:absolute; top:0; left:0; background-image: url(http://i.imgur.com/EWDVnfb.png); font-family: sans-serif; font-size: 100pt; font-weight: bold; line-height: 2em; padding: .5em; } div.shadow { color: #fff; text-shadow: 0 0 .5em #F00; } div.text { -webkit-text-fill-color: transparent; -webkit-background-clip: text; } 

EDIT

I just found a great article on css-tricks.com So there seems to be a solution with much better browser support. The idea is to replace the top layer div and svg containing the same text and use a template to fill the text with a background image, here's a sketch:

 <div class="shadow">Test</div> <div> <svg width="400" height="200"> <pattern id="mask" patternUnits="userSpaceOnUse" width="400" height="200" viewbox="0 0 400 200"> <image xlink:href="..." width="300" height="300" /> </pattern> <text x="0" y="1em">Test</text> </svg> </div> 

CSS (in addition to the CSS of my solution):

 text { fill:url(#mask); } 

I tried to get this to work, with partial success. ( DEMO ) But I'm not very good at svg, and someone else can fix it. Anyway, the weakness here is that positioning this correctly and reliably is a real pain, as long as you get it automatically using the Webkit solution.

+7
source

Source: https://habr.com/ru/post/983062/


All Articles