4

Adjunto imagen de lo que quiero lograr, por si acaso el título es confuso :)introducir la descripción de la imagen aquí

  • Video de fondo
  • Div con backdrop-filter
  • Texto dentro del div, el cual permita ver el video de fondo <- Lo complicado

Paso el código de lo que tengo hasta ahora. Es muy poco eficiente reproducir dos veces el videos además, en mi pc, no están sincronizados al volver a empezar. Por estos motivos no es una solución viable. ¿Cómo podría obtener este efecto?

.home {
  grid-area: home;
  overflow: hidden;
  position: relative;
}

.home video {
  position: absolute;
  width: auto;
  height: auto;
  min-width: 100%;
  min-height: 100%;
  z-index: -1;
  object-fit: cover;
}

.home .content {
  display: grid;
  grid-template-areas: 'name empty';
}

.home .content .name {
  grid-area: name;
  width: 50vw;
  height: 100vh;
  backdrop-filter: blur(15px);
}

.clipped-video {
  -webkit-clip-path: url(#text-overlay);
  clip-path: url(#text-overlay);
}

text {
  font-size: 18rem;
}

.home .content .empty {
  grid-area: empty;
  width: 50vw;
  height: 100vh;
}
<section class="home" id="home">
  <video autoplay loop muted playsinline src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" type="video/webm"></video>
  <div class="content">
    <div class="name">
      <div class="wrapper">
        <video class="clipped-video" muted loop autoplay autoplay loop muted playsinline src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" type="video/webm"></video>
        <svg>
          <clipPath id="text-overlay">
            <text x="50%" y="50%" dominant-baseline="middle" dy="1.58em">NAM</text>
          </clipPath>
        </svg>
      </div>
    </div>
    <div class="empty"></div>
  </div>
</section>

0

1 respuesta 1

4

Puedes conseguir un efecto pareicdo a lo que quieres, con mucho menos códiog y sin repetir los videos. Lo primero es dejar de usar clip-path y pasarse a mask. Las máscaras son más potentes y versátiles que los clip-path y te permiten seleccionar el area indicada o el contrario al área indicada (que es lo que quieres).

Aquí te dejo un ejemplo de cómo podría hacerse: (nota que he cambiado algunos valores para que funcione mejor en la demo, tendrás que ajustarlos de vuelta)

.home {
  width: 500px;
  height: 300px;
  position: relative;
}

svg {
  width: 500px;
  height: 300px;
  position: absolute;
  opacity: 0;
}

video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

div {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;  
  -webkit-backdrop-filter: blur(10px);
  -webkit-mask: url(#text-overlay), linear-gradient(#fff 0 0);
  -webkit-mask-composite: exclude;
  backdrop-filter: blur(10px);
  mask: url(#text-overlay), linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
<svg>
  <mask id="text-overlay">
    <text x="6%" y="50%" dominant-baseline="middle" font-size="100px" font-weight="bold" font-family="Arial" fill="#fff">NAM</text>
  </mask>
</svg>

<section class="home" id="home">
  <video autoplay loop muted playsinline src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" type="video/webm"></video>
  <div></div>
</section>

Estos son los pasos que seguí cambiando minimamente el SVG:

  1. Reemplazar <clipPath> con <mask>
  2. Añadir un color blanco al <text> dentro de la máscara
  3. Aplicar la máscara al elemento vacío usando mask

Con eso sólo queda borroso el video por debajo del texto. ¡Pero lo que buscas es lo contrario! La solución: añadir una nueva máscara que ocupará todo el elemento e indicar que quieres que la composición sea exclusiva entre las máscaras.

mask: url(#text-overlay), linear-gradient(#fff 0 0);
mask-composite: exclude;
6
  • Hola, aunque la imagen se ve mucho mejor, el texto no se ve. No soy el autor. pero creo que eso se refiere la pregunta (que el texto sea como una marca de agua o una ventana donde no este borrosa la imagen). Aunque de repente es la Versión de Chromium: 109.0.5414.149 que uso
    – DABL03
    Commented el 13 ago. a las 21:49
  • 2
    @DABL03 debe ser tu version, porque a mi se me ve bien. Por cierto la respuesta es 10/10 ni sabia que se podia hacer esto. Commented el 14 ago. a las 2:46
  • @DABL03 encontré un fallo en mi versión que hacía que no se viese bien en versiones antiguas de Chrome o en Safari. Lo he corregido, espero que ahora se vea mejor. Como referencia, esto es lo que veo en Chrome, Safari y Firefox: i.imgur.com/ceBuVmH.png
    – Alvaro Montoro
    Commented el 14 ago. a las 2:46
  • @AlvaroMontoro tenes algun link donde saber mas al respecto de mask y como aprovechar su potencial? me interesa el tema. Commented el 14 ago. a las 2:50
  • 2
    @infinit3Loop__ gracias por los comentarios. Para cosas de CSS normalmente recomiendo los artículos de MDN (aunque para mask sólo está en inglés). Se puede aprender mucho explorando el código de otras personas. En concreto, Ana Tudor y Temani Afif hacen cosas increíbles con CSS y máscaras y lo comparten en su CodePen. Aprendí mucho viendo sus demos (aunque a veces pueden ser difíciles de leer.)
    – Alvaro Montoro
    Commented el 14 ago. a las 2:54

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.