WORDPRESS
Borde animado tarjeta elementor free (truco, Tips and Tricks) wordpress 125 tutorial español
En este tutorial de SYSPA SOCIAL aprenderemos como generar un borde animado en tus tarjetas utilizando elementor free o gratis, este es un truco increíble (tips and tricks) para tu pagina web wordpress.
Siguiendo con la cadena de tutoriales dondes estamos explotando al maximo las posibilidades que nos da CSS y en especial con el truco de utilizarlo sin necesidad de contar con la versión PRO de elementor (utilizando elementor free únicamente), vamos a ver como hacer este efecto increíble de animación en los bordes de las tarjetas.
Con muy pocos pasos y un sencillo CSS podrás lograr un efecto que realmente profesionalizara tu pagina web.
No dudes en realizarlo, te aseguro que no te arrepentirás.
Principales puntos del tutorial borde animado en tarjetas utilizando elementor free en wordpress.
Código Utilizado en borde animado en tarjetas utilizando elementor free en wordpress.
Color de fondo
#0d132d
Selector de contenido
<style>
:root{
--first-color: #ef32d9;
--second-color: #89fffd;
--size: 100px;
--speed: 4s;
}
.bordeanimado{
overflow: hidden !important;
display: flex;
justify-content: center;
align-items: center;
}
.bordeanimado:before{
content: '';
position: absolute;
width: var(--size);
height: 140%;
background: linear-gradient(var(--first-color), var(--second-color));
animation: animate var(--speed) linear infinite;
}
@keyframes animate{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
</style>
Tenemos Cientos de tutoriales Wordrpess
Inicia aquí gratis !
Accede al listado completo de tutoriales wordpress.