Disfruté de la publicación de Erik D. Kennedy Las 7 reglas para crear una interfaz de usuario magnífica (Parte 2). En él, su Regla 4 es: Aprenda los métodos de superposición de texto en imágenes. Pensé que podríamos echar un vistazo a todos sus puntos, codificarlos y anotar cualquier cosa que surja técnicamente.
Tintado
La imagen debe ser oscura y no tener muchos bordes de contraste.
Elegir una imagen depende de usted, pero digamos que no es particularmente oscura. Puede oscurecerlo en un programa de edición de imágenes o, con CSS, superponer un color transparente. Probablemente, la forma más limpia de hacerlo es utilizar varios fondos, pero no es muy obvio cómo hacerlo. El truco es usar un degradado que no se gradúe (no se desvanece de un color a otro, es solo sólido).
.darken {
background-image:
linear-gradient(
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0.5)
),
url(shoes.jpg);
}Vea la imagen de Pen Darken con múltiples fondos de Chris Coyier (@chriscoyier) en CodePen.
Y aunque una superposición negra es la más simple y versátil, ciertamente también puede encontrar superposiciones de colores.
De hecho, con este método puedes colorear como quieras desde la comodidad de CSS:
Vea la imagen de Pen Darken con múltiples fondos de Chris Coyier (@chriscoyier) en CodePen.
Texto blanco
El texto tiene que ser blanco. Te reto a que encuentres un contraejemplo que sea limpio y simple. Seriamente. Solo uno.
Encuentro que esto también es cierto, al menos cuando trato de ser elegante. Las revistas de basura tienden a ir con el amarillo.
Vea el Pen myPMGB de Chris Coyier (@chriscoyier) en CodePen.
Imágenes de página completa
Una forma en la que es bastante inevitable establecer texto en una imagen es cuando hace que toda la pantalla se llene con una imagen de fondo. Hemos cubierto cómo hacer eso antes, lo mejor es:
body {
background: /* do whatever tinting and stuff here */;
/* This will ensure everywhere is covered */
background-size: cover;
}Vea el Pen zxqdev de Chris Coyier (@chriscoyier) en CodePen.
Y, por cierto, si desea cubrir toda la pantalla de esta manera, pero luego puede desplazarse hacia abajo para obtener más información, puede configurar el área superior para que tenga un height de 100vh unidades.
Vea Pen myPMvp de Chris Coyier (@chriscoyier) en CodePen.
El soporte del navegador varía un poco allí. Es posible que desee tener un respaldo de altura fija y / o hacerlo con JavaScript.
Texto en un cuadro
Esto es absolutamente simple y muy confiable. Prepara un rectángulo negro ligeramente transparente y haz espuma sobre un texto blanco. Si la superposición es lo suficientemente opaca, puede tener casi cualquier imagen debajo y el texto seguirá siendo totalmente legible.
Funciona con cualquier combinación de colores de contraste.
Vea la imagen de Pen Darken con múltiples fondos de Chris Coyier (@chriscoyier) en CodePen.
Con una sola línea de texto, esto es fácil. Pero si existe alguna posibilidad de que el texto se rompa, es más difícil. Podrías dejar el título como display: block; pero quizás no sea tan elegante como inline. Pero con inline, debe tener cuidado de que el espaciado alrededor de los saltos de línea no sea incómodo.
Hemos cubierto esto antes. Creo que se reduce a box-decoration-break como el camino a seguir:
.title {
background-color: black;
color: #fff;
display: inline;
padding: 0.5rem;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}Vea el relleno Pen Multiline con rotura de decoración de caja de Chris Coyier (@chriscoyier) en CodePen.
Borrón
Una manera sorprendentemente buena de hacer legible el texto superpuesto es difuminar parte de la imagen subyacente.
Una forma de hacerlo es hacer que una sección del área herede el mismo fondo, colocarlo de la misma manera (el archivo adjunto fijo es unidireccional) y luego desenfocarlo.
.module {
background: url(http://s3-us-west-2.amazonaws.com/s.cdpn.io/3/skyscrapers.jpg);
background-attachment: fixed;
overflow: hidden;
}
.module > header {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 20px 10px;
background: inherit;
background-attachment: fixed;
}
.module > header::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: inherit;
background-attachment: fixed;
-webkit-filter: blur(12px);
filter: blur(12px);
}Vea Pen yyOodm de Chris Coyier (@chriscoyier) en CodePen.
Eso es usar una barra de color además del desenfoque, pero no necesariamente es necesario. Podrías difuminarlo lo suficiente, funciona bien:
Vea el Pen ZYWXEY de Chris Coyier (@chriscoyier) en CodePen.
Suavizando solo una parte de la imagen como esta, Erik está llamando una malla.
Una malla es un equipo de fotografía que suaviza la luz. Ahora también es una técnica de diseño visual para suavizar una imagen para que el texto superpuesto sea más legible.
Desvanecimiento del piso
El desvanecimiento del piso es cuando tiene una imagen que se desvanece sutilmente hacia el negro en la parte inferior, y luego hay un texto en blanco escrito sobre ella.
Esto quizás sea bastante obvio, ya que hemos estado usando degradados para teñir, pero …
.module {
background:
linear-gradient(
to bottom,
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 0.6)
),
url(skyscrapers.jpg);
}Vea el Pen ByKwaq de Chris Coyier (@chriscoyier) en CodePen.
Es posible que pueda salirse con la suya con menos oscuridad de la imagen si la combina con una pequeña sombra de texto:
.title {
text-shadow: 0 1px 0 black;
}Para concluir…
- Es muy divertido encontrar otras formas y jugar con la combinación de estas técnicas.
- Estoy seguro de que encontrará navegadores en los que estas demostraciones fallan. Tal vez podamos usar el hilo de comentarios para discutir las posibilidades de reserva.