Calendário Animado com HTML5 e CSS3

Em outro artigo, eu disponibilizei um script para colocar um calendário em seu site, para ser implementado de acordo com sua necessidade. Marcar os dias disponíveis com uma cor diferenciada, se o site é de uma Clínica Médica, por exemplo.

Hoje, vou disponibilizar um calendário animado, meio esquisito, mas o importante é entender a técnica para usar em algum projeto futuro.

O importante desse artigo é mostrar o poder que tem o HTML5 quando usado juntamente com o CSS3 e, como não poderia deixar de ser, o JavaScript.

Funcionalidade:

A página que se abre, apresenta uns quadrados contendo um número alinhado à direita e abaixo. Ao clicar no quadrado, a porta se abre e apresenta um texto. No nosso exemplo ele mostra Porta X, mas a ideia é mostrar o evento a que se refere o dia ou a data, dependendo do objetivo, pois o número que aparece abaixo do quadro pode ser uma data ao invés de um número.

A ideia é demonstrar um Calendário de Prioridades ou Eventos. É por isso, que os números das portas são aleatórios. E, como disse, podem ser substituído por datas.

Clique na Figura abaixo para abrir a página e testar!