Código de Css criativos: animação de acordeão com codificação de mão simples | Luis Carlos | Skillshare

Velocidade de reprodução


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

Código de Css criativos: animação de acordeão com codificação de mão simples

teacher avatar Luis Carlos, Engineer, Web Developer and Instructor

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

3 aulas (14 min)
    • 1. Trailer

      0:53
    • 2. Menu de navegação dinâmica / controle de imagem (parte 1) - Criação de layout

      6:53
    • 3. Menu de navegação dinâmica / controle de imagem (parte 2) - Layout de ajuste

      5:51
  • --
  • 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.

109

Estudantes

--

Sobre este curso

Para esta nova classe, quero compartilhar o grande poder do HTML usando propriedades flexbox e css para criar uma navegação de menu dinâmica com ótimos efeitos, dando uma ótima interação a este componente de página da web.

Este projeto também pode ser usado apenas como criação de uma galeria de imagem de acordeão simples sem funções do menu principal.

Os princípios do flexbox são detalhados na classe Learn CSS3 e nos sites responsivos de compilação em 2018, onde explico detalhadamente o funcionamento desse modelo criado na versão 3 de css.

f1c9f3ba

 

Este curso é dividido em dois vídeos principais:

  • Planejamento e criação do "layout principal" da página
  • Ajuste fino do layout com efeitos css avançados (transição, efeitos de pânico e outros)

No final deste curso, você pode criar seus menus de navegação dinâmica do que também pode funcionar como uma galeria de acordeão, que você pode compartilhar com comunidade.

Aprecie.

Conheça seu professor

Teacher Profile Image

Luis Carlos

Engineer, Web Developer and Instructor

Professor

Currently, I am an exciting Engineer and Trainer , who loves to learn and share knowledge and new experiences.

As Trainer participated in many projects directed to student in the areas of math, computer science, new technologies and web development . Several years of training helped me developed many skills that contribute to the personal development of each people.

You can follow some of my articles in my website where i share some tutorials in the area of new technologies.

Follow me on Skillshare!

 

 

 

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. Trailer: Olá e bem-vindo. Meu nome é coddles soltos. Sou engenheiro e desenvolvedor da Web. Para estes nova classe, eu vou criar um menu de navegação dinâmica onde você pode ver todas as propriedades HTML CSS e caixa de linho. Se você está cansado de criar os menus de navegação típicos, então esta é a maldição ideal para você. Vamos fazer algo juntos que Bress é, e vamos surpreendê-lo, pensando que você está em um nível mais alto. Vamos criar, Transformar e faturar juntos um menu de navegação interativo e moderno que você pode aplicar em seus próprios sites ou negócios on-line, Então vamos começar. 2. Menu de navegação dinâmica / controle de imagem (parte 1) - Criação de layout: Olá. Vamos começar com este novo projeto, onde eu aplico modelo de pontos flexíveis e efeitos CSS para criar um tipo diferente de menu de navegação . O projeto foi projetado para ser uma praga, como o menu principal muitas vezes galeria de imagens, e para este exemplo, eu escolho um estoque. Você presentes mortos para Image Cities enterra Londres, Nova York e Madrid arquivos que eu f no meu Made Fuller di Di é usar quatro páginas diferentes para cada uma fora das cidades. E esta página que eu vou criar nos próximos minutos de trabalho como morte menu inicial pode ligar no futuro para as quatro páginas individuais. É apenas uma idéia possível para usar esta página, mas é claro que você pode usá-lo em muitas situações diferentes. Agora você vê o finalmente fora da página no irmão que foi projetado com a proposta melhor sobre um fora das seções, criando um efeito sobre a imagem e respectivos textos. Isto é apenas no quadro geral sobre o único lote que agora eu vou desenvolver. Eu começo primeiro com HTML frio. Isso é muito simples, onde eu tenho um recipiente e para itens flexíveis, dentro, dívida continha a imagem para cada uma das cidades. Então eu crio meu DIF com nome de vidro, recipiente e para ladrões, nome de classe de trigo Mame contendo e adicionando teg com o nome fora das cidades, começando com Berries, Londres, Nova York e, finalmente, Madri. Como você vê, código HTML é muito, muito simples. Agora. Tempo para CSS para criar os diferentes estilos, começando com revestimento CSS. Primeiro, eu defini o estilo para o recipiente de vidro que só precisa exibir propriedade com o valor flex que define este elemento como um recipiente flexível e permite que o contexto flex para todos os filhos diretos que estão dentro recipiente Dave agora criando o estilo para meus itens flexíveis. Primeiro, eu defini a largura e eu tinha propriedades toe tem o espaço ocupado por cada um dos itens flexíveis desde I F. Quatro imagens diferentes para ocupar. Semelhante com eu definir esta propriedade, com o valor off 25% das partes de vista para cada imagem fora por 1/4 fora das ervas daninhas para os olhos. Quero que cada sistema como alimentado por 100% das partes da vista, e então eu defino texto a linha que centralizaríamos valor para o texto dentro dos itens de flancos para ser central. No momento, é visível que não somos suas imagens nos itens de linho. Esse é o próximo passo onde eu vou usar então seletor filho para cada um fora dos itens flex e morte, uma imagem de fundo começando agora com flex Item um que é o meu primeiro filho. Eu usei para este elemento para imagem de fundo propriedade que recebe dentro que são l valor que está dentro do nome do arquivo correspondente à imagem de fundo sendo para esta primeira imagem item flexível Berries ponto j peg. Você vê agora que a imagem não aparece toda visível porque isso eu mencionei é muito maior do que a dimensão fora do item flexível. Para resolver esta situação, usei três propriedades diferentes em nossa classe principal. Primeiro, a posição de fundo que recebe o valor central para centralizar a imagem dentro do item flexível . Em seguida, o plano de fundo repete propriedade que é usada com o valor no repete que forçou a imagem a aparecer em Lee. E, finalmente, o tamanho do plano de fundo da propriedade com o valor cover Death redimensiona a imagem de fundo para dizer com a mesma dimensão fora do item flexível. Depois de adicionar essas três propriedades, você vê que a imagem de fundo já está completamente visível dentro dos primeiros elementos Lex . Vou agora executar o mesmo procedimento para os dois itens reflexos restantes. Primeiro, usando o seletor de criança final para o segundo filho, onde eu vou ter uma nova imagem de fundo desta vez com o nome fora de London dot jay Peak. A próxima imagem a ser inserida dentro do terceiro item flexível. Teremos uma imagem de fundo com o arquivo de Nova Iorque ponto j. Peg que agora é visível após Londres, Peg que agora é visível após Londres,imagens que você colocar dentro do segundo item flex e para terminar nós f r reflete item para onde eu tenho que arquivar com o nome Dodge de Madrid um peg para inserir dentro do respectivo item flexível. Em seguida, finalizamos esta parte fora do projeto com todas as imagens inseridas e com tamanho redimensionado corretamente usando algumas propriedades de fundo. 3. Menu de navegação dinâmica / controle de imagem (parte 2) - Layout de ajuste: O próximo passo é definido têxtil, bem sobre efeitos, a fim de redimensionar os itens flexíveis, começando com o texto que eu inseri dentro do Tex adição. Eu usei a linha que eu tenho propriedade que permite o alinhamento vertical nos testes. Se eu der um valor de 100% da parte de vista para esta propriedade, faz com que uma única linha ocupe todas as TIC, 15% de desconto na parte de vista para estar ocupado acima dos decks e os outros 50% fora da porta de visão abaixo dos decks. Se eu inserir um valor menor que 100% você verá que dext não será mais central. Então eu vou dar uma margem com o valor zero e usar cor de fundo para o meu ter que, como eu disse, ocupar todo o espaço fora do item flexível. Vou usar a propriedade de fundo com o RGB, uma função para definir valores de recebimento de cor entre zero e 2 155 para a árvore pará metros , respectivamente para 115 para rev. 145 para verde e 46 4 azul e o último oferta perímetro que define a opacidade do Golar que eu defini com três perímetros anteriores dando o valor 0,32 alfa. Depois de definir a cor de fundo étnico que ocupam todo o espaço fora do item flexível, Eu atribui valor branco para a cor das dívidas e uma família divertida, os Piras com o tamanho da fonte 15 pixels. Eu já defini completamente o meu título antes de ir para os efeitos sobre. Eu quero agora f um efeito sobre o meu elemento de adição que altera a cor de fundo para este evento. Eu usei sobre seletor toe afetar adicionando elementos usando novamente propriedade de fundo com RGB uma função desta vez com os valores zero zero zero que definiu a cor Bleck e valor Alfa 0.1, dando uma capacidade muito alta sendo visível, a mudança no fundo quando eu melhor sobre os itens flexíveis para ganhar essas partes, Eu usei a propriedade espaçamento letra com o valor fora pixels longe para aumentar tempero entre letras e para a transição off. Este efeito não ser muito rápido. Eu dou valor a um segundo para os efeitos de transição. Chegamos ao fim das mudanças para os efeitos de adição quando eu melhor milhas para terminar . Eu quero um efeito sobre que faz o item flexível, escreveu o seu. Falamos com 50% de desconto nas partes da vista para fazer essa mudança. Eu crio uma regra para a classe principal e quando eu passo sobre o item flexível, o trigo simplesmente muda para 50% de desconto na parte da vista. Como eu disse e eu aplicar um tempo de transição fora um segundo para esta situação mudança que acontece agora quando eu passar sobre um fora dos itens flexíveis. Neste ponto, eu tenho 99% do projeto então e você vê quando eu passar sobre quando a imagem, o efeito acontece com uma ligeira posição que não acontece quando eu parei de passar sobre o item flexível, fazendo a transição off flex item com jejuns muito acontecendo o mesmo com a linha que eu tenho fora da adição Quando retorna ao nosso valor adicional para contornar a situação, eu só tenho que definir o tempo de transição desigual quando o item flexível voltou para os primeiros estados onde não há mais efeitos que foi definido pela mina de explosão inicial para o item flexível com e situação semelhante com adição de estilo para definir esta transição, Eu simplesmente aplicar a propriedade de transição em nossa classe principal, com o valor fora de um segundo e mesma situação para o terminando, chegamos ao final do projeto com todos os efeitos criados, como esperado. Obrigado por assistir.