Dibujado progresivo del contorno puro Css 7.12.14
Dibujando contornos de los elementos de forma animada y progresiva con un solo trazo en puro Css.
Dibujado progresivo del contorno puro Css
Hay un efecto que de un tiempo a esta parte se está viendo bastante es el dibujado de los contornos de los elementos de forma progresiva. Esto es, que el borde se vaya dibujando hasta completar todo el perímetro del elemento.
Normalmente se recurre a otros lenguajes o técnicas, como javaescript o incluso SVG con sus animaciones nativas
.
Pero con un poco de imaginación también es posible lograrlo aplicando sólo un poco de estilos. Algunas declaraciones y algo de animación es todo lo que se necesita para que, por ejemplo, al hacer :hover sobre los enlaces se pinte su contorno secuencialmente.
Tal como puedes observar en el siguiente pen con lo que ocurre al hacer :hover sobre los enlaces:
See the Pen Dibujado progresivo del contorno by Kseso (@Kseso) on CodePen.
Si echas un vistazo a los estilos verás que todo se reduce a aumentar la anchura y altura de los dos pseudoelementos del enlace con un par de animaciones Css. Y para mantener la ilusión de que es un sólo trazo, una animación tiene un pequeño retraso respecto a la otra.
Esa es la explicación corta para quien no quiera seguir leyendo. Sin embargo, si necesitas algún detalle más, vamos con lo más relevante de la demo.
a {
text-decoration: none;
display: inline-block;
color: #d00;
padding: 0 2px;
}
Inicialmente al enlace lo declaramos como elemento inline-block para poder añadirle por estética un pequeño padding
lateral y evitar un feo efecto en caso de repartirse el enlace en dos líneas o más.
A continuación nos metemos en harina y definimos ambos pseudoelementos del enlace, que serán realmente los que dibujen el perímetro. El borde superior y derecho de ::before y el inferior e izquierdo de ::after
a::before, a::after {
content: '';
position: absolute;
opacity: 0;
animation: 0 none;
}
a::before {
top: 0;
left:0;
border-top: 2px solid;
border-right: 2px solid;
}
a::after {
bottom: 0px;
right:0;
border-bottom: 2px solid;
border-left: 2px solid;
}
Ambos pseudoelementos están posicionados, el primero en la esquina superior izquierda y el segundo en la inferior derecha. La declaración opacity: 0; es para evitar que pese a que su tamaño es cero se vean los dos pequeños puntos correspondientes a los bordes.
Lo siguiente es pasar de forma animada de un tamaño cero de los pseudoelemetos al 100% del tamaño del enlace al :hover. De eso se encargan un par de animaciones que definiremos posteriormente.
a:hover::before,
a:focus::before {
animation: .7s antes linear forwards;
}
a:hover::after,
a:focus::after {
animation: .7s despues linear forwards .7s;
}
Fíjate que la animación correspondiente al ::after tiene el mismo retraso que el tiempo que toma para realizarse la del ::before para lograr el dibujado continuo de ambos.
Las animaciones son sencillas: hay que pasar de una anchura de cero al 100% para que se dibuje el borde horizontal y una vez terminado aumentar la altura de cero a 100% para que se cree el borde vertical.
@keyframes antes {
0% {
opacity: 1;
top: -2px;
left: 0;
width:0;
width: 0;
}
80% {
top: -2px;
left: 0;
width: 100%;
height: 0;
}
100% {
top: -2px;
left: 0;
width: 100%;
height: 100%;
opacity: 1;
}
}
@keyframes despues {
0% {
opacity: 1;
bottom: 0;
right: 0;
height: 0;
width: 0;
}
80% {
bottom: 0;
right: 0;
width: 100%;
height: 0;
}
100% {
bottom: 0;
right: 0;
width: 100%;
height: 100%;
opacity: 1;
}
}
El crear el keyframe
al 80% es debido a que normalmente el enlace será bastante más largo que ancho. Pero es un valor un poco al azar, pues no hay una relación entre sus medidas (aspect ratio
) fija para todos ellos.
La declaración top: -2px; en la animación antes
es para que coincidan los bordes de los dos pseudoelementos.
Y eso es prácticamente todo. Sólo he añadido otra pequeña animación al enlace para que cuando sale el cursor de él parpadeé un poco y hacer menos brusca la desaparición de los bordes.
Pero también se pueden crear las animaciones correspondientes para que se desdibujen los bordes. Como es sencillo de lograr te lo dejo a tí.
Una variante un poco más sencilla de esta demo es el siguiente pen
See the Pen ZYQBrK by Kseso (@Kseso) on CodePen.
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