48 demonstrações brutais de HTML5 / CSS3

Aproveito esta postagem para resolver uma pergunta que você fez recentemente nos comentários de um artigo:

Quando é um bom momento para começar a projetar totalmente com HTML5?

Bem, honestamente, depende do alvo que você está almejando. Se você não planeja que seus visitantes usem o Internet Explorer (ex: página de software do Mac), comece imediatamente com HTML5, mas se você precisa de pessoas com Internet Explorer para ver seu site, é melhor esperar ...

Na entrada, bem depois do salto 48 demos de HTML5 que são incríveis e merecem ser vistas. Ótimo é pouco.

Fonte | HongKiat

aanimação udioburst

Uma animação confortável e fantástica criada com tela e tag de áudio do HTML5.

Piscina de bolinhas

Apresentado no último evento do Google I / O, esta demonstração mostra como o HTML5 pode ser dinâmico.

Salada Blob

Uma criatura gerada por HTML5 que iria agradar você.

bomomo

Com Bomomo, você pode observar diferentes movimentos atômicos simulados com HTML5.

Bola do navegador

Surpreenda-se com esta bola HTML5 'cross-browser'.

Bubbles

Divirta-se criando infinitas bolhas flutuantes com cores diferentes.

Animação de desenho em tela

Um cartoon HTML5 simples e engraçado que ajuda você a entender o que o elemento canvas do HTML5 pode fazer.

relógio legal

Um bom relógio analógico personalizável construído por HTML5 e JavaScript.

Apresentação de slides do Flickr PS3

Visualize suas fotos do Flickr com apresentação de slides no estilo PS3 no navegador da web.

Polaroid interativo

Uma demonstração interativa que funciona de maneira bastante semelhante à interface multitoque.

Fogos de artifício JS

Aproveite o momento dos fogos de artifício com sua gravidade e velocidade preferidas, com tecnologia HTML5 e Javascript.

Caleidoscópio

Um caleidoscópio HTML5 muito bonito e futurista.

Partículas líquidas

Animação de partículas sensíveis que reage com base no movimento do mouse.

Hipnotizador

Outra demonstração de HTML5 sensível e excelente que mostra como os elementos próximos reagem com o movimento do mouse.

Nuvem nebulosa

Perca-se com esta maravilhosa nebulosa HTML5.

Paralaxe

Visualize todas as formas 2D em perspectiva paralela.

Animação de Partículas

Uma elegante animação de partículas HTML5 que pode formar sua mensagem preferida.

Espalhar

Perca-se com esta animação sem fim.

Starfield

Uma animação de campo estelar HTML5 muito legal que mudaria de direção e velocidade com base no movimento do mouse.

Destruição de Vídeo

Um clique para reproduzir um vídeo.

Waveform

Observe como a onda da tela do HTML5 se move, alterando sua amplitude, comprimento de onda, largura etc.

Efeito 3D

Ficou impressionado com a animação da tela? Isso é mais que o elemento canvas do HTML5 pode fazer e é chamado de efeito 3D. O desenvolvedor pode contar com o elemento canvas, DOM e JavaScript para criar efeitos 3D, que podem ser posteriormente desenvolvidos em animação 3D ou jogo.

Canvas3D e Flickr

Tenha uma nova experiência 3D com o photostream do Flickr.

Simulação de tecido

Uma simulação de pano realista, baseada em HTML5.

Monstro em evolução

Observe um monstro evoluindo para uma criatura complicada, um de seus criadores é o HTML5.

Caixa de presente do Google

O gigante motor de busca Google é apresentado em 3D, visualização jogável.

Toque JS

Uma vitrine '3D on 2D Canvas' de alta qualidade e realista.

Apresentação de dados

Embora o elemento canvas do HTML5 possa ser usado para criar animação e efeito 3D, ele também pode ser implementado para apresentar dados matemáticos.

gnuplot

Gnuplot, um aplicativo de plotagem de dados na versão HTML5.

Gráfico R

RGraph fornece uma ampla gama de apresentação de dados como gráfico de barras, barra de progresso e gráfico de radar tradicional.

Aplicativo Web

Em última análise, usando todas as possibilidades combinadas pelo HTML5 e outras linguagens, pode-se criar um aplicativo ou jogo interativo próximo ao aplicativo Flash.

Pintura em tela

Testemunha o irmão do Microsoft Paint entra em seu navegador, e seu pai é HTML5.

TelaMol

Uma aplicação científica desenvolvida para ajudá-lo a entender a estrutura de certos elementos da terra.

Construtor de desenhos animados

Desenhe uma imagem interessante de desenho animado com este construtor de desenho animado mínimo e interativo.

Arraste qualquer coisa aqui

Arraste qualquer coisa que você puder arrastar na demonstração para mostrar os detalhes.

Desenho Gartic

Um aplicativo HTML5 original que permite fazer alguns desenhos básicos que podem ser salvos em diferentes formatos de imagem, como jpeg ou png.

Esboço Físico

Desenhe o que quiser e veja como eles reagem com a gravidade simulada.

Bloco de notas

Um poderoso aplicativo de desenho HTML5 que permite desenhar e editar sua imagem de maneira precisa.

Conversa fiada

Um aplicativo da web que confirma a posição geográfica da mensagem relacionada ao clima adquirida do Twitter, formando-os em um mapa de 'clima social' baseado em tela, bastante trivial (como afirma o autor), mas interessante.

Games

3Entediado

Você nunca ficaria entediado se pudesse continuar evitando centenas de marcadores HTML5 no próximo segundo.

Saia

Rebote a bola para quebrar todos os tijolos.

Canvas

Não é bem um jogo, mas demonstra como o HTML5 pode ser usado para desenvolver um jogo de navegador de tiro em primeira pessoa.

Pega isso

Quantas bolas você pode esquivar para obter o quadrado vencedor do HTML5?

Reação em cadeia

Acorrente a explosão para atingir o objetivo, não fique viciado.

saída de cubo

Jogue Tetris em 3D, vista de cima para baixo.

etchaFísica

Desenhe o item para mover a bola até a estrela, não se esqueça da gravidade.

Quebra-cabeças

Clique, gire e solte as peças do quebra-cabeça para resolver esse quebra-cabeça baseado em HTML5.

Slide puzzle

Deslize para a vitória, outro jogo HTML5 criado para espremer o suco da sua mente.

Mesmo jogo

Remova determinado grupo para formar um par de outro grupo da mesma cor e, eventualmente, você receberá uma vitória.

Tetris

Um dos jogos mais clássicos trazidos de volta à vida pelo HTML5.

Toro

Mais um jogo de Tetris em versão pseudo-3D.