En este proyecto, deberás crear una información sobre herramientas que aparezca sobre los elementos de navegación al pasar el cursor sobre ellos, utilizando únicamente HTML y CSS. Una información sobre herramientas es un pequeño cuadro emergente que proporciona información adicional sobre un elemento de navegación al pasar el cursor sobre él. Este proyecto se centrará en dominar el posicionamiento CSS, los efectos al pasar el cursor sobre él y la creación de información sobre herramientas visualmente atractivas sin depender de JavaScript.
El objetivo de este proyecto es ayudarte a comprender cómo usar CSS para crear efectos dinámicos de interfaz de usuario. Aprenderás a posicionar elementos entre sí, crear transiciones fluidas y hacer que tu navegación sea más interactiva e intuitiva. A continuación, se muestra un boceto de la información sobre herramientas que aparece sobre un elemento de navegación.
Puntos extra por diferentes animaciones para la descripción emergente, como efectos de fundido, deslizamiento o escalado.Después de completar este proyecto, comprenderás mejor el posicionamiento CSS, los efectos al pasar el cursor y la creación de elementos de interfaz de usuario interactivos sin JavaScript.
Note
Este proyecto es obtenido de la página de roadmap.sh
Usuario | Repositorio | Website | Figma |
---|---|---|---|
mendodevv | Solución | Codepen | Prototype |
elexdero | solución | codepen | figma |
untalbry | Solución | Codepen | Prototype |
educast21 | Solución | Codepen | Prototype |
EGAMAGZ | Solución | Codepen | Prototype |
Uchueee | Solución | CodePen | No hay |
CristopherA | Solución | CodePen | No tengo |
Gomen | Solución | CodePen | Prototype |
Cruz | Solución | CodePen | Prototype |
Luis Angel | Solución | CodePen | Prototype |