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âmico/de Imagem de acorde slider (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âmico/de Imagem de acorde slider (Parte 2) - Ajustando o layout: 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.
Luis Carlos, Engineer, Web Developer and Instructor
