Design de Web com efeitos especiais HTML5 + CSS3 :: Criar cubos giratórios | Jeb Riordan | Skillshare

Velocidade de reprodução


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Design de Web com efeitos especiais HTML5 + CSS3 :: Criar cubos giratórios

teacher avatar Jeb Riordan, Project Manager | Web Developer | jebriordan.com

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Aulas neste curso

6 aulas (12 min)
    • 1. Introdução: crie dados giratórios HTML5/CSS3

      1:21
    • 2. Criar o código HTML

      0:47
    • 3. Estilo do corpo e do cubo

      2:54
    • 4. Mova o cubo para o espaço 3D

      1:45
    • 5. Faça a magia acontecer

      2:50
    • 6. Deixe os dados cair

      2:50
  • --
  • Nível iniciante
  • Nível intermediário
  • Nível avançado
  • Todos os níveis

Gerado pela comunidade

O nível é determinado pela opinião da maioria dos estudantes que avaliaram este curso. Mostramos a recomendação do professor até que sejam coletadas as respostas de pelo menos 5 estudantes.

39

Estudantes

1

Projeto

Sobre este curso

Combine HTML e CSS no seu Web Design para criar efeitos especiais impressionantes.

Com a introdução de HTML5 e CSS3, há um monte de efeitos especiais que podemos incluir no nosso desenvolvimento da web sem um único script de PHP, jquery ou java

E isso é uma coisa boa né?

Nesta série de cursos curtos, vamos explorar toda uma gama de efeitos especiais para aprimorar nosso design da web, bem como mostrar aos visitantes do nosso site o que queremos que eles façam.

Neste curso, vamos criar:

Um cubo rotativo ou dados. Não é realmente útil, mas vai acrescentar interesse para os visitantes do seu site.

E você pode usar suas habilidades de codificação...

Fique atento para mais design da web com aulas curtas HTML5 e CSS3. Em breve: botões extravagantes, imagens deslizantes e carrosséis...

Conheça seu professor

Teacher Profile Image

Jeb Riordan

Project Manager | Web Developer | jebriordan.com

Professor

My name is Jeb Riordan and I've been a project manager for, well, too long.

Primarily in the telecommunications sector I have managed multi-million dollar projects in more than ten different countries, including, the UK, Australia, Thailand, Indonesia, Pakistan, Cambodia and the Caribbean.

I am a past member of the UK based Association for Project Management (APM) and the USA based Project Management Institute (PMI).

Although no longer a member of any professional institution I have maintained my PMI Project Management Professional Certification (PMP) status because it includes an element of continuing professional development (and it looks good on my resume!)

Now my focus is on managing web development projects. And moving from the traditional waterfall proj... Visualizar o perfil completo

Nota do curso

As expectativas foram atingidas?
    Superou!
  • 0%
  • Sim
  • 0%
  • Um pouco
  • 0%
  • Não
  • 0%
Arquivo de avaliações

Em outubro de 2018, atualizamos nosso sistema de avaliações para melhorar a forma como coletamos feedback. Abaixo estão as avaliações escritas antes dessa atualização.

Por que fazer parte da Skillshare?

Faça cursos premiados Skillshare Original

Cada curso possui cursos curtas e projetos práticos

Sua assinatura apoia os professores da Skillshare

Aprenda em qualquer lugar

Faça cursos em qualquer lugar com o aplicativo da Skillshare. Assista no avião, no metrô ou em qualquer lugar que funcione melhor para você, por streaming ou download.

Transcrições

1. Introdução: crie dados giratórios HTML5/CSS3: com a introdução de Quantidade Hasty cinco e CSS três. Há um monte de efeitos especiais que podemos incluir em nossos projetos de armas sem um único PHP Jake Weary ou JavaScript. E isso é uma coisa boa, certo? Nesta série de aulas curtas, exploraremos toda uma gama de efeitos especiais para iluminar nossos sites, bem como mostrar os visitantes do site. O que queremos que eles façam nesta classe criará um cubo giratório ou dados giratórios. O resultado não é realmente útil. Ele poderia ser usado como um preenchimento de tempo enquanto os arquivos baixam bem de qualquer maneira, parece legal, e nós começamos a usar alguns dos CSS três quadros-chave e explorar algumas três transformações de D. Esta classe é uma de uma série onde criamos efeitos especiais com HTML cinco e CSS três que você pode usar em seu site hoje. Assim como este. Oi, eu sou Jim Meriden, gerente de projeto que virou desenvolvedor chicote, mas isso é o suficiente sobre mim, certo? Se você quiser iluminar o seu site, torná-lo mais divertido para seus leitores do que seguir junto com este Siris de classes, porque em breve são botões extravagantes, imagens deslizantes e vendas de carros. Então, matriculado na classe e vamos fazer um dado girando 2. Criar o código HTML: para esta demonstração. Estou apenas criando um arquivo HTML chamado Coop Test, não HTML, e eu pretendo para o estilo CSS na cabeça do documento. Então vamos começar com o código HTML, que é muito simples e eu estou usando colchetes é meu editor de texto dentro do tanque corpo. Temos uma div com turma cubo girador e dentro que o nosso 60 IBS, representando os seis lados do cubo com classes enfrentam um a face seis. E no Preiser, estou usando o navegador cromado. Temos os números 136 para os números do tamanho do Cubo, e é isso para o HTML. 3. Estilo do corpo e do cubo: Vamos começar com o corpo e para o centro. O cubo na página usará o flex de exibição, justificará o Centro de conteúdo para o século Horizontal no centro do item de linha para o séculovertical século e tornará a altura da página igual à porta View. 100%. Assim, no navegador sempre ver são os seis se enfrentados, com os números de um a seis no centro da tela. Agora vamos dar algum estilo para o Tiv exterior, o diff com o girador de cubo de classe. Isso será animado mais tarde com os quadros-chave, então damos um nome à animação. Spin Cube, a forma do alto-falante de sua facilidade para fora, dando-lhe um início lento. Em um final lento, vamos manter a gira fofa dando-lhe uma alteração infantil. Conte com a duração do todo. A animação é definida como 12 segundos. Nada muda no navegador. Em seguida, precisamos ter certeza de que todos os locais do Cubo estão posicionados dentro de três espaços D em vez de flan no plano do elemento pai. Mas fazemos isso adicionando estilo transformado equivale preservado três D para o elemento pai, o mergulho com girador de cubo de classe e adicionando Estrela Transformada preservada. Três. Dietz. O elemento pai indica que os Filhos do elemento devem ser posicionados em três espaços D nele só serão aplicados a elementos de gráfico que tenham uma propriedade transformada especificada. Lembre-se que para mais tarde e, em seguida, precisamos posicionar a origem do Cubo. Girá-lo tive adicionando origem de transformação 60 pixel 60 pixel zero que é Thea Alum int gira torno de um ponto que é deslocado nas dimensões X e Y e zero deslocamento na Dimensão Zet e 60 pixels é metade da largura e metade da altura do próprio cubo como veremos em um minuto. Então essa é a animação. Cuidando nos seios e trocando. Vamos agora começar as faces da posição do cubo absoluto. Com relação ao seu pai a largura e altura 1 20 pixel, um pixel, cor de borda sólida cinza na sombra caixa no interior com 0,2 nível de um papel Texas alinhar centro com um tamanho de fonte 100 pixel no Preiser. Bem, o que temos? O primeiro lado é stylus. Queríamos e o resto do Dave não é tanto. Vamos adulto vive dentro do cubo girador e, em seguida, no Pricer todo seis tamanho do preço do nosso um em cima do outro. 4. Mova o cubo para o espaço 3D: vamos agora mover cada face do cubo para o seu lugar apropriado. Cara um. Nós movemos 60 picaretas ou mais perto do espectador por transformado, Traduzir disse. Positivo 60 pixel face para Nós girar em 90 graus em torno do acesso branco. Eu aproxime-o do espectador por 60 pixels. Não podemos vê-lo porque está a 90 graus para o eixo X. Rosto. Três. Gire 90 graus em torno do eixo Y, 90 graus em torno dos eixos X em, mova-o, 60 picaretas ou mais perto do visualizador, e não podemos ver esse também. Agora ele fica um pouco mais interessante com o rosto para girar 1 80 graus em torno do eixo Y em 90 graus em torno do eixo Z, todos movendo seus 60 picaretas ou mais perto do visualizador. E ainda assim, não podemos ver muito no navegador. Eu acho que só quando começamos a girar comigo nos quadros chave de qualquer maneira, continuando com o Face 5. Desta vez, vamos girá-lo para 70 graus em torno dos eixos Y em 90 graus em torno do eixo definido em, movê-lo 60 picaretas ou mais perto do visualizador em não há mudança no navegador e finalmente enfrentar seis. Nós giramos para 70 graus em torno do eixo X e movê-lo 60 picaretas ou mais perto do visualizador no navegador, desta vez face seis. Ele é movido para revelar o lado de trás do rosto para interessante na próxima lição, vamos fazê-lo mover adicionando os quadros-chave. 5. Faça a magia acontecer: Então vamos fazer o cubo girar usando o quadro chave para cima starling em CSS três. E a idéia é que a animação vai mudar gradualmente do estilo atual para o novo estilo em determinados momentos no ciclo de animação. Para entrar no trabalho de animação do dedo do pé, devemos encontrar a animação para um elemento, e temos feito isso, dando o Tiv com cubos de classe girador no nome da animação de Spin Cube em referir-se ao nome da animação no estilo quadro chave APP. E lembre-se, a duração da animação também é definida para 12 segundos no estilo Coop Spinner, portanto, tem 0% da duração que é no momento. Zero. A transformação gira zero graus em todas as três dimensões, e no navegador, a primeira face é em direção ao visualizador. Em 16% do tempo, giramos o cubo em torno do eixo Y em 90 graus negativos no Cubo retorna ao seu estado inicial durante os 84% restantes do tempo. Quando introduzimos outra etapa de 33%, o cubo permanece em 90 graus negativos em torno do eixo Y , e giramos o cubo 90 graus em torno do eixo definido no Cubo retorna ao seu estado inicial durante os restantes 67% do tempo. Quando introduzimos outra etapa em 50% nós giramos o cubo negativo 1 80 graus em torno do eixo Y no cubo permanece em 90 graus em torno do eixo definido no Cubo retorna ao seu estado inicial durante os restantes 50% do tempo. Quando introduzimos outro passo a 66% nós giramos o cubo muito negativo para 70 graus em torno das ceras, e nós giramos. O cubo 90 graus em torno do eixo X no Cubo, retorna ao seu estado inicial durante o restante 34% do tempo. Quando introduzimos outro passo em 83% escrevemos, Leve o Cubo a 90 graus em torno do eixo X em O Cubo retorna ao seu estado inicial ao longo dos restantes 70% do tempo. E aí está. Um cubo giratório 6. Deixe os dados cair: Ok, Então agora vamos adicionar um pouco de torção para os dados giratórios movendo-o de uma posição para outra tipo de como jogar os dados. Então eu tenho duplicado o teste de coop arquivo HTML e chamá-lo de teste COO para dot html no teste de golpe aberto do navegador para colá-lo para fora. E é o mesmo que antes, e o plano é deixá-lo cair do canto superior esquerdo da vista Portas está em algum lugar perto do fundo, bem em um CML. Vamos ao redor do cubo com outro tiff chamado recipiente bonito no presente. Nenhuma alteração no CSS. Vamos dar menções ativas em algum momento na borda aumentada com 2 50 pixels em uma borda sólida cinza de um pixel no navegador. Está lá agora. Vamos mover o pouco Cuba para dentro do recipiente. Div. Margem esquerda no topo dos 50 pixels na movimentação do Presidente. Não quer posicionar a parte superior esquerda bonito, então vamos apenas remover a tela. Após o uso no navegador, os dados se movem no canto superior esquerdo. Em seguida, precisamos animar o recipiente. Div. Dê-lhe um nome de recipiente de rotação. A função de temporização. Deixe-o jogar. Apenas uma vez em uma duração de dois segundos. E então vamos também mudar o próprio cubo para jogar apenas uma vez com um tempo de dois segundos. E vamos remover a fronteira. E então fazemos a magia adicionando um quadro chave ao contêiner de rotação, e só precisamos dizer onde terminar. Então, em 100% do tempo, o atributo transformador é traduzir a posição para 250 pixels direita gasto 450 pixels para baixo. Vamos ver o que acontece, e o golpe meio que cai do canto superior esquerdo para baixo, direito. Você pode tentar torná-lo mais realista adicionando regras de quadros-chave adicionais ao contêiner de rotação . Boa sorte.