Hoy vamos a divertirnos bien al recrear el animado cuadro de interrogación de Mario Bros. con CSS3 puro.
A lo largo del camino, aprenderá a usar varias tecnologías geniales de CSS3, como esquinas redondeadas, sombras de cuadros y texto, y animaciones de fotogramas clave que funcionan tanto en Safari como en Firefox. ¡Vamos a saltar!
Vistazo
He aquí un vistazo rápido a lo que vamos a construir hoy. En realidad, creo que está demasiado ocupado como para usarlo en un sitio (puede que solo te duelen los ojos), ¡pero definitivamente es divertido construirlo!
Manifestación: Haga clic aquí para lanzar la demo
Descargar: Haga click aquí para descargar
¿Porque en la tierra?
Para empezar, me gustaría dejar claro que este artículo describe un proyecto puramente experimental destinado únicamente a fines educativos. El producto final debería degradarse con cierta gracia en otros navegadores, pero las animaciones realmente solo funcionarán correctamente en los navegadores Webkit, así como en Firefox 5 (que ahora admite animaciones de fotogramas clave).
Entonces, si no está listo para usar, ¿por qué me molesté con el artículo? En primer lugar, realizar experimentos como este es una forma increíble de desarrollar tus habilidades de solución de problemas de CSS: siempre te encuentras con varios problemas inesperados y tienes que resolverlos. Además, es de esperar que un día en el futuro las animaciones de fotogramas clave de CSS sean algo que sean compatibles con todos los navegadores principales y definitivamente será útil tener una idea de algunas técnicas de implementación diferentes.
Sin embargo, en última instancia, todo esto es solo mi intento de justificar el hecho de que soy un nerd de Nintendo que vio a un Mario animado el otro día e instantáneamente quería construirlo en CSS. Como nota al margen, una manera fácil de hacer que esta técnica sea más accesible para todos los navegadores es simplemente deshacerse de la animación CSS y usar jQuery en su lugar.
Comenzando: El HTML
Lo primero que queremos hacer es delinear algunos HTML básicos para un bloque. Dado que el bloque es posiblemente algo que queremos usar repetidamente, usaremos un par de clases. De esa manera, solo podemos copiar y pegar bloques de código y CSS se hará cargo de forma automática.
Primero, cree un contenedor, esto mantendrá todos los bloques cuando finalmente creemos más. Siguiente gota en un div contenedor que contiene una etiqueta de párrafo. Esta estructura parece un poco redundante en este momento pero, como agregaremos más adelante, tendrá sentido.
Tenga en cuenta que envolví toda mi etiqueta de párrafo en un enlace, que es aceptable en HTML5. Hice esto porque el texto mismo entrará y saldrá de la vista y usted desea que se pueda hacer clic en el enlace todo el tiempo, no solo cuando el texto está visible. Una vez más, esto tendrá más sentido después.
Iniciando CSS
A continuación, queremos crear el estilo básico para nuestro bloque de Mario. Hay tres partes distintas que necesitaremos manejar, que se describen a continuación.
Dimensiones
Lo primero que debemos hacer es simplemente establecer una altura y un ancho. Esto es bastante arbitrario, siempre que crees un cuadrado, eres bueno. Puse el mío a 150px para el ancho y la altura. También asegúrese de configurar su desbordamiento en? Oculto? para la animación.
Estilo de caja
A continuación, queremos que nuestra caja se vea como el bloque de signo de interrogación de un juego de Mario. Hay varias versiones, así que para todos ustedes, devotos fanáticos, estaremos basando la nuestra. aproximadamente en el de Super Mario Bros 3.
En el código de abajo, configuro mi color, borde, radio de borde y sombra interior para darle profundidad al bloque.
Estilo de texto
El último paso es diseñar nuestro signo de interrogación. Haz que el color sea blanco, alinee el centro del texto, dale una sombra dura y establece la fuente como prefieras. Me costó mucho encontrar una fuente que pareciera apropiada pero la fuente web de Google, Geostar Fill, se acerca.
Avance
En este punto, nuestro bloque de Mario se ve bastante bien! Todo lo que queda ahora es traerlo a la vida.
Animando el Bloque
Ahora que tenemos nuestro bloque muy bonito y con estilo, es hora de animar ese pequeño signo de interrogación. Ahora, si configuramos la animación para usar márgenes en nuestro párrafo, todo el bloque se moverá, lo cual no es lo que queremos. Así que en lugar de eso usamos? Texto-sangría? Como base de nuestra animación, que solo afectará al signo de interrogación.
Como queremos que la animación se repita, no podemos usar una transición de CSS antigua y sencillamente tenemos que confiar en una animación de fotogramas clave. La sintaxis de Webkit y Mozilla es idéntica, aparte de los prefijos. Primero, nombra tu animación (¿llamé mía? ¿Mariomación?) A continuación, defina el estado de la animación en los distintos puntos. Solo necesitamos dos marcos, uno para comenzar y otro para finalizar, el navegador llenará los espacios vacíos.Al dar una sangría negativa para comenzar y una sangría positiva para terminar, efectivamente haremos que el signo de interrogación se desplace de izquierda a derecha.
Para activar la animación, primero creamos un selector para apuntar a lo que queremos aplicar, en este caso? P.block? hace el trabajo. Luego recordamos el nombre de la animación y definimos los parámetros: duración, conteo y función de tiempo.
¡Con eso, tu bloque debería estar animando perfectamente! Si eso es todo lo que quería lograr, no dude en detenerse aquí. Continuaré un poco más y agregaré algunas funciones similares a la navegación.
Creación del menú de navegación: HTML
Como utilizamos clases en lugar de ID, podemos repetir fácilmente nuestro bloque con solo copiar y pegar. Esta vez, creé cuatro bloques y agregué una sugerencia de herramienta adicional que haremos aparecer en el hover.
Menú de navegación CSS
Para hacer que todo parezca que queremos, hay varios pasos, cada uno se muestra en el CSS a continuación. Lo primero que hice fue aplicar ancho y márgenes a mi contenedor, esto fue simplemente para centrarlo en la página y es un paso opcional.
Lo más importante en el siguiente paso es flotar el? BlockWrapper? clase a la izquierda. Esto hará que tus bloques de Mario aparezcan uno al lado del otro en lugar de apilarlos verticalmente.
Por último, coloqué cada fragmento de texto de información sobre herramientas sobre su bloque respectivo y establecí la opacidad en cero. Luego, con una transición CSS, hago que el texto aparezca mientras se desplaza sobre el bloque.
Con eso, todos hemos terminado! Ahora deberías tener cuatro bloques animados uno al lado del otro.
Producto final
Manifestación: Haga clic aquí para lanzar la demo
Descargar: Haga click aquí para descargar
Conclusión
Con esto concluye nuestro tutorial sobre la creación de un bloque animado de Mario con CSS puro. ¡Espero que te hayas divertido tanto construyéndolo como yo!
Si piensa en alguna mejora o se encuentra utilizando esto de alguna manera, deje un comentario a continuación y lo verificaré.