Oi, todo mundo.
Na revisão do código de hoje, vamos falar sobre fazer um calendário.
Porque o que eu realmente gosto nos calendários é que há todas essas pequenas,
pequenas coisas que você precisa pensar para realmente fazer sua página parecer profissional.
Então o que eu tenho aqui na tela é um calendário muito, muito simples,
onde você pode ver, eu tenho todos os dias do mês.
Eu também tenho, em alguns dias, pequenos compromissos.
Então vou almoçar com a mamãe, ou me encontrar com o reitor, ou ser ajudante da biblioteca.
E, no dia 31, é Halloween, então boo!
O que podemos fazer para pegar essa informação,
esse conteúdo do nosso HTML5, e transformá-lo em algo que é realmente agradável?
Bem, vamos dar uma olhada no que eu fiz com ele.
Aqui, eu usei CSS para criar um calendário
que tem um monte de coisas diferentes acontecendo nele.
Primeiro, eu fui em frente e eu o estilizei bem.
Incluí coisas como raio de fronteira, destacadas estes dias aqui.
Eu percebo que é muito difícil ver na tela agora, mas eu realmente tenho
uma imagem de fundo para aqueles dias para fazer com que pareça um pouco diferente.
A outra coisa que eu adicionei é que em dias que têm esses pequenos asteriscos,
se eu clicar neles, o compromisso real aparece.
Então, como você pode ver, eu vou estar lidando com um monte de diferentes elementos CSS.
E vou passar lentamente pelo código
só para te dar uma ideia do que está acontecendo.
Agora seria impossível para você seguir comigo com este código e
saber exatamente o que estou fazendo.
Em vez disso, eu estou dando a você como um recurso para tipo de escolher e
entender as diferentes partes como você precisa e
como você deseja incorporá-los em sua página.
Então vamos dar uma olhada no CSS.
Você pode ver que esta é uma página muito, muito ocupada.
Então sente-se e
você pode me ouvir falar sobre as coisas diferentes em vez de tentar ler o código.
Eu entrei e queria fazer o meu calendário com um raio de fronteira muito bonito para
que eu tivesse algo em volta do topo.
A questão é, a mesa em si é realmente apenas esta parte.
Não é a legenda.
Então o que eu fiz foi entrar e
eu disse, não se preocupe com os dois cantos superiores, aqui e aqui.
Só curve os dois cantos inferiores, tudo bem.
Como faço para ter essa idéia legal de alternar entre um tipo de cinza claro e
essa cor e ir para frente e para trás?
Bem, com isso, você pode ir em frente e usar alguns dos diferentes pseudo elementos.
Então, neste caso, eu entrei.
E não sou eu.
É o navegador dizendo, ei, eu vou olhar para todas as diferentes linhas da tabela.
E sempre que vejo uma criança estranha, vou fazer uma cor,
sempre que ver uma criança que esteja empatada, vou fazer de outra cor.
Isso é muito mais agradável do que você ter que ir para a sua mesa e
colocar classe é igual a par, classe é igual a ímpar, classe é igual,
especialmente se mais tarde você decidir adicionar mais informações e ele joga fora de suas linhas.
Isso é algo realmente poderoso que você deve tentar aproveitar.
E quando você tenta fazer sua página parecer realmente profissional,
os elementos que se sobrepõem?
Então bem aqui, eu estou realmente olhando para uma tabela, e uma linha de tabela, e
um elemento de tabela.
Eu tive que passar e pensar em cada um desses e pensar em coisas como,
hm, bem, na minha última linha de tabela, o último elemento de tabela,
que tem uma curva diferente do primeiro filho.
Então vá em frente, baixe este código e dê uma olhada nele e brinque com ele.
O que acontece se você comentar?
O que vai continuar?
Tudo bem, eu tenho um código bastante simples para a legenda, eu fui em frente e
apenas adicionei um raio de borda e cores.
O que eu realmente quero te mostrar é toda essa idéia de quando você quer esconder as coisas.
Vamos voltar ao HTML.
Coloquei todos os meus elementos dentro de uma tag span.
Então aqui, eu tenho um ajudante de biblioteca span.
Espero que estejas a pensar agora e a pensar,
porque é que estes não aparecem quando eu olho para o calendário pela primeira vez?
Por que não está lá?
Bem, a razão seria porque, por padrão, eu vou ir em frente e
esconder todos os compromissos diferentes.
Vou em frente e dizer, visibilidade escondida.
Agora isso é diferente de exibir nenhum.
Se eu não tivesse nenhuma exibição, toda esta praça teria desaparecido, não estaria lá.
Visibilidade escondida diz que quero deixar todo esse espaço, mas
não quero mostrar o que está lá dentro.
É uma coisa muito pequena, e é exatamente por isso que eu fiz este exemplo, para
que você pudesse ver a diferença.
Tudo bem, então agora está escondido.
Mas assim que eu torná-lo ativo, e ativo significa que assim que você está clicando
nele, eu mudo a visibilidade de oculto para visível.
Então, vamos clicar nele.
E você pode ver o almoço com a mamãe aparecer.
Ajudante da biblioteca, e também aqui, no Dia das Bruxas,
tenho uma pequena mensagem ali.
Então, havia muita coisa acontecendo com esse CSS.
E eu não quero ir abaixo de cada linha, e
você não quer que eu faça isso também.
Seria muito chato.
Então eu estou esperando, porém, que eu tenha mostrado algumas das maneiras que essas
pseudo-classes, pseudo-elementos, os diferentes estados, são todos juntos
para criar uma página que pode parecer muito melhor do que apenas HTML simples por si só.
Então eu estou esperando que você use esse código e crie algo ótimo para você mesmo.
Boa sorte.