En Medium, Jon Moore identificó recientemente los “encabezados no rectangulares” como una pequeña tendencia. A la: aún no es muy popular, pero espera, chico.
Estamos hablando de encabezados (o, más generalmente, cualquier elemento contenedor) que tienen una forma no rectangular.
Tal como trapezoides:
Por Patrick Kantor
O más formas geométricas complejas:
Películas de Robin de Asar Morris
Por Marc Clancy
O redondeado / elíptico:
Página de inicio de la aplicación de música de Ibnu Mas’ud
O incluso en forma de nalga:
Plutio de Leo Bassam. Lo siento Leo, no puedo dejar de verlo. Y ahora, querido lector, tú tampoco puedes.
Mi dinero también está ganando popularidad. Así que vamos a vencer a la multitud y hablemos de algunas formas de codificarlos. Porque seamos sinceros: se ven bastante impresionantes.
Imagen
Quizás la forma más sencilla de crear cualquiera de los encabezados no rectangulares que se muestran arriba es colocar una imagen en la parte superior de su encabezado.
Pero hay algunos problemas aquí:
- ¿Comportamiento receptivo? Estas máscaras tienden a ser de ancho completo y resulta tedioso definir varios anchos de la forma (por ejemplo, srcset) o arriesgarse a la pixelación de los activos ráster.
- Es un archivo totalmente separado que debe obtenerse del servidor; parece un desperdicio para formas simples.
- Es lento iterar en el navegador si tiene que volver a exportar un archivo de imagen desde su programa de diseño.
Podemos resolver todos estos problemas a la vez. Es posible que ya sepas a dónde va este.
SVG
En comparación con la exportación de un JPG desde Sketch, el uso de un SVG en línea es más eficaz, fácil de responder y fácil de iterar el diseño. De hecho, en la mayoría de los casos, esta es la forma en que recomendaría usar. Versátil, para varios navegadores, vectorial y fabuloso.
Con un fondo en ángulo como, una elección que debe hacer es: ¿qué debe permanecer constante a medida que cambia el ancho de la pantalla, el ángulo o la diferencia de altura entre los dos lados?
Si desea que el ángulo permanezca constante, configure la altura del SVG en vw:
Si desea que la diferencia de altura permanezca constante, establezca la altura del SVG en píxeles:
Y no necesita elegir solo uno, podemos diseñar esto de manera receptiva, ya que los elementos SVG están sujetos a consultas de medios. Echa un vistazo a este encabezado de estilo geométrico en anchos por debajo y por encima de 700 px.
Dispara, hijo. ¿Qué no se podría amar? Ah, e incluso podemos hacer el estilo de nalgas.
(Quizás eso se haga más correctamente con los béziers, ¡pero entiendes la idea!)
Una cosa más que no vale nada, y es que si desea hacer un fondo SVG completamente en CSS, puede guardar el SVG y hacer referencia a su URL en un pseudo elemento.
header::after {
content: "";
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
background: url(divider.svg);
}Y si usa `divider.svg` como un elemento que se repite en diferentes escenarios, también puede colorearlo de manera diferente según lo necesite:
header::after polygon {
fill: white;
}Pero aquí hay un problema: ¿qué pasa si la sección debajo del encabezado tiene un fondo complicado? En todos estos ejemplos hasta ahora, solo asumimos un fondo blanco liso. ¿Qué pasa si hay un degradado elegante u otra imagen de fondo o algo así? ¿Y que?
ruta del clip
Esta propiedad viene al rescate si tiene un fondo moderadamente complejo debajo del encabezado y, por lo tanto, desea que el enmascaramiento se realice desde dentro del encabezado no rectangular, en lugar de hacerlo mediante un elemento posterior.
Y al igual que la sintaxis SVG similar, si desea cambiar el comportamiento de respuesta de lo anterior de ángulo-se-mantiene-constante a altura-diferencial-se-mantiene-constante, puede cambiar la altura calculada a un porcentaje simple.
¿Cuál es el mayor inconveniente de Clip-path? El soporte del navegador no es tan bueno. Sin embargo, dependiendo de la importancia de su encabezado no rectangular o div, podría calificar como una mejora progresiva. En cuyo caso, ¡recorte el camino!
radio de borde
Ahora, hasta ahora, solo hemos mencionado métodos que funcionan para generar todas las formas que llamé arriba. Sin embargo, si sabemos qué forma particular queremos que tenga nuestro encabezado, es posible que tengamos acceso a una forma más fácil.
Por ejemplo, un cabezal elíptico convexo es perfecto para border-radius.
Y un encabezado elíptico cóncavo podría simplemente tener el radio del borde en el elemento después del encabezado.
section {
border-bottom-left-radius: 50% 20%;
border-bottom-right-radius: 50% 20%;
}Otro beneficio de este método es que el fondo de la sección debajo del encabezado aún podría tener imágenes de fondo.
transformar: sesgar
Si sabemos que queremos crear un encabezado trapezoidal, podemos usar una transformación CSS para sesgar todo.
Esto tiene el efecto secundario de sesgar los elementos secundarios del elemento sesgado, por lo que querrá agregar un elemento secundario en el encabezado que se sesga, y todo lo demás irá en elementos hermanos.
Sesgado.
Y sin sesgo.
El diseño de la página de inicio de Stripe utiliza este método, y lo que es más brillante, incluyen algunos tramos secundarios (cada uno es un bloque de color) que se desvían con el elemento principal, creando un efecto más complejo y colorido.
¿Cuál es el mejor?
En lo que a mí respecta, SVG es generalmente el camino a seguir. Sin embargo, si tiene un fondo más complejo debajo del encabezado, la mejor opción depende de la forma. En ese caso, investigaría si skew o border-radius podría cumplir con la dirección de arte necesaria, o si la compatibilidad con el navegador no fuera un problema suficiente para ir con clip-path.
| Permite una glucemia compleja a continuación | Soporte del navegador | Formas creables | |
|---|---|---|---|
| Imagen | No | sí | Todo |
| SVG | No | sí | Todo |
| Ruta del clip | sí | No | Todo |
| Radio de borde | sí | sí | Solo elíptica |
| Transformar: sesgar | sí | sí | Solo trapezoidal |
Erik Kennedy es un diseñador independiente de UX / UI y creador de Learn UI Design, un curso práctico en video en línea sobre diseño visual para pantallas. Incluye color, tipografía, proceso y más. Más de 16 horas de video en más de 30 lecciones.