CSS avanzado: pantallas de bienvenida y botones

(música brillante) Bienvenido de nuevo al curso de Ciudad del Conocimiento en hojas de estilo en cascada. Soy Cliff Brozo. Y en esta lección, veremos algo llamado pantalla de bienvenida. Ahora puede ver que el resto de nuestra lección cuatro está en blanco. Vamos a llegar a eso en un momento pero echemos un vistazo a lo que implica la creación una pantalla de bienvenida. Al observar a Adam y nuestra plataforma de desarrollo, tenemos un documento HTML básico que tiene la información general arriba apuntando a un archivo splash.css, y tenemos dos contenedores, uno se llama contenedor, uno se llama contenido, y esos dos manejarán el camino el texto aparece en la pantalla. Como se puede ver, todo nuestro texto se establece en un encabezado H2 de dos tamaños, y para cada uno de estos elementos, he aplicado una clase, por separado, bueno, las llamo reglas para saber cómo se mostrará cada línea de este texto, y básicamente, lo que tenemos aquí son las instrucciones para saber cómo jugar. Necesitamos darle al usuario algún tipo de conocimiento al entrar para que sepan qué hacer. Entonces tengo 11 reglas diferentes. Bueno, el último no es exactamente una regla. El último en realidad apunta al comienzo del juego, y cada regla explica una parte diferente de cómo se juega el juego. Echemos un vistazo al CSS y nos vamos a concentrar en mirar todos los diferentes números de reglas. En nuestro CSS, comenzando en la línea 10, puedes ver que tengo mi contenedor, que pone una posición fija y configura todo de modo que esté en la esquina superior izquierda. Estoy usando el 100% del ancho y alto de la pantalla, y este contenedor va hasta el fondo, y lo que estoy haciendo aquí es que estoy creando un fondo degradado de radio, y de nuevo, esto me está permitiendo, en lugar de tener un solo color, Quiero un poco de color venir desde el medio hacia los bordes, y verás como se ve eso, así que en lugar de un fondo azul claro, vamos a tener un medio blanco suave y creciendo hacia afuera y difuminando a medida que avanza hacia afuera. La porción de contenido tiene lo mismo excepto por el índice Z que cambia, y lo que hace es ponerlo en un número muy alto, 1000 debería ser suficiente, y eso asegura que el contenido que se muestra va a ir encima de lo que esté en el contenedor, que es el fondo. Mis reglas para H2 comienzan en la línea 30 y configuro el tamaño de fuente general a cinco veces el ancho de la vista, y quiero asegurarme de que llene la pantalla. Centro el texto. Transformo cualquier cosa a mayúsculas. Hago el color transparente y creo una animación llamada desenfoque de aparición y desaparición gradual. Esa animación durará tres segundos, y cada uno de estos H2 tendrá estos atributos que se les atribuyen, y es por eso que creé ese contenedor especial para eso. Luego voy a configurar cada regla individualmente y creo un tamaño de fuente diferente para cada una de las reglas, y el motivo de los diferentes tamaños de fuente, Empiezo con siete aquí, baje a cinco, eso dependerá de la cantidad de texto que vaya a mostrar. Las reglas más cortas tendrán una fuente más grande, y cuantas más palabras haya en la regla tendrá una fuente un poco más pequeña para asegurarse de que encajen en la pantalla. La clave aquí es el retraso de la animación, y lo que estoy tratando de lograr se configura una serie de segundos de cuándo deberían aparecer estas cosas. Entonces, al principio, lo que sucede es que la regla uno comienza en cero segundos. No hay retraso de animación. Cuando esto comienza, aparece la primera regla. Esa regla dice que esta es la Ciudad del Conocimiento. Esa es la regla número uno. Entonces eso aparecerá en la pantalla de inmediato. Entonces permanecerá allí durante cinco segundos. porque la regla número dos tiene un retraso de cinco segundos para que el usuario tenga la oportunidad de leer las reglas. Ahora cada uno de estos retrasos de animación tendrá una cantidad diferente de segundos para esperar para que el usuario tenga tiempo de leer cuál es la regla, y cuantas más palabras haya en la regla, cuanto más larga sea la animación, normalmente, 10 segundos es suficiente, y como puede ver, muchos de ellos son de 10 segundos. La regla número tres es nueve. Cuando lleguemos a la regla número nueve aquí en la línea 79, son 15 segundos, y eso es mucho texto, y queremos darle una oportunidad al usuario para leer todo el texto que está ahí. La regla número nueve, como resulta, no aparece hasta el minuto 10 al comienzo de esta pantalla, y puede ver que el retraso es de 70 segundos. Así que esta es una forma de codificar todas las reglas pantalla por pantalla, pero solo usando una pantalla usando CSS.