Rayas de fondo animadas que hacen la transición en espera | trucos CSS

Con qué frecuencia acceder a CSS background-size ¿propiedad? Si eres como yo, y probablemente como muchas otras personas de front-end, generalmente es cuando background-size: cover imagen para llenar el espacio de un elemento completo.

Bueno, se me presentó un desafío interesante que requería un tamaño de fondo más avanzado: franjas de fondo que transicionan en espera. Mira esto y pasa el cursor sobre él:

Hay mucho más en juego allí que el tamaño del fondo, pero era el truco que necesitaba para que aparecieran las rayas. Pensé en mostrarles cómo llegué allí, no solo porque creo que es un efecto visual realmente agradable, sino porque me exigía ser creativo con degradados y modos de fusión que creo que les podrían gustar.

Comencemos con una configuración muy básica para simplificar las cosas. estoy hablando de soltero <div> en el HTML que tiene el formato de un cuadrado verde:

<div></div>

div {
  width: 500px;
  height: 500px;
  background: palegreen;
}

Establecer franjas de fondo

Si su mente fue directamente a CSS Linear Gradient cuando vio estas rayas, entonces estamos en la misma página. En este caso, no podemos hacer exactamente un degradado repetitivo ya que queremos que las franjas ocupen un espacio irregular y las muevan, pero podemos crear cinco franjas concatenando cinco fondos encima de nuestro color de fondo existente y colocándolos en la parte superior esquina derecha del contenedor:

div {
  width: 500px;
  height: 500px;
  background: 
    linear-gradient(black, black) top right,
    linear-gradient(black, black) top 100px right,
    linear-gradient(black, black) top 200px right,
    linear-gradient(black, black) top 300px right,
    linear-gradient(black, black) top 400px right, 
    palegreen;
}

Hice rayas horizontales, pero también podríamos ir verticales con el enfoque que estamos viendo aquí. Y podemos simplificar esto un poco con propiedades personalizadas:

div {
  --gt: linear-gradient(black, black);
  --n: 100px;

  width: 500px;
  height: 500px;
  background: 
    var(--gt) top right,
    var(--gt) top var(--n) right,
    var(--gt) top calc(var(--n) * 2) right,
    var(--gt) top calc(var(--n) * 3) right,
    var(--gt) top calc(var(--n) * 4) right, 
    palegreen;
}

De modo que --gt el valor es el gradiente y --n es una constante que usamos para desplazar las barras hacia abajo de manera que se desplacen verticalmente. Y es posible que haya notado que no establecí un gradiente real, sino barras negras sólidas en el linear-gradient() característica: esto es intencional, y veremos por qué lo hice en un momento.

Una cosa más que debemos hacer antes de continuar es evitar que nuestro fondo se repita; de lo contrario, llenarán todo el espacio:

div {
  --gt: linear-gradient(black, black);
  --n: 100px;

  width: 500px;
  height: 500px;
  background: 
    var(--gt) top right,
    var(--gt) top var(--n) right,
    var(--gt) top calc(var(--n) * 2) right,
    var(--gt) top calc(var(--n) * 3) right,
    var(--gt) top calc(var(--n) * 4) right, 
    palegreen;
  background-repeat: no-repeat;
}

Podríamos poner background-repeat en background taquigrafía, pero pensé en desglosarlo aquí para facilitar la lectura.

Cambia las rayas

Técnicamente tenemos rayas, pero es bastante difícil saberlo porque no hay espacio entre ellas y cubren todo el contenedor. Más bien, tenemos un cuadrado negro sólido.

Aquí es donde podemos usar background-size Queremos establecer tanto la altura como el ancho de las barras, y la propiedad admite una sintaxis de dos valores que nos permite hacer precisamente eso. Y podemos conectar estos tamaños separándolos con comas de la misma manera que lo hicimos en background.

Comencemos de manera simple configurando primero los anchos. Usando la sintaxis de valor único para background-size establece el ancho y por defecto la altura de la auto. Estoy usando valores completamente aleatorios aquí, así que establezca los valores según lo que funcione mejor para su diseño:

div {
  --gt: linear-gradient(black, black);
  --n: 100px;

  width: 500px;
  height: 500px;
  background: 
    var(--gt) top right,
    var(--gt) top var(--n) right,
    var(--gt) top calc(var(--n) * 2) right,
    var(--gt) top calc(var(--n) * 3) right,
    var(--gt) top calc(var(--n) * 4) right, 
    palegreen;
  background-repeat: no-repeat;
  background-size: 60%, 90%, 70%, 40%, 10%;
}

Si usas los mismos valores que yo, obtendrás esto:

No parece exactamente que hayamos establecido el ancho de todas las franjas, ¿verdad? Esto es porque auto Comportamiento de altura de sintaxis de valor único. La segunda franja es más ancha que las otras debajo y las cubre. Necesitamos establecer las alturas para que podamos ver nuestro trabajo. Todos deben tener la misma altura y podemos reutilizar el nuestro. --n variable, de nuevo para simplificar las cosas:

div {
  --gt: linear-gradient(black, black);
  --n: 100px;

  width: 500px;
  height: 500px;
  background: 
    var(--gt) top right,
    var(--gt) top var(--n) right,
    var(--gt) top calc(var(--n) * 2) right,
    var(--gt) top calc(var(--n) * 3) right,
    var(--gt) top calc(var(--n) * 4) right, 
    palegreen;
    background-repeat: no-repeat;
    background-size: 60% var(--n), 90% var(--n), 70% var(--n), 40% var(--n), 10% var(--n); // HIGHLIGHT 15
}

¡Ay, mucho mejor!

Adición de espacios entre rayas

Este es un paso completamente opcional si su diseño no requiere espacios entre las rayas, pero el mío sí y no es demasiado complicado. Cambiamos la altura de cada tira. background-size ligeramente, disminuyendo el valor para que no ocupen todo el espacio vertical.

Podemos seguir usando el nuestro. --n variable, pero restar una pequeña cantidad, digamos 5pxusando calc() para conseguir lo que queremos.

background-size: 60% calc(var(--n) - 5px), 90% calc(var(--n) - 5px), 70% calc(var(--n) - 5px), 40% calc(var(--n) - 5px), 10% calc(var(--n) - 5px);

Eso es mucha repetición, que podemos eliminar con otra variable:

div {
  --h: calc(var(--n) - 5px);
  /* etc. */
  background-size: 60% var(--h), 90% var(--h), 70% var(--h), 40% var(--h), 10% var(--h);
}

Enmascaramiento y mezcla

Ahora vamos a intercambiar palegreen color de fondo que hemos estado usando con fines visuales hasta este punto para el blanco.

div {
  /* etc. */
  background: 
    var(--gt) top right,
    var(--gt) top var(--n) right,
    var(--gt) top calc(var(--n) * 2) right,
    var(--gt) top calc(var(--n) * 3) right,
    var(--gt) top calc(var(--n) * 4) right, 
    #fff;
  /* etc. */
}

Un patrón en blanco y negro como este es perfecto para enmascarar y mezclar. Para hacer esto, primero envolveremos el nuestro. <div> en un nuevo contenedor principal e ingrese un segundo <div> Por debajo de eso:

<section>
  <div></div>
  <div></div>
</section>

Aquí haremos algunas refactorizaciones de CSS. Ahora que tenemos un nuevo contenedor principal, podemos pasar el parcheado width y height propiedades que usamos en el nuestro <div> allá:

section {
  width: 500px;
  height: 500px;
} 

También usaré CSS Grid para posicionar los dos <div> elementos uno encima del otro. Este es el mismo truco que usa Temani Afif para crear sus galerías de imágenes súper geniales. La idea es colocar ambos divs encima del contenedor completo usando grid-area propiedad y alinear todo al centro:

section {
  display: grid;
  align-items: center;
  justify-items: center;
  width: 500px;
  height: 500px;
} 

section > div {
  width: inherit;
  height: inherit;
  grid-area: 1 / 1;
}

Ahora mira esto. La razón por la que usé un degradado sólido que va de negro a negro anteriormente es para prepararnos para enmascarar y mezclar los dos <div> Esto no es verdadero enmascaramiento en el sentido que llamamos mask propiedad, pero el contraste entre las capas controla qué colores son visibles. El área cubierta de blanco permanecerá blanca y el área cubierta de negro desaparecerá. Documentación de MDN sobre modos de mezcla hay una buena explicación de cómo funciona esto.

Para que esto funcione, voy a aplicar el degradado real que queremos ver al primero. <div> al aplicar las reglas de estilo de nuestro inicial <div> del nuevo usando :nth-child() pseudo-selector:

div:nth-child(1) { 
  background: linear-gradient(to right, red, orange); 
}

div:nth-child(2)  {
  --gt: linear-gradient(black, black);
  --n: 100px;
  --h: calc(var(--n) - 5px);
  background: 
    var(--gt) top right,
    var(--gt) top var(--n) right,
    var(--gt) top calc(var(--n) * 2) right,
    var(--gt) top calc(var(--n) * 3) right,
    var(--gt) top calc(var(--n) * 4) right, 
    white;
  background-repeat: no-repeat;
  background-size: 60% var(--h), 90% var(--h), 70% var(--h), 40% var(--h), 10% var(--h);
}

Si nos detenemos ahí, realmente no veremos ninguna diferencia visual con respecto a lo que teníamos antes. Esto se debe a que aún no hemos hecho la mezcla real. Así que hagámoslo ahora usando screen modo de mezcla:

div:nth-child(2)  {
  /* etc. */
  mix-blend-mode: screen;
}

Utilicé un color de fondo beige en la demostración que mostré al comienzo de este artículo. Este tipo de color blanquecino ligeramente más oscuro permite que algo de color se extienda por el resto del fondo:

El efecto de retención

La última pieza de este rompecabezas es el efecto de sujeción, que expande las rayas a todo lo ancho. Primero, escribamos nuestro selector para ello. Queremos que esto suceda cuando el contenedor principal (<section> en nuestro caso) se mantiene. Cuando se mantenga, redimensionaremos el fondo de las franjas contenidas en el segundo <div>:

/* When <section> is hovered, change the second div's styles */
section:hover > div:nth-child(2){
  /* styles go here */
}

vamos a querer cambiar background-size de las tiras a todo el ancho del envase, manteniendo la misma altura:

section:hover > div:nth-child(2){
  background-size: 100% var(--h);
}

Esto "ajusta" el fondo al ancho completo. Si le agregamos un poco transition a esto, luego vemos que las barras se ensanchan en espera:

section:hover > div:nth-child(2){
  background-size: 100% var(--h);
  transition: background-size 1s;
}

Aquí está la demostración final una vez más:

Solo agregué texto allí para mostrar cómo se vería usar esto en un contexto diferente. Si hace lo mismo, vale la pena asegurarse de que haya suficiente contraste entre el color del texto y los colores utilizados en el degradado para acomodar Directrices WCAGY aunque nos referimos brevemente a la accesibilidad, vale la pena considerar las preferencias del usuario para reducir el movimiento cuando se trata del efecto de retención.

¡Es un paquete!

Bastante pulido, ¿verdad? Ciertamente lo creo. Lo que también me gusta de él es que es bastante fácil de mantener y personalizar. Por ejemplo, podemos cambiar la altura, los colores y la dirección de las rayas cambiando algunos valores. Incluso puede cambiar algunas cosas más allí, como colores y anchos, para que sea aún más configurable.

Realmente me pregunto si abordarías esto de manera diferente. Si es así, por favor comparte en los comentarios! Sería genial ver cuántas variaciones se nos ocurren.