Un pequeño tip para lograr un efecto de subrayado animado con css y Oxygen al pasar el cursor del mouse por encima de un botón o por encima de cualquier elemento.
Pasa el puntero del ratón por encima de los diferentes elementos.
Se crea el elemento, el que sea o que se necesite, no es necesario que sea un botón, cualquier elemento puede servir, ya que todos los elementos de una página reciben el evento hover. Lo único que hay que tener en cuenta es que hay darle una posición relativa. (Layout ⇒ Position ⇒ Relative)
Nos vamos a la pseudo clase :before
Se establecen las propiedades de la siguiente manera:
Con el elemento seleccionado añadimos un nuevo estado.(Ver Imágenes)
Se le da el nombre :hover::before
En Efects -> Transform -> Scale -> >Scale X : 1
Con todo esto lo que tenemos es el efecto del subrayado que se expande desde el centro hacia los extremos en las dos direcciones, para conseguir el desplazamiento desde un extremo hacia el otro extremo, el cuadro de CSS del elemento, con el pseudoelemento :before seleccionado, añadimos:
Para el movimiento desde izquierda: transform-origin: top left;
Para el movimiento desde la derecha: transform-origin: top right;
Aquí abajo el ejemplo del desplazamiento desde la izquierda.
Como siempre esperamos tus comentarios y por supuesto si tienes alguna duda o necesitas ayuda puedes contactar por nuestro grupo de Telegram o dejando un comentario.
Nos vemos en la próxima. 👌
El diseño fluido se refiere a un enfoque de diseño web en el que las dimensiones de los elementos son flexibles, escalando proporcionalmente al tamaño de la pantalla del usuario.
En lugar de medidas fijas de píxeles, utiliza unidades relativas como porcentajes o ems para garantizar que el diseño se ajuste sin problemas, independientemente del dispositivo.
Mostramos como añadir más iconos sin la necesidad de añadir más sets de SVGs, usando la fuente denominada "vanilla" y con la particularidad de que vamos a poder usarlos de manera global en todo nuestro sitio o solo en aquellas páginas o entradas en las que sea necesario.
La diferencia entre usarlos de manera global en todo el sitio o solo en aquellas páginas está en que en la primera manera cargaremos los kb de la fuente, en este caso 79Kb de manera innecesaria en aquellas páginas o entradas donde no requiramos el uso de estos iconos.
Un pequeño tip para lograr un efecto de subrayado animado con css y Oxygen
Gracias por la contribucion. Es interesante notar que en el pseudoelemento tenemos que poner width: 100%
Hola Doris, no necesariamente tienes que poner el width al 100%, se menciona así como ejemplo, pero puedes darle cualquier medida según las necesidades del diseño al igual que cualquier elemento.
Un saludo.