(música animada) Bem-vindo de volta ao curso da Knowledge City em folhas de estilo em cascata. Sou o Cliff Brozo. E nesta lição, vamos dar uma olhada em algo chamado tela inicial. Agora você pode ver que o resto da nossa lição quatro está em branco. Vamos chegar a isso em breve, mas vamos dar uma olhada no que se passa na criação uma tela inicial. Ao olhar para Adam e nossa plataforma de desenvolvimento, nós temos um documento HTML básico que tem as informações gerais apontando para cima para um arquivo splash.css, e temos dois wrappers, um é chamado de contêiner, outro é chamado de conteúdo, e esses dois vão cuidar do caminho o texto aparece na tela. Como você pode ver, todo o nosso texto é definido como um cabeçalho H2 de dois tamanhos, e para cada um desses itens, apliquei uma classe, um separado, bem, estou chamando-os de regras para saber como cada linha deste texto será exibida, e basicamente, o que temos aqui são as instruções para saber como jogar. Precisamos dar ao usuário algum tipo de conhecimento entrando para que eles saibam o que fazer. Portanto, tenho 11 regras diferentes. Bem, o último não é exatamente uma regra. O último realmente aponta para o início do jogo, e cada regra explica uma parte diferente de como o jogo é jogado. Vamos dar uma olhada no CSS e vamos nos concentrar em olhar para todos os diferentes números de regra. Em nosso CSS, começando na linha 10, você pode ver que eu tenho meu contêiner, que coloca uma posição fixa e configura tudo para que fique no canto superior esquerdo. Estou usando 100% da largura e altura da tela, e este contêiner fica em segundo plano, e o que estou fazendo aqui é criar um fundo gradiente de rádio, e, novamente, isso está me permitindo, em vez de ter uma cor simples, Eu quero um pouco de cor para vir do meio para as bordas, e você verá como fica, então, em vez de um fundo azul simples, vamos ter um meio branco macio e crescendo para fora e desfocando conforme vai para fora. A parte do conteúdo tem a mesma coisa exceto para o índice Z que muda, e o que isso faz é configurá-lo para um número muito alto, 1.000 devem ser suficientes, e isso garante que o conteúdo exibido vai para cima de tudo o que está no contêiner, qual é o fundo. Minhas regras para H2 começam na linha 30 e eu defino o tamanho geral da fonte a cinco vezes a largura da vista, e quero ter certeza de que preenche a tela. Eu centralizo o texto. Eu transformo qualquer coisa em maiúsculas. Eu deixo a cor transparente e eu crio uma animação chamada blur in e fade out. Essa animação terá três segundos de duração, e cada um desses H2s terá esses atributos ligados a eles, e é por isso que criei aquele contêiner especial para isso. Em seguida, configuro cada regra individualmente e eu crio um tamanho de fonte diferente para cada uma das regras, e o motivo dos diferentes tamanhos de fonte, Eu começo com sete aqui, caio para cinco, isso vai depender de quanto texto vou mostrar. As regras mais curtas terão uma fonte maior, e quanto mais palavras estiverem na regra terá uma fonte um pouco menor para ter certeza de que eles cabem na tela. A chave aqui é o atraso da animação, e o que estou tentando realizar é configurado em uma série de segundos de quando essas coisas deveriam aparecer. Então, no começo, o que acontece é que a regra um começa em zero segundos. Não há atraso na animação. Quando isso começa, a primeira regra realmente aparece. Essa regra diz que esta é a Cidade do Conhecimento. Essa é a regra número um. Então isso aparecerá na tela imediatamente. Então ele vai ficar lá por cinco segundos porque a regra número dois tem um atraso de cinco segundos para que o usuário tenha a chance de ler as regras. Agora, cada um desses atrasos de animação terá uma quantidade diferente de segundos para esperar para que o usuário tenha tempo de ler qual é a regra, e quanto mais palavras estiverem na regra, quanto mais longa for a animação, normalmente, 10 segundos é tempo suficiente, e como você pode ver, muitos deles têm 10 segundos. A regra número três é nove. Quando chegarmos à regra número nove bem aqui na linha 79, são 15 segundos e muito texto, e queremos dar ao usuário uma chance para ler todo o texto que está lá. Regra número nove, como se constatou, não aparece até um minuto 10 no início desta tela, e você pode ver que o atraso é de 70 segundos. Portanto, esta é uma maneira de codificar todas as regras tela por tela, mas usando apenas uma tela usando CSS.
