Los bordes decorados pueden adornar cualquier elemento de una página, pero están bastante limitados por estilo. Los desarrolladores frecuentemente prueban soluciones como bordes con CSS-gradient, bordes SVG, multiples bordes y demás para imitar y mejorar el aspecto de los bordes de un elemento y sus animaciones.
Hoy vamos a ver un sencillo truco para bordes discontinuos: animación de bordes discontinuos. Los bordes discontinuos animados los crearemos mediante el uso de outline y box-shadow, dejando atrás complicadas prácticas, ya que outline es soportado de IE8 en adelante. De esta manera el usuario podrá ver los bordes a diferencia de cuando se utiliza un SVG o un degradado. Con esto también puedes crear bordes discontinuos bicolores. Echémosle un vistazo...
Creando los bordes
Primero vamos a crear los bordes. Para ello, vamos a utilizar un borde discontinuo y un box-shadow.
.banners{
outline: 6px dashed yellow;
box-shadow: 0 0 0 6px #EA3556;
...
}
El outline necesita todos sus valores, es decir: ancho, tipo y color. El box-shadow solo necesita el valor de la extensión, que deberá ser el mismo que el ancho del outline y su color. Ambos, el outline y el box-shadow juntos crearemos el efecto de la línea discontinua bicolor.
Puedes ajustar el ancho y alto de la caja para que se ven bien las esquinas según tus necesidades.
Animando los bordes
Para nuesta primera animación de ejemplo, añadiremos animaciones CSS keyframe para un conjunto de banners con los bordes animados continuamente, para captar mejor la atención del visitante. Para el efecto de animación, simplemente intercambieremos los colores del outline y el box shadow.
@keyframes animateBorder {
to {
outline-color: #EA3556;
box-shadow: 0 0 0 6px yellow;
}
}
Puedes establecer el color del outline utilizando la propiedad outline-color, sin embargo para la sombra de la caja tendrás que volver a establecer todos los valores de nuevo a la propiedad por ahora.
Una vez que la animación está acabada, añade esto a la caja.
.banners{
outline: 6px dashed yellow;
box-shadow: 0 0 0 6px #EA3556;
animation: 1s animateBorder infinite;
...
}
Transición en los bordes
Para el ejemplo de transición añadiremos bordes a las imagenes y las animaremos al hacer hover. También puedes cambiar el tamaño del borde para conseguir efectos diferentes.
.photos{
outline: 20px dashed #006DB5;
box-shadow: 0px 0px 0px 20px #3CFDD3;
transition: all 1s;
...
}
.photos:hover{
outline-color: #3CFDD3;
box-shadow: 0 0 0 20px #006DB5;
}
Ahora, pasa el ratón por encima de estas imagenes para comprobar como se animan los bordes de estas imágenes. No me digas que no está chulo...
Puedes probar a reemplazar los bordes discontinuos por bordes punteados, pero el efecto seguro que no queda tan bien como el que hemos aprendido hoy. También puedes probar a cambiar el tipo de outline durante la animación para unos cuantos efectos distintos más.
Y este ha sido el artículo en el que trataba explicaros cómo animar bordes discontinuos con CSS, esperamos que te haya gustado y sepas aplicarlo en tus futuros proyectos. Ya sabes que si nos quieres proponer un tema que quieres ver reflejado como un tutorial o como una práctica, solo tienes que hacer uso del área de comentarios de un poco más abajo. Por el contrario, si quieres enviarnos tus propios tutoriales, puedes hacerlo a través de la intranet de usuarios que está habilitada para ello, a través del menú Enviar Tutorial. Ya sabes, ayúdanos a crecer con tus conocimientos. ¡Un saludo y feliz código!