Você já ouviu isso muitas vezes antes: estamos no precipício de uma transição da maneira como nós, como desenvolvedores, fazemos as coisas. Liderando o caminho são padrões futuros como CSS3 e HTML5, ambos já implementados parcialmente em 4 dos 5 principais navegadores da Web, com o IE9 Promissor Support, capacitando -nos com novas maneiras de fazer experiências interativas e ricas do usuário. Quão incrível é CSS3?
Descubra verificando esses 10 experimentos e demos que pressionam as capacidades das especificações.
1. Nosso sistema solar
Este experimento apresenta as órbitas planetárias do nosso sistema solar (avançado, é claro), utilizando o CSS3’s border-radiusAssim, transforme animation. Além disso, pairando sobre os nomes de cada planeta à direita exibe uma dica de ferramenta animada usando CSS (aprenda como fazer dicas de ferramentas animadas CSS3). Você pode ler sobre como esse experimento foi desenvolvido a partir de Este passo a passo Por Alex Girón, o criador desta demonstração estelar CSS3.
A animação, no momento, funciona apenas nos navegadores do Webkit (Google Chrome e Safari).
2. Anúncios CSS3 versus anúncios flash
Banners da Web Animated Animated são notórios por serem intrusivos na experiência do usuário. Os aplicativos de bloqueio de anúncios podem desativá-los procurando todos os objetos flash incorporados em uma página da web e escondendo-os. No entanto, usando a animação CSS3, esses anúncios flash podem ser imitados em funcionalidade, mas serão mais difíceis de desativar com o software de terceiros.
Neste experimento, vários anúncios foram recriados usando CSS3, e os resultados são quase idênticos ao seu equivalente construído em flash.
3. CSS3-MAN
Esta é uma sequência de animação robusta inspirada no Homem-Aranha Série de televisão animada nos anos 60. Fazendo a sequência funcionar envolvida usando o CSS3’s transformAssim, @key-frame e rotate; Um pouco de jQuery foi usado para pré -carregar as imagens e também o HTML5 para o áudio. O Criador escreveu uma explicação de como a sequência animada CSS3-Man funciona, que lhe dará uma idéia geral do nível de esforço envolvido neste incrível experimento.
4. O homem de Hollywood
Esta demonstração é uma sequência animada (com base em tipografia cinética) que explora uma maneira pela qual podemos substituir componentes de animação ricos, como flash ou efeitos posteriores. Essa prova de conceito utiliza principalmente seletores CSS avançados e animação CSS3, no entanto, não é puramente CSS, uma vez que o JavaScript foi usado para atribuir classes de elementos.
5. Anigma
Muitas vezes usamos flash (ou Silverlight) para videogames ricos e interativos na Web. Esta demonstração do CSS3 é um jogo de quebra ainda Se você o comparar com jogos de flash em sites como o KonGregate. HTML5’s O elemento foi usado para incorporar o som.
6. Polaroids animados
Esta demonstração é de imagens empilhadas que se parecem com Polaroids. Passando sobre uma fotografia transita suavemente para a frente da pilha, criando uma interação interessante para apresentar sua galeria de fotos. A demonstração foi feita alavancando transitionAssim, transform. box-shadow para efeitos visuais.
Ler o tutorial sobre como isso foi construído se você quiser saber como isso foi desenvolvido.
7. Menu do CSS3 Music Player
Com html5’s e As APIs, que nos permitirão utilizar multimídia sem dependência de plugins proprietários, acabaremos por precisar de GUIs que forneçam aos nossos usuários controles para a mídia que os servimos. Embora pudéssemos usar imagens estáticas em conjunto com outros elementos HTML (como botões) para construir essas interfaces, usando apenas HTML e CSS para renderizar controles de mídia significa que teremos uma solução mais maleável. Esta interface do usuário para um tocador de música foi construída usando apenas CSS3 (gradientAssim, border-radiusAssim, box-shadow e todas essas coisas boas).
Leia a explicação sobre como isso foi contratado em este tutorial.
8. Vinil deslizante com CSS3
Esta demonstração, encontrada no Zurb Playgroundleva o álbum de vinil que, quando passou, anima o deslizamento de um disco de vinil que contém controles adicionais (“mais informações” e “play”). Essa prova de conceito poderia um dia ser usada como uma interface elegante baseada na Web para um site que toca música quando combinado com o HTML5’s API.
9. O pequeno planeta de Gabriel Sharp
Esta sequência animada de desenhos animados descreve um ciclo avançado de dia e noite. Funciona em navegadores do webkit (Safari e Chrome) usando o @keyframes Propriedade CSS3 para mover e fazer a transição de imagens PNG.
10. Folhas caindo
Webkit apresenta os recursos dos CSS3 animate Propriedade com uma demonstração espetacularmente suave de folhas caindo. Dica: use o recurso “View Source” do seu navegador para ler o código -fonte da demonstração – o código está bem documentado com explicações de como ele funciona. Leia o webkits Postagem do blog sobre o animate propriedade para ter uma idéia melhor de todas as possibilidades.
