WORDPRESS

Tarjeta efecto gota de agua en elementor, wordpress 160, tutorial o curso español

En SYSPA SOCIAL veremos como crear una tarjeta con efecto gota de agua en elementor para tu pagina web wordpress.

Este efecto increible simulara una gota hermosa de agua, pero no se queda ahi, cuando pasemos nuestro cursor por sobre la tarjeta, esa gota tomará otra forma para indicar que esta seleccionada.

Para esto, el efecto no solo contempla la gota de la tartaja, sino también la gota del titulo, la cual también se ve modificada por el cursor.

Simplemente un tutorial imperdible, que llevará a tu pagina web a otro nivel, es rápido y fácil, así que no hay excusas, debes realizarlo!.

Principales puntos del tutorial tarjeta efecto gota de agua en elementor para wordpress.

  • Explicamos lo que realizaremos,
  • Amamos la base de nuestra pagina.
  • Creamos el código requerido.
  • Ajustamos los parámetros necesarios.
  • Probamos todo lo realizado.

Videos relacionados con tarjeta efecto gota en elementor para wordpress.

🖐️ Como usar contenedores (flex container) en elementor, wordpress 143, tutorial español.

Aprenderemos todo sobre el uso de los nuevos contenedores (flex container) de elementor para desarrollar tu pagina web wordpress.

1024PX wp 143 elementor contenedores wordpress syspa social V1

🖐️ Efectos y animaciones elementor MAS DE 2 hs, wordpress 138 tutorial español.

En este video de elementor les dejo mas de 2 hs de animaciones y efectos que serán geniales para tu pagina web wordpress. wordpress.

1024px WP 138 WEBP efectos y animaciones elementor 2 horas wordpress syspa v1

🖐️ Mejor hosting wordpress, análisis completo, SLL y DOMINIO GRATIS, WordPress 35, tutorial español.

Analizamos paso a paso, todos los detalles del hostin sered, que nos brindara un 10% de descuento, ssl y dominio gratis.

1024px WP 35 mejor hosting wordpress sered - syspa

Principales puntos del tutorial modelo pagina web wordpress.

🖐️ Como hacer tu pagina web con elementor, WordPress 48, tutorial o curso español.
Agregaremos un chat de whatsapp a tu pagina web wordpress de manera simple y gratis.

1024px WP 48 elementor paso a paso - wordpress - syspa social v1 OPT

Código Utilizado

CSS efecto gota de agua para elementor free (tanto con sectores como con containes)

<style> .tarjetagotaagua{ --card-shape: 48% 52% 58% 52% / 48% 25% 75% 62%; --card-hover-shape: 50%; --heading-shape: 50%; --heading-hover-shape: 61% 39% 38% 62% / 67% 49% 51% 33%; --heading-background: #eff0f4; --heading-circle-size: 80px; --bubble-color: #ffffff; } .tarjetagotaagua{ box-shadow: inset 20px 20px 20px rgba(0,0,0,0.05), 25px 35px 20px rgba(0,0,0,0.05), 25px 30px 30px rgba(0,0,0,0.05), inset -20px -20px 25px rgba(255,255,255,0.9); transition: 0.5s ease-in-out; border-radius: var(--card-shape); } .tarjetagotaagua:hover{ border-radius: var(--card-hover-shape); } .tarjetagotaagua::before{ content: ''; position: absolute; top: 50px; left: 85px; width: 35px; height: 35px; background: var(--bubble-color); border-radius: 50%; opacity: 0.9; } .tarjetagotaagua::after{ content: ''; position: absolute; top: 90px; left: 110px; width: 15px; height: 15px; background: var(--bubble-color); border-radius: 50%; opacity: 0.9; } .tarjetagotaagua h2{ position: relative; width: var(--heading-circle-size); height: var(--heading-circle-size); background: var(--heading-background); border-radius: var(--heading-shape); /*para sectores*/ display: inline-block; height:100%; /*para contenedores*/ /* display: flex; justify-content: center; align-items: center; */ transition: 0.5s ease-in-out; box-shadow: inset 2px 5px 10px rgba(0,0,0,0.1), inset -2px -5px 10px rgba(255,255,255,1), 15px 15px 10px rgba(0,0,0,0.05), 15px 10px 15px rgba(0,0,0,0.025); } .tarjetagotaagua:hover h2{ border-radius: var(--heading-hover-shape); } </style>

CSS efecto gota de agua para elementor Pro (tanto con sectores como con containes).

selector{
–card-shape: 48% 52% 58% 52% / 48% 25% 75% 62%;
–card-hover-shape: 50%;
–heading-shape: 50%;
–heading-hover-shape: 61% 39% 38% 62% / 67% 49% 51% 33%;
–heading-background: #eff0f4;
–heading-circle-size: 80px;
–bubble-color: #ffffff;
}
selector{
box-shadow: inset 20px 20px 20px rgba(0,0,0,0.05), 25px 35px 20px rgba(0,0,0,0.05), 25px 30px 30px rgba(0,0,0,0.05), inset -20px -20px 25px rgba(255,255,255,0.9);
transition: 0.5s ease-in-out;
border-radius: var(–card-shape);
}
selector:hover{
border-radius: var(–card-hover-shape);
}
selector::before{
content: ”;
position: absolute;
top: 50px;
left: 85px;
width: 35px;
height: 35px;
background: var(–bubble-color);
border-radius: 50%;
opacity: 0.9;
}
selector::after{
content: ”;
position: absolute;
top: 90px;
left: 110px;
width: 15px;
height: 15px;
background: var(–bubble-color);
border-radius: 50%;
opacity: 0.9;
}
selector h2{
position: relative;
width: var(–heading-circle-size);
height: var(–heading-circle-size);
background: var(–heading-background);
border-radius: var(–heading-shape);

/*para sectores*/
display: inline-block;
height:100%;

/*para contenedores*/
/*
display: flex;
justify-content: center;
align-items: center;
*/

transition: 0.5s ease-in-out;
box-shadow: inset 2px 5px 10px rgba(0,0,0,0.1), inset -2px -5px 10px rgba(255,255,255,1), 15px 15px 10px rgba(0,0,0,0.05), 15px 10px 15px rgba(0,0,0,0.025);
}
selector:hover h2{
border-radius: var(–heading-hover-shape);
}

suscribete syspa

Tenemos Cientos de tutoriales Wordrpess

Inicia aquí gratis !

Accede al listado completo de tutoriales wordpress.

Tutoriales WordPress