Bordes giratorios: caminitos de hormigas 14.12.14
Varias demos para lograr que los cuatro bordes de un elemento giren de forma acompasada. Puro Css y con sólo un elemento.
Bordes giratorios: caminitos de hormigas
Sigamos jugando con bordes. En esta ocasión una demo en la que los segmentos de los cuatro bordes van desplazándose alrededor del elemento.
En esta ocasión, como estamos jugando con un único elemento y los bordes no son suceptibles de desplazar (animar) a lo largo de su lado hay que recurrir a simularlos. Lo que ves no son realmente bordes.
Los falsos bordes están construidos realmente con fondos aprovechando que algunas de las propiedades del grupo background admiten múltiples valores y animaciones se consigue el efecto visual que puedes ver en el siguiente pen.
La ventaja de usar fondos para "crear" los bordes es que podemos dimensionarlos y colocarlos para que el resto de la caja permita ver lo que hay debajo de ella.
See the Pen Caminito de hormigas by Kseso (@Kseso) on CodePen.
Si echas un vistazo al Css de la demo verás que todo recae el las siguientes propiedades del grupo background
- background-image
- Los trazos están hechos con el valor
linear-gradient(). Uno para cada borde - background-size
- Sólo son necesarios 2 valores para dimensionar los cuatro fondos ya que su valor conforma un ciclo que aplica a los cuatro al repetirse.
- background-repeat
- Al igual que con el tamaño de cada fondo con dos valores se logra cubrir todo el lateral.
Como verás falta una declaración vital para que cada fondo aparente ser un borde. Con las propiedades anteriores tendríamos los cuatro colocados en el mismo punto y sobrepuestos 2 a 2: esquina superior izquierda.
Este último detalle lo añadimos en la animación correspondiente para que, además de mostrarse cada fondo como si fuese un borde distinto, se desplacen.
@keyframes caminito {
0% {
background-position:
0 0,
100% 0,
100% 100%,
0% 100%;
}
100% {
background-position:
100% 0,
100% 500%,
0% 100%,
0% -500%;
}
}
En este caso ubicamos cada fondo en su lugar correspondiente para poderlos cambiar de una keyframe
a otra de forma independiente y así lograr que cada uno de ellos se "desplace" en un sentido diferente.
El resto del Css es sólo para que la demo luzca un poco mejor.
Versión modificada
Una versión ligéramente modificada de la anterior sería conformar los bordes con un pseudoelemento que sobresalga por los cuatro costados el valor que nos interese.
See the Pen Caminito de hormigas II by Kseso (@Kseso) on CodePen.
Sí. También es un fondo formado por un gradiente Css. En este caso uno sólo en ángulo de 45 grados: linear-gradient(45deg,...). Por lo tanto debemos evitar que cubra toda la caja padre. Para ello tapamos la parte que no interesa mostrar con el otro pseudoelemento con un fondo del mismo color que su padre.
Esto tiene un inconveniente: si se usa sobreponiéndolo a una imagen complicaría su uso.
El pen de inspiración y que necesita de un excesivo marcado Html
que lo hace en la práctica (buena) prácticamente inviable es el siguiente:
See the Pen Rotating border by Prakash (@imprakash) on CodePen.
Versión "clip" animada
COn posterioridad a la publicación de este artículo, vi en codepen esta nueva versión realizada en base a la propiedad clip obra del usuario Rplus. Haz :hover sobre el elemento para ver qué ocurre realmente ;-)
See the Pen dopVmQ by Kseso (@Kseso) on CodePen.
En el pen original su autor usa la propiedad box-shadow para crear el borde. Yo en este fork la sustituí por un borde por si quieres cambiar su forma continua por otra punteada: dashed o dotted.
De la Olvidoteca
Si te han gustado estas demos posíblemente quieras echar un vistazo a estos artículos publicado hace unas fechas que también tienen como protagonistas a los bordes:
Dibujado progresivo del contorno puro Css
Si no viste esa demo estoy seguro que te has perdido un efectivo, vistoso y utilizable efecto para los :hover
Los efectos de estos artículos puedes intentar aplicarlos a los bordes tan "especiales" y vistosos como los que construía en el artículo
Bordes especiales con un único elemento en puro Css
Siete ejemplos de bordes originales que seguro te servirán de inspiración para lograr otros igual o más de llamativos.
La imagen del inicio del artículo es la interpretación de M.C. Escher de la Cinta de Moebius
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso
Realmente maravilloso, gracias por la info
ResponderEliminarexcelnte!!!!!!!! gracias!!!!
ResponderEliminar