Máscara de texto con modo de fusión en CSS

Máscara de texto con modo de fusión en css

El de hoy es un ejemplo práctico donde veremos cómo conseguir un efecto de máscara aplicado a un texto sobre una imagen solo con código html y css.

HTML

En cuanto a la estructura html necesitaremos un contenedor que utilizaremos para mostrar una imagen de fondo y que a su vez contendrá el texto que nos hará de máscara.

				
					<main>
	<div class="bg">
		<h1 class="content">wild and free</h1>
	</div>
</main>

CSS

En cuanto al estilo vamos a diferenciar dos partes. La primera es la más importante ya que es la que nos servirá para entender y conseguir el efecto de máscara aplicado a un texto, lo cual es muy sencillo,  y una segunda parte que nos servirá para obtener un resultado que se vea igual de estilado al de la imagen del ejemplo. 

Máscara de texto con modo de fusión en css
Ejemplo del resultado final

Para conseguir el efecto de máscara utilizaremos la propiedad mix-blend-mode o modo de fusión de css que aplicaremos al texto. Esta propiedad especifica cómo el contenido de un elemento, en éste caso nuestro encabezado H1, debe combinarse con su fondo principal directo, es decir, el contenedor con clase bg.

				
					h1 {
  background-color: white;
  mix-blend-mode: screen;
}

El código siguiente es opcional ya que lo utilizaremos si queremos conseguir un resultado igual al del ejemplo.

Igualmente vamos por partes para ir entendiendo cual es la función de cada línea del código y poder modificarlo a nuestro gusto.

Con esta línea importamos una fuente de Google Fonts. Para éste ejemplo utilizaremos la Open Sans Condensed.

				
					@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:700');

Al contenedor principal le agregamos la propiedad overflow: hidden para evitar que el contenido genere scroll al desbordarse.

				
					main{
	overflow:hidden;
}

Cargamos la imagen que se muestra de fondo y lo hacemos solo una vez (no-repeat) de manera proporcional a su tamaño mínimo para que ocupe todo el contenedor (cover).

Le diremos al contendor que ocupe todo el ancho y alto en relación a las dimensiones del viewport y que lo trataremos como un elemento flexible.

				
					.bg {
  background-image: url("https://cdn.pixabay.com/photo/2017/04/27/07/26/rock-climbing-2264698_960_720.jpg");
  background-position: 0% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  
  width: 100vw;
  height:100vh;
  
  display: flex;

}

Utilizamos como fuente la importada anteriormente desde Google Fonts.

Establecemos un tamaño de fuente calculada a partir del 5rem en relación al tamaño de su contenedor.

				
					h1 {
	font-family: "Open Sans Condensed", sans-serif;
	font-size: calc(5rem + 10vw);
	font-weight: 700;
	letter-spacing: -0.5rem;
	line-height: 0.8;
	margin: 1%;
	padding: 5%;
	text-align: right;
	text-transform: uppercase;
}

La propiedad box-sizing nos garantiza que el width y el height del content no se verá afectado por el padding ni por el border.

				
					.content {
	box-sizing: border-box;
}

Con esta media query lo que buscamos es que en pantallas más grandes la máscara de texto ocupe la mitad de la ventana y en pantallas más pequeñas nuestra máscara abarque todo el ancho de la ventana. Cuando el ancho de nuestra ventana sea como mínimo de 40em nuestro content tendrá un ancho de 50vw y un relleno a los lados de 5rem.

				
					@media (min-width: 40em) {
    .content {
        padding-left: 5rem;
        padding-right: 5rem;
        width: 50vw;
    }
}

Código de los estilos completo.

				
					h1 {
	background-color: white;
	mix-blend-mode: screen;
}

@import url("https://fonts.googleapis.com/css?family=Open+Sans+Condensed:700");

main {
	overflow: hidden;
}
.bg {
	background-image: url("https://cdn.pixabay.com/photo/2017/04/27/07/26/rock-climbing-2264698_960_720.jpg");
	background-position: 0% 50%;
	background-repeat: no-repeat;
	background-size: cover;

	width: 100vw;
	height: 100vh;

	display: flex;
}

h1 {
	font-family: "Open Sans Condensed", sans-serif;
	font-size: calc(5rem + 10vw);
	font-weight: 700;
	letter-spacing: -0.5rem;
	line-height: 0.8;
	margin: 1%;
	padding: 5%;
	text-align: right;
	text-transform: uppercase;
}

.content {
	box-sizing: border-box;
}

@media (min-width: 40em) {
    .content {
        padding-left: 5rem;
        padding-right: 5rem;
        width: 50vw;
    }
}

Demo

Puedes ver la demo y el código en mi repositorio de GitHub.

Entradas relacionadas

Facebook
Twitter
LinkedIn

Nuevas/ publicaciones

ir al blog

Nuevas/ publicaciones