Design de Web com efeitos especiais HTML5 + CSS3 :: Criar Gizmos rotativos | 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 Gizmos rotativos

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

5 aulas (12 min)
    • 1. Introdução:: Crie dois desenhos gerenciais

      1:23
    • 2. Modelo de layout de caixa flexível

      2:34
    • 3. Gizmo rotativo :: Exemplo 1

      3:14
    • 4. Gizmo rotativo :: Exemplo 2

      3:26
    • 5. Considerações finais

      1:12
  • --
  • 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.

148

Estudantes

2

Projetos

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 quisermos que eles façam.

Neste curso, vamos criar:

Dois Gizmos rotativos. Não é realmente útil, mas vai adicionar 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 dois desenhos gerenciais: com a introdução da pressa, TML cinco e CSS três. Há um monte de efeitos especiais que podemos incluir em nossos projetos de páginas sem um único porcos BJ Kriel, 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á algumas coisas que giram. O resultado não é realmente útil, mas parece legal quando começamos a usar, um dos CSS três quadros-chave e explorar a camada de caixa flexível do modelo. Esta classe é uma de uma série onde criamos efeitos especiais com lutas precipitadas de ML. É o seu três que você pode usar em seu site hoje, assim como este. Oi, sou Jeff Reardon, gerente de projeto que virou desenvolvedor. Mas isso é o suficiente sobre mim, certo? Se você quiser iluminar seu site, torná-lo mais divertido leitores de combustível do que seguir. Junto com as aulas desta Siri, porque em breve serão botões extravagantes, imagens deslizantes e células de carro. Então matriculando a turma e vamos fazer alguns mostradores rotativos. Sim, mostradores rotativos 2. Modelo de layout de caixa flexível: antes de começarmos a criar as batatas de linha, eu quero dizer-lhe como eu centralizei os exemplos na tela. No passado, havia toda a fonte de truques e hacks tentando centralizar o conteúdo no meio dele . Div, tanto horizontal como verticalmente com a introdução de cessa três. Nós não precisamos usar floats ou hacks porque temos este CSS três layout caixa flexível um ou flex livros para encurtar. Este modelo de caixa flexível garante que os elementos na página se comportam da maneira que queremos que eles se comportem e também acomoda os diferentes tamanhos de tela e dispositivos. E isso é feito declarando o elemento do forno da propriedade de exibição para flexionar e discernir. Este contêiner flexível é um ou mais itens flexíveis. Vamos demonstrar. Então aqui temos enfrentado aqui, Mel, temos um div com recipiente flexível classe. Dentro do Do que temos um título odiar um e três ifs aninhados com item flexível classe e enviar texto. O navegador se parece com isso, mostrando o cabeçalho no texto no ninho de três. Ele dá no CSS. Vamos criar a classe para o recipiente flexível, dar-lhe alguma altura e alguma cor de fundo no processo mostra o espaço ocupado pelo DIV. Declaramos a propriedade de exibição com valor flex no Preiser. Parece com isto. A direção padrão para os itens flexionados aninhados é horizontal assim, mas queremos que todos os elementos dentro do contêiner pai empilhem um em cima do outro, modo que o valor de direção flexível seja definido como coluna. Agora vamos centralizar ao longo do acesso vertical com o Justify Content Center. Agora vamos centralizar ao longo do acesso horizontal com um centro de itens de linha e lá você tem isso . Vamos agora olhar para o ninho que ele dá com os itens flexíveis classe. Lembre-se de que qualquer coisa acontecendo fora do recipiente flexível se comporta é normal e o mesmo vale para qualquer coisa dentro do item flexível. Há também muitos outros pares de valor de propriedade para manipular a renderização nos itens flexíveis dentro do contêiner flexível. Mas centralizar é tudo o que nos interessa agora. Na próxima lição, começamos a fileira taters 3. Gizmo rotativo :: Exemplo 1: Começaremos com a primeira demonstração do rotador. Vamos começar com os odeios TML no início do índice perseguiu-o para fora página para o primeiro mostrador rotativo. Temos um recipiente com recipiente de classe, um cada um dirigindo em um mergulho com classe, rotador um e assim Matty texto para que concedamos no navegador. E é isso para o HTML no arquivo CSS de ponto de estilo, precisamos começar a encontrar o recipiente flexível que chamamos continha um. Definimos a tela para ser flexível, e agora vamos mostrar esse contêiner com uma borda sólida com início de estilo, fundo branco, algum preenchimento na parte inferior e alguma margem fora desse contêiner para separá-lo do próximo rotador. E o prêmio se rende assim ao lado para redefinir a direção do Flex. Duas colunas. O conteúdo justificar nos itens de linha ambos para centralizar posicionará esses itens flexíveis no centro morto do contêiner um. E se parece com isso. E agora o rotador com a classe Rotador 1. A morte tem uma largura e uma altura de 100 pixels na cor de fundo de cinza médio Parece que isso definindo o raio da borda para 50% faz o círculo de defesa. Definir a borda com 24 pixels torna um círculo maior por oito pixels na borda transparente para que a cor do plano de fundo seja exibida. Agora vamos definir a placa uma cor superior para um vermelho profundo na borda inferior para a mesma cor vermelha profunda . E depois estamos no Magic. A animação é definida pelo quadro-chave com o nome girar um. Completa em dois segundos de forma linear indefinidamente. Agora precisamos encontrar a animação. Definindo o quadro-chave. Gire um. A transformação é uma rotação e também uma escala a 0% do período de tempo. Sua rotação é zero graus em uma escala é um tem 50% do período de tempo. O DIV girará 180 graus e aumentará até 1,2 em 100% do período de tempo. O mergulho girará para o círculo completo, e a escala foi reduzida de volta para um. Agora vamos ver como ele funciona. Podemos brincar com o tempo de animação nas propriedades de transporte para ver os diferentes efeitos. Por exemplo, vamos remover o transformá-lo 50% Agora ele apenas gira. Brincar com o tempo, os graus de rotação na escala e ver que formas estranhas e maravilhosas podemos fazer. E é isso para o rotador. Um na próxima lição, rotador, também. 4. Gizmo rotativo :: Exemplo 2: neste segundo exemplo irá inverter a direção de um. Dave e eu comentamos os quadros chave para o rotador. Quer parar de girar? Pode ficar um pouco irritante. Corte isso. Agora vamos começar com o Mel apressado para rotador, também. Temos um recipiente com recipiente de classe para H um, dirigindo investigativo com rotador de classe, também, e outro mergulho aninhado com classe girada para pesar. E é isso para o HTML. No CSS, definimos o contêiner para o mesmo que o contêiner um usando o modelo flexível de exibição. O estilo para a direção flexível do recipiente é um Kahlan. Itens ex legais no contêiner flexível renderizarão um em cima do outro e, em seguida, justificam conteúdo Conteúdo Online dito ao centro para persuadir todos os itens flexíveis a renderizar no centro do contêiner. E parece que este girado para é uma cópia do rotador do mesmo tamanho com um fundo cinza claro . Você faz o círculo retangular. Temos uma borda para pixel largo, sólido com uma cor rosa para que possamos vê-lo por enquanto. Em seguida, adicione cor à borda. Fale no porto do perdão. A animação é chamada girar para tem uma forma linear de tempo de ciclo de quatro segundos. Ele não pára. A segunda rotação para um é semelhante, mas diferente. Precisamos posicioná-lo em relação ao seu recipiente a largura ea altura é aumentada em um pixels e por agora, fazer a cor de fundo amarelo. Agora, ambos rotator zehr visível. Podemos remover o texto em HTML dá Fazemos o retângulo em um círculo. Vamos tornar a porta de visível, alterando a cor para azul, e podemos remover a cor de fundo, alterando-a de amarelo para transparente. Agora precisamos posicionar o segundo rotador direito em cima do primeiro rotador, movendo-o para a esquerda por 12 pixels, movê-lo para cima em 30 pixels. Oh não, não 30 pixels, 12 pixels. E então definimos a borda deixou uma cor verde agradável. E então nós dissemos que a fronteira direita na mesma cor verde agradável. Em seguida, remova a borda azul e torne-a transparente. Na animação é chamado Girar para A com um tempo infinito linear de dois segundos, e parece com isso. Agora precisamos iniciar a animação com um conjunto de quadros-chave, o primeiro se girar para girar no sentido horário 360 graus em quatro segundos, o segundo, se girar para um nós girar anti-horário, 360 graus em dois segundos. Vamos ver se funciona e aí está. 5. Considerações finais: Ao combinar HTML cinco e CSS três, é possível fazer alguns efeitos especiais muito interessantes para o seu site. Este exemplo de mergulhos rotativos é visualmente divertido, mas francamente, não tem nenhum propósito real além de dar-lhe uma prática de codificação e mostrar suas habilidades de CSS experientes . E isso não é uma coisa ruim, é? Nós exploramos o uso das seguintes propriedades CSS, alinhando elementos usando o modelo de camada de caixa flexível estilos de borda de posicionamento relativo, raio de borda para criar um círculo propriedades de borda para o topo. Para o perdão tédio esquerda Porter animação direita usando quadros-chave e a transformação girar no sentido horário e anti-horário e escala. Se tiver alguma dúvida, estou aqui para ajudar. Por favor, pergunte-me qualquer coisa. Se você achar a classe útil, por favor me dê um polegar para cima e poste os resultados do seu projeto na área do projeto. Você pode encontrar que arquivos HTML e CSS na área do projeto em Look Out para mais Web design. Efeitos especiais usando HTML cinco e CSS três