Transparent text with solid shadow - html

Question

I'm trying to achieve the effect mentioned in the title:
I used the following code:
.contact-txt h1 {
color: transparent;
font-size: 60px;
line-height: 1em;
text-shadow: 3px 3px #00d44a;
}
But what I get is a green text:
Is there a way to have a transparent text with a solid shadow as in the first picture?

Answer 1

The idea is to have two div stack together, if you only use one with transparent, the shadow is not blocked by text.
Using two could achieve this effect
-webkit-background-clip: text
(currently supported in Chrome, Safari, and Opera, and being implemented in Firefox) is the text value for background-clip. When used along with the proprietary -webkit-text-fill-color: transparent; feature, this allows you to clip background images to the shape of the element's text, making for some nice effects. This is not an official standard, but has been implemented across multiple browsers, as it is popular, and used fairly widely by developers. When used in this context, both of the properties would require a -webkit- vendor prefix, even for Non-Webkit/Chrome-based browsers:
.text-clip {
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
REF: https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_boxes/Advanced_box_effects#-webkit-background-clip_text
div {
position: absolute;
top: 0;
left: 0;
background-image: url(http://www.cameraegg.org/wp-content/uploads/2013/08/AF-S-DX-NIKKOR-18-140mm-f-3.5-5.6G-ED-VR-sample-images-1.jpg);
font-size: 70pt;
font-weight: bold;
line-height: 2em;
padding: .5em;
font-family: Roboto;
}
div.shadow {
color: transparent;
text-shadow: 7px 7px red;
}
div.text {
color: transparent;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<div class="shadow">DIRECTOR</div>
<div class="text">DIRECTOR</div>

Answer 2

Supported by modern browsers with the exception of Edge, you have mix-blend-mode.
This allows you to set a blend-mode , hard-light, that handles gray as if it was transparent. You then set the color of text to gray, and you got your effect:
.test {
color: gray;
font-size: 100px;
line-height: 1em;
text-shadow: 3px 3px #00d44a;
mix-blend-mode: hard-light;
z-index: 2;
position: absolute;
}
.bkg {
width: 600px;
height: 200px;
top: 0px;
left: 0px;
position: absolute;
background-image: url(http://lorempixel.com/400/200/);
background-size: cover;
z-index: 1;
}
<div class="test">DIRECTOR</div>
<div class="bkg"></div>