Cómo animar un borde discontinuo con CSS

Los bordes decorados pueden adornar cualquier elemento en la página, pero los bordes de CSS son limitados en lo que respecta al estilo. Los desarrolladores suelen encontrar soluciones como bordes degradados de CSS, bordes SVG, bordes múltiples y más para imitar y mejorar el aspecto de los bordes de las cajas y sus animaciones.

Hoy veremos un truco más simple para bordes discontinuos: animación de borde discontinuo. El borde discontinuo animado se creará utilizando solo el outline y box-shadow, sin preocuparse por los retrocesos, ya que el outline es compatible con IE8 en adelante. De esta forma, el usuario podrá ver los bordes a diferencia de cuando se usa SVG o degradado. Con esto también puedes crear guiones de dos colores. Vamos a ver.

Creando los bordes

Primero crearemos las fronteras. Para esto, usaremos un contorno discontinuo y una sombra de cuadro.

 .banners {outline: 6px amarillo punteado; sombreado de caja: 0 0 0 6px # EA3556; ...} 

El outline necesitará todos sus valores; ancho, tipo y color. La box-shadow solo necesita el valor de extensión, que debería ser igual al ancho del contorno y su color. Tanto el contorno como la sombra de cuadro juntos crearán el efecto de guiones de dos colores.

A continuación, puede ajustar el ancho o la altura de la caja para ver el borde deseado en las esquinas.

Animar los bordes

Para nuestro primer ejemplo de animación, agregaremos animaciones CSS de fotogramas clave a un conjunto de banners con las fronteras animando continuamente, ganando atención. Para el efecto de animación, simplemente intercambiaremos los colores del contorno y la sombra de la caja.

 @keyframes animateBorder {to {outline-color: # EA3556; caja-sombra: 0 0 0 6px amarillo; }} 

Puede orientar el color del contorno utilizando la propiedad de la mano del color de contorno, sin embargo, para la sombra de la caja, por el momento, deberá asignar todos los valores a la propiedad de taquigrafía.

Una vez que la animación esté lista, agréguela a la caja.

 .banners {outline: 6px amarillo punteado; sombreado de caja: 0 0 0 6px # EA3556; animación: 1s animateBorder infinite; ...} 

Transiciones en los bordes

Para el ejemplo de transición, agregaremos bordes a las imágenes y animaremos aquellas que están en vuelo estacionario. También puede cambiar el tamaño del borde para diferentes efectos.

 .photos {outline: 20px dashed # 006DB5; caja-sombra: 0px 0px 0px 20px # 3CFDD3; transición: todos 1s; ...} .photos: hover {outline-color: # 3CFDD3; caja-sombra: 0 0 0 20px # 006DB5; } 

Ahora, desplace el cursor sobre estas imágenes para ver los bordes discontinuos de CSS en toda su gloria animada.

Y eso es una envoltura. Puedes intentar reemplazar los bordes punteados por punteados, pero el efecto puede no ser tan bueno. También puede cambiar el tipo de contorno durante la animación para obtener algunos efectos más.

15 tarjetas de visita clásicas de Tech Legends

Si bien tiene muchas opciones para dejar una impresión en línea, fuera de línea, la tarjeta de visita sigue siendo un uso principal para el enfoque "He aquí cómo puede ponerse en contacto conmigo". Hay muchos diseños de tarjetas de visita muy interesantes, pero si alguna vez se ha preguntado qué aspecto tenían las tarjetas de presentación de leyendas tecnológicas como Bill Gates y Steve Wozniak, tenemos una compilación para usted.A continua

(Consejos de tecnología y diseño)

16 palabras modernas con los orígenes más extraños

¿Te has preguntado alguna vez sobre el origen de algunas palabras modernas que lees en Internet o te usas con frecuencia? Sé lo que hago. Ahora adelante, llámeme un 'nerd de palabras', pero así es como sé muchas cosas interesantes, como el hecho de que muchas palabras que usamos hoy pensando que son del siglo XXI, de hecho se originaron bastante Hace un tiempo en el más extraño de los lugares .Básica

(Consejos de tecnología y diseño)