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>