triangle - shapes css html

strikethrought transparente en el texto

Question

Necesito implementar un texto transparente con CSS para que no tenga que reemplazar la etiqueta <h1> por una etiqueta <img> . Logré implementar una línea en el texto con CSS, pero no puedo hacerlo transparente.

El efecto deseado:

Lo que tengo :

body{
background: url(http://lorempixel.com/output/people-q-c-640-480-1.jpg);
background-size:cover;
}
h1{
font-family:arial;
position:relative;
display:inline-block;
}
h1:after{
content:'''';
position:absolute;
width:100%;
height:2px;
left:0; top:17px;
background:#fff;
}

<h1>EXAMPLE</h1>

Cómo puedo implementar el strikethrought transparente que extruye mi texto y permite que el fondo aparezca en esta línea.

Answer 1

Puede lograr esto en navegadores webkit usando enmascaramiento

CSS

h1 {
-webkit-mask-image: linear-gradient(0deg, white 20px, transparent 20px, transparent 24px, white 24px);
}

manifestación

hover demo

Answer 2

Puede lograr el impacto transparente en el texto solo con CSS con el uso de line-height de line-height y overflow:hidden; propiedades.

Demostración: golpe transparente de CSS a través

Salida:

Explicación

1. Paso 1: oculta la parte inferior del texto <h1> con
   height:0.52em; overflow:hidden; use em units para que la altura se adapte al tamaño de fuente que está utilizando para la etiqueta <h1>
   violín
2. Paso 2: "reescribe" el contenido en un pseudo elemento para minimizar el marcado y evitar la repetición de contenido. Puede usar un atributo de datos personalizado para mantener todo el contenido en el marcado y no tiene que editar el CSS para cada título.
   violín
3. paso 3: alinee el texto del pseudo elemento en la parte superior, de modo que solo se muestre la parte inferior con line-height:0;
   violín

Código relevante:

body{
background: url(http://lorempixel.com/output/people-q-c-640-480-1.jpg);
background-size:cover;
}
h1{
font-family:arial;
position:relative;
}
h1 span, h1:after{
display:inline-block;
height:0.52em;
overflow:hidden;
font-size:5em;
}
h1:after{
content: attr(data-content);
line-height:0;
position:absolute;
top:100%; left:0;
}

<h1 data-content="EXAMPLE" ><span>EXAMPLE</span></h1>

SVG

Otro enfoque para este efecto es usar SVG con un elemento de máscara . La demostración muestra ese enfoque y aquí está el código relevante:

*{margin:0;padding:0;}
html,body{height:100%;}
body{background: url(https://farm8.staticflickr.com/7140/13689149895_0cce1e2292_o.jpg) center bottom; background-size:cover;text-align:center;}
svg{
text-transform:uppercase;
color:darkorange;
background: rgba(0,0,0,0.5);
margin-top:5vh;
width:85%;
padding:0;
}

<svg viewbox="0 0 100 13">
<defs>
<mask id="strike">
<rect x="0" y="0" width="100" height="13" fill="#fff" />
<rect x="0" y="5" width="100" height="1" />
</mask>
</defs>
<text id="text1" x="50" y="8.5" font-size="7" text-anchor="middle" fill="darkorange" mask="url(#strike)">SVG strike through</text>
</svg>