Transparent text with solid shadow

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>