CSS avançado: janela deslizante e formatação de um timer

Name: CSS avançado: janela deslizante e formatação de um timer
Author: Cliff Brozo

Neste curso, aprenderás como construir e navegar pela janela deslizante. Também formatarás um cronômetro em um tabuleiro personalizado no estilo Jeopardy. Ao…

Preview the first lesson free — get full access to all 7 lessons.

Solicitar uma demonstração Entrar

Curso: sob demanda

Criação de um tabuleiro de jogo O jogo que decidi criar é um dos meus favoritos. É Jeopardy, existe desde 1964 e ainda está forte. O que você está vendo aqui é um desenvolvedor online. É chamado CodePen IO. E o que você pode fazer aqui é testar parte do código com o qual você vai trabalhar. O que fiz foi criar um pequeno documento HTML que deseja imprimir quatro colunas. E para este projeto, e para este curso, vamos nos aprofundar nas habilidades da classe da grade. E o que vamos ser capazes de fazer é montar um tabuleiro de jogo com design responsivo, e também atraente para os olhos. Como você pode ver, no lado esquerdo da tela no meu documento HTML, tenho um HTML simples com uma divisão chamada classe, Eu tenho uma seção do programa que é dividido em quatro colunas, e eu tenho duas classes lá, uma é chamada de classe de grade, e a outra é chamada de classe de coluna e veremos como isso é estilizado em CSS. Se você olhar no meio, esta é a janela de código CSS, temos algumas coisas básicas para o nosso corpo e então definimos o que é a classe da grade. Se você olhar com atenção no círculo vermelho, você verá que estou criando algo chamado uma coluna de modelo de grade e quero quatro colunas, cada uma ocupando 25% da tela. O problema é quando eu quero separar essas colunas com algo chamado lacuna de grade. E como você pode ver, na linha 12, Estou definindo o intervalo da grade em 10 pixels. E isso me dá um espaço entre cada uma das colunas. O que acontece com as colunas do modelo de grade e os 25% é que não inclui a lacuna entre as colunas e, correspondentemente, cria uma barra de rolagem horizontal, algo que nunca queremos ver. Se você olhar no lado direito da janela que normalmente é reservado para JavaScript nesta tela em particular, não temos nenhum, usando os 25% nos dá uma barra de rolagem horizontal na parte inferior da coluna quatro. Em vez de quatro e 25%, Eu mudo a forma como as colunas do modelo de grade são configuradas. Mudei os 25% para dizer que gostaria de usar uma fração do espaço restante. E o que vamos fazer é aprender exatamente como isso funciona. A ideia é que ele calcule quanto espaço restante é deixado e ajustar a largura da coluna em vez de 25%, vai cair para 22 ou 23% para acomodar a largura das lacunas. E esta fração, como você pode ver, 1fr me permitirá obter a largura total de quatro colunas e inclui as lacunas na largura da página. Vamos ver como fica quando o projetamos em um tabuleiro de jogo. Neste caso, nossas categorias serão todas sobre CSS, e as coisas nas quais vamos trabalhar. Nós temos valores em dólares semelhante à maneira que Jeopardy os tem. E iremos codificar este jogo para que funcione como o Jeopardy faz com um pequeno toque. Para fazer o tabuleiro de jogo funcionar, vamos querer criar e usar a propriedade de tamanho da caixa. O que queremos fazer é criar uma altura e largura que vamos atribuir a esta caixa e manuseie o que estiver dentro da caixa. Bordas e preenchimento são adicionados à largura para nos dar o tamanho das caixas renderizadas na tela e temos que ajustar esse valor. Novamente, como eu disse, se tivermos quatro caixas de 25% cada, qualquer preenchimento direito ou esquerdo, não caberá em uma linha dentro da restrição desse contêiner de caixa. Então o que fazemos é mudar isso, em vez de usar a content-box, que é a versão padrão, queremos alterá-lo para border-box. E isso permite que o navegador conte de bordas e preenchimento e largura de lacuna e tudo mais, e diminuirá automaticamente o tamanho do documento para que não haja rolagem horizontal. Usar o border-box torna mais fácil com qualquer elemento isso elimina os problemas com o layout de todo o nosso conteúdo. Posicionamento relativo e absoluto permite que esses valores sejam relativos ao conteúdo e independente de mudanças na borda e preenchimento. Sempre teremos colunas iguais não importa o que façamos. Vejamos o código que gera esta caixa de conteúdo e caixa de borda. O primeiro, esta caixa maior, tem nossa propriedade box-sizing para definir como content-box. A caixa terá 160 pixels de largura, 80 pixels de altura, terá um preenchimento de 20 pixels, que vai mover a caixa de conteúdo de palavras 20 pixels de distância da borda, e terá uma borda de oito pixels. Se você fizer alguma matemática, os 160 pixels da caixa, mais os dois conjuntos de preenchimento, esquerdo e direito mais os dois conjuntos de bordas, esquerda e direita realmente lhe dará uma caixa de 216 pixels de largura. E a mesma coisa acontece com a altura. Em vez de dizer content-box, criamos uma classe chamada border-box. Esse preenchimento é subtraído de toda a largura da caixa e temos uma caixa muito menor. Por que o grande negócio? Bem, quando os usuários estão usando diferentes tipos de dispositivos para acessar as páginas, precisamos economizar o máximo de espaço na tela possível e usar o border-box nos ajudará a fazer isso.

Avançado Fornecedor : Cliff Brozo 7 lições · 43m em Árabe, Alemão, Inglês, Espanhol, Francês, Português, Chinese

Descrição do curso

Neste curso, aprenderás como construir e navegar pela janela deslizante. Também formatarás um cronômetro em um tabuleiro personalizado no estilo Jeopardy. Ao final deste curso, conhecerás as funções e recursos dos controlos deslizantes e temporizadores.

Objectivos de aprendizado:

O Que Você Vai Aprender

Criar uma janela deslizante e navegar por ela
Construir um tabuleiro de jogo interativo no estilo Jeopardy
Formatar um temporizador para um tabuleiro de jogo personalizado
Escrever código que gera o tabuleiro de jogo
Projetar uma janela deslizante em várias etapas
Identificar as funções e características de sliders e temporizadores

Principais Conclusões

O curso ensina como construir e navegar por uma janela deslizante.
Os alunos formatam um temporizador dentro de um tabuleiro personalizado no estilo Jeopardy.
Ao final, os alunos entendem as funções e características de sliders e temporizadores.
O curso abrange a geração de um tabuleiro de jogo com código e o design de um jogo interativo.
As habilidades abordadas incluem Animações CSS, Frameworks CSS, CSS Orientado a Objetos e Aprendizagem Interativa.

Perguntas Frequentes

O que aprenderei neste curso?

Você aprenderá como construir e navegar por uma janela deslizante, formatar um temporizador em um tabuleiro personalizado no estilo Jeopardy, e compreender as funções e características de sliders e temporizadores.

Quais tópicos as lições abrangem?

As lições abrangem a criação de um tabuleiro de jogo, código que gera o tabuleiro, design de uma janela deslizante em duas partes e formatação de um temporizador em três partes.

Que habilidades este curso desenvolve?

Este curso desenvolve habilidades em Animações CSS, Frameworks CSS, Design Instrucional, Aprendizagem Interativa, CSS Orientado a Objetos e Tutoriais.

O que serei capaz de fazer ao final do curso?

Ao final do curso, você será capaz de criar uma janela deslizante, criar um jogo interativo e formatar um temporizador.