Faça seu site se destacar com HTML, CSS e animações da Web

1. Introdução: você está olhando para um pouco de singularidade e individualidade em seu próprio site ou aplicativo Web em si? Então este é o curso para você. Oi, eu sou Sheila Brennan, uma fachada da web desenvolvedor. Nos últimos anos, houve muitos avanços nas tecnologias de navegador da Web que permitem mais criatividade e como os sites são bem projetados e desenvolvidos. Neste curso, vou mergulhar em várias técnicas que você pode usar usando apenas HTML e CSS para adicionar mais interesse visual em seu site. Recomenda-se alguma familiaridade com HTML e CSS, mas não é absolutamente necessário, pois vou estar explicando conceitos à medida que vamos. Este curso é ideal para freelancers dentro de hustlers que procuram construir experiências mais eficazes para os clientes. Embora as técnicas serão cobrindo são ideais para páginas iniciais e páginas de destino, eles poderiam ser facilmente aplicados em um site de bloco simples. Você está pronto para mergulhar e aprender algumas dessas técnicas? Então vamos começar 2. Introdução à CodePen: neste vídeo, vamos falar sobre lidar em, que será usado para o resto do curso. Se você já tem uma conta de caneta de código, sinta-se à vontade para pular este vídeo e Elsie no próximo. Se você não fizer isso, tudo que você precisa fazer é ir para lidar terminou Io Clique neste cadastre-se para o link gratuito, criando conta e, em seguida, você vai ser bom para ir. Vejo-te no próximo. 3. Gradientes de fundo: Neste primeiro vídeo, vamos analisar como você pode usar o Grady INTs de fundo para adicionar mais interesse visual às seções de sua página, alguém para começar criando uma caneta. E, em seguida, vamos rever algumas configurações de caneta. Eu vou estar usando estes durante todo o resto do curso para cada fêmea que eu vou fazer é neste meditando para que se eu terminar consultas de mídia no meu CSS para alterar várias propriedades como tamanhos de fonte, que será refletido com precisão na caneta. Se eu mudar meu navegador com para CSS, eu vou escolher esta opção normalizar para minimizar quaisquer diferenças entre navegadores e como as coisas renderizam e salvando perto. E então podemos começar em cada um para boca. Eu vou tirar proveito do auto completo de lidar em Aiken, basta bater período que sob a minha classe nome hit guia e ele vai auto completar. E então para cada tag, vai ser sair, e isso vai ser tudo para todo o html para esta primeira lição, e então eu vou estar adicionando um pouco de HTML. Estes estilos. Estes se aplicarão para o resto das lições também, modo que se eu crescer a tela com pelo menos 800 pixels para o porão vai ser aumentado 18 pixels, então todas as frentes na página vai crescer um pouco. E então vamos em frente e escolher uma fachada. Você pode puxar dentro e direto da companhia. Usando essas opções de ativos, você só vai clicar no tanque de link de cópia que eu realmente pré-selecionado frente a partir de telefones do Google . Tudo o que você precisa fazer é clicar, mais no que você quer, e então nesta gaveta, você copiará e colará a tag do link. Eu escolhi a calma e o tempo, então eu vou. Você vai colocar sua tag de link de escolha bem aqui. Está até perto agora. Nós podemos realmente em nossa família de frente para que nós vamos ver que a diversão apareceu. Não, também temos algumas fontes de fallback. E então vamos nos preparar. Nossas variáveis CSS estarão usando essas variáveis por todo o lado. O curso é, bem, é uma boa maneira de definir valores e, em seguida, reutilizá-los. Mas eu tenho você digitando a coisa toda de novo dessas maneiras, e eu tenho uma cor verde. Bem, eu vou usar RGB para as canoas marítimas, códigos hexadecimais como o branco que depende de você. E, em seguida, vamos começar a configurar a nossa seção de heróis, que é a única seção que será criar neste show vídeo 400 pixels homens com. E então vamos definir a cor de fundo para usar a variável que acabamos de criar Sweet. Ele funciona, e então nós vamos ter este ser um contêiner de grade e nós estamos apenas fazendo isso para layout . Vou te mostrar por que em alguns segundos também vamos adicionar uma consulta de mídia para que telas mais largas, vamos fazer o herói maior em termos de altura. Ok, então estamos bem lá. E agora, no nosso estilo de slogan, estamos no pé do Senado. Espere para que possamos realmente vê-lo. E então nós vamos definir um tamanho divertido e um peso de 400 apenas para que ele vai usar um negrito para todas as suas etiquetas de cabeçalho. Nós não queremos bolds para que você possa ler melhor o texto. E também estou ajustando o espaçamento das letras apenas por gosto pessoal. E então vamos definir margem de auto, que é uma maneira de fazer isso como um elemento de grade ser centrado. E isso parece bom. E então eu vou copiar esta consulta de mídia novamente, e eu vou aumentar o tamanho da fonte em telas mais amplas. Nós vamos para o cinco. Rim Ram é uma unidade relativa que estará usando que está levando esse tamanho de fonte base que definimos aqui em consideração. Ok, então agora nós vamos fazer é e em nosso radiante que está olhando um pequeno avião. Então nós vamos para uni usar CSS Cranie em Ohio. Você também pode usar este ano. Eu ponto com mais ganancioso é muito bom também. Você só não tem tanto controle sobre as cores. Então eu estou indo. Eu realmente pré ingrediente selecionado. Mas tudo que você vai fazer é criar as cores que você quer aqui para suas várias paradas sobre isso, e então você vai copiar e colar aquele radiante. Eu estou indo e no meu ingrediente para adicionar estes para a seção de heróis bem aqui. Certifique-se de soletrar direito, e teremos nosso primeiro ganancioso. E eu vou mostrar como você pode realmente colocar essas camadas adicionando em um segundo ingrediente. Você acabou de vir um separá-los? Então isso parece um pouco diferente, e então, mas ainda parece um pouco plano. Vamos adicionar uma imagem atrás disso. Eu pré selecionou esta imagem de unspool ash dot com. Estes são fáceis porque você pode usá-los sem ter que hospedar a imagem em algum lugar. Apenas certifique-se de anotar quais são as idéias sobre a imagem? Porque é assim que você vai usá-lo. E então vamos acabar com isso. Vamos lá, temos o teu L. E lá vamos nós. Podemos ver por padrão. As imagens de fundo serão repetidas. Vamos dizer para não repetir, e vamos colocar a cobertura lateral de fundo. E lá vamos nós. Podemos ver como é fácil colocar ingredientes Becker em cima de uma imagem para adicionar algum interesse e também torna o texto mais fácil de ler. Você vai ver se eu cortei o Grady INTs. É um pouco mais difícil ler o texto versus ter ingrediente lá, e também permite que você adicione elementos de sua paleta de cores nos ingredientes e tenha uma aparência mais uniforme na página. 4. Texto de heróis animado: neste vídeo, vamos falar sobre como podemos usar animações CSS e aplicá-las ao dedo do pé do texto da seção herói . Adicione um pouco de diversão e interesse visual. As animações CSS são uma maneira de fazer a transição de propriedades CSS entre dois estados diferentes. Você pode controlar se eles repetem várias vezes ou apenas executar uma vez se eles correm para frente ou para trás se eles têm uma função de atenuação especial, que basicamente é uma maneira de adicionar um efeito diferente. Por exemplo, de salto versus um fade in versus um ligeiro e, em seguida, também podemos definir uma duração que determina quanto tempo a animação será executada. E isso pode ser cinco segundos, um segundo ou entramos em milissegundos. Os quadros-chave são a magia que será configurada no CSS. Isso nos permite dizer ao navegador quais propriedades precisam estar em certos pontos da animação, e o navegador irá lidar com todos os valores médios que não estavam declarando diretamente. E você verá isso em nossa demo. Tudo bem, vamos começar com nossa caneta criada anteriormente, então estamos usando as lições anteriores concluídas trabalho onde temos ah sair do texto e a primeira coisa que vamos fazer é criar os quadros-chave que irão determinar como animar este texto, e podemos chamá-lo do que quisermos. Eu vou chamá-lo de “fade in up “porque ele vai nós vamos apenas estar usando uma mudança na opacidade e a posição do texto. Então isso é meio descritivo sobre fazer. E então eu vou apenas declarar alguns valores percentuais, modo que 0% o texto será oculto. E depois vamos transformar-nos de praia, o que é uma coisa muito poderosa em termos de animação. Você poderia fazer muito com transformar e encorajá-lo a ir para o índio é um grande recurso. Confira suas docas e eles têm um monte de bom exemplo lá também. Eu vou com uma tradução três D, que é coberto em sua documentação. Basicamente, só vou mudar a posição vertical do texto, por isso é muito simples. Então, para começar, temos o nosso valor de 0%. Depois, a meio da animação, vamos fazer uma ligeira mudança na opacidade. O texto vai ficar visível e eu vou t só pode transformar o valor zero. Nós vamos ir 20% lá e então eu só vou adicionar 100% de valor e isso é ir para o pesty com um. Então o Texas realmente visível, e nós não vamos fazer mais nenhuma transformação, então eu vou definir isso para nenhum. Então agora temos o nosso quadro chave de animação CSS configurado. Agora tudo o que eu preciso fazer é aplicar isso ao nosso slogan e é com você. Às vezes, estes são melhores. Só aplicou uma telas mais amplas, dependendo de onde o que você está fazendo com animação, para este exemplo, Eu vou apenas aplicá-lo todas as larguras de tela. Vou entrar no ponto por um segundo. Isso é nesta animação será executado para e, em seguida, alimentar-se. Esse era o nome do quadro chave que eu criei, e você já pode vê-lo entrando em vigor. E então poderíamos usar a temporada. Essa é uma das funções comuns de atenuação para usar. Então foi isso. Primeiro, vamos dar uma olhada. Vai correr para a frente. Não vai se repetir. Isso é só porque estou mudando os valores. É reexecutá-lo, e então uma coisa boa a fazer é que vamos fazer mais disso à medida que entramos em depuração e você pode ver. É uma boa maneira de se eu opção, clique no Mac ou clique com o botão direito e não inspecionar. Eu realmente posso cavar em quais meus valores são para a animação que Aiken alterá-los conforme necessário e você vai ver aqui eu posso mudar. Eu poderia apenas o Dewey. Se eu clicar sobre isso em ferramentas de cromo surdo, eu posso ajustar os valores em pré-visualização como eles parecem. Então, para este exemplo, eu vou ser um pouco mais chique e usar um cúbico ocupado uma função. Eu pré selecionei alguns valores, alguns magros. Copie isso e lá vamos nós. É um pouco mais sutil. Só recarregado. Dê outra olhada nele, e essa é uma maneira fácil de adicionar um pouco de interesse visual. Eu não usaria demais isso, mas para algo como uma página de destino ou um herói home page, é definitivamente algo a considerar usar 5. Formas de CSS: neste vídeo, vamos abordar como você pode usar formas CSS para adicionar interesse visual em como você faz o layout do texto . Você pode realmente usá-los para alinhar texto com uma forma para que o seu ter um olhar personalizado. Então vamos começar com o nosso HTML. Vamos dizer que é como se usássemos isso para uma seção de biologia de funcionários, então essa será a nossa principal atividade. E aqui dentro, vamos ter a etiqueta do artigo com a biografia real, e depois vamos ter o nome do empregado. Os são fictícios. Claro, você pode colocar o que quiser aqui dentro e então vamos ter uma foto de avatar , que é o problema. Vamos usar um formato CSS, mas vou tirar imagens deste site. Privado são ponto cc. Eles já têm imagens de pessoas que podemos usar. Eu estou indo em frente e selecionou alguns específicos onde você pode clicar nesta imagem é e navegar se você quiser ser específico em quais. Então eu vou usar o tanque de imagens e esta é a imagem 16. Eu também vou adicionar classe a isso para que eu pudesse estilizá-lo, e lá está a nossa Gina fictícia, e então eu vou fazer é adicionar uma etiqueta de enxerto de cabelo. Vamos adicionar algum texto, que vamos envolver a forma para que você possa colocar o que quiser aqui também. E vamos pegar outro parágrafo. É mais fácil ver este efeito se você tem mais texto versus apenas ter você não vai realmente ser capaz de vê-lo. Se forem apenas algumas linhas, tudo bem, e então vamos começar com nossos estilos. Nós vamos usar a placa é uma cor, e então isso realmente deve servir. Vamos terminar com nossa tipografia responsiva que fizemos no resto da turma até agora. Então o financiamento base será de 60 pixels, e ele vai crescer para este de fazer isso um pouco diferente, Hum, ou ajustar as fontes começando em 700 pixels, e nós vamos torná-lo 20 pixels, que é mostrando aqui agora porque eu estou em uma tela mais ampla com e, em seguida, podemos foi adicionar em nossa raposa próximo passo, você pode passar pelo processo de adicionar um Google Funt diretamente de lidar em como falamos sobre. Basta copiar o link tag. Eu pré selecionou uma frente do Google chamado Catamaran, então eu vou ter certeza de minha meta tag e, em seguida, disse Cameron aqui. E você também pode adicionar sua família de fontes como um CSS Muito negrito. Então definitivamente recomendo se você vai reutilizá-lo. Certo, agora temos catamarã carregando. Parece melhor, e eu também vou estar ajustando a altura da linha para os meus parágrafos. Está um pouco apertado agora. Isso é algo que você também deseja considerar ajustar uma consulta de mídia diferente. Você pode ter, ah, altura de luz mais apertada como um valor menor do Mobil. Ok, agora vamos trabalhar na biografia de nossos funcionários, e vamos definir o Max com para que eles não vão ser tão por quê e eu vou centrar isso que está sendo aplicado. Isso parece bom. E então adicionaremos nossos estilos biológicos empregados individuais para isso. É aqui que vamos começar a adicionar o que vamos inicialmente restringir a inteligência a 80% dos 1200 pixels. Então as coisas ficam ainda mais estreitas e também enviando isso e apenas o preenchimento inferior é bem marcado pela margem, porque eu vou adicionar uma segunda biografia e eu quero que eles tenham algum espaço entre eles. Então vamos reutilizar essa consulta de mídia de mais cedo este 700 pixels 1. E eu vou Teoh, ajustar a mistura com para que em telas mais largas, é ainda mais restrito apenas para manter o comprimento da linha razoável. As linhas pulmonares dos clientes são mais difíceis de vencer. Opa, eu quis dizer 50%. Ok. Ok. Então esta é uma parte de nós vamos adicionar CS interno, aquela ovelha. Tenho uma aula fotográfica aplicada à foto. Vou declinar uma largura nisso. E queríamos ser um círculo. Algo usou um raio de fronteira de 50%. Agora é um círculo, e então eu vou estar usando carros alegóricos aqui, que é uma técnica antiga. Mas eles foram ótimos para esse uso particular. E agora estamos flutuando para a esquerda. Você pode ver que o texto ainda está meio encaixotado em torno do círculo. Então vamos adicionar nossa forma CSS. Ela é uma ovelha fora do círculo e lá está. Podemos ver que o texto está agora alinhando muito firmemente com essa forma de círculo. Mas eu realmente queria ter um pouco de espaço para respirar, então eu vou adicionar, digamos, 25 pixels e isso está parecendo muito bom. E só para mostrar um uso repetido disso, vamos adicionar em um segundo funcionário, isso é totalmente com você. Acho que vai parecer mais completo. Estamos adicionando Ted. , Basicamente ,reutilizo a biografia. Tudo o que fiz foi mudar a foto e o nome no pronunciamento. Então você pode ver como você poderia definitivamente criar algo interessante com isso. E isso é algo que definitivamente vai funcionar. Está bem, sério. Navegadores antigos e não suportam isso também. Vamos ignorar isso para que pareçam mais. Eles só vão parecer quadrados, o que é totalmente bom também. Em termos de como o texto, aqueles se eles suportam raio de borda, ainda vê o círculo. Na verdade, não parece muito ruim, mas isso dá um pouco mais 6. Edds Angled de ângulo: neste vídeo, vou abordar como você pode usar bordas angulares em seções de sua página para adicionar algum interesse visual . Vamos estar usando alguns dos códigos da primeira lição da seção de heróis. Então, eu vou ter sido conhecido. Attagirl. E então eu vou para Teoh a mesma frente, o mesmo fundo do Google que usamos lá. E agora eu vou e meu mercado para a seção de heróis. Tudo o que eu fiz que é diferente como eu adicionei um cada uma classe bem, que será usado para styling. E, em seguida, vamos em frente e adicionar nossas variáveis CSS, que são as mesmas que usamos anteriormente em nossa resposta HTM consulta de mídia doente é tamanho de fonte bem baseado . Então isso é tudo a partir de mais cedo uma onda e vamos adicionar em nossos estilos de seção herói bem que usamos em que primeiro ouvir. Então agora temos algo aparecendo, o que é bom, e vamos adicionar nossos estilos H um que se aplicarão a esse slogan. Nós também queremos que isso seja esperar e nós não adicionamos nossos estilos de classe corporal ainda, então podemos fazer isso agora vamos estar configurando nossa fonte lá, que é insano que fizemos anteriormente também. E vamos usar outros títulos também. Então eu vou adicionar um pouco de estilo para aqueles que eu apenas mínimo Eu não quero, hum, margem superior sobre eles, já que isso vai afetar o layout. E enquanto eu sou aparece realmente dedo do pé, adicione todos os meus estilos de tags HTML na parte superior. Eu vou para este aqui para garantir que as imagens não excedam a nossa largura do navegador, que é algo que você verá em todos os lugares. É bom de usar. Certo, agora temos nossa seção de heróis. É uma grade de exibição como fizemos antes. Temos o nosso slogan. Vamos nos dar um pouco mais de espaço aqui, ok? Eu vou. Vamos usar um “H “duas classes. Bem, então eu vou e nos estilos. E então eu vou copiar os estilos de slogan que vêm da primeira lição também. Isso vai centrá-lo porque ele está usando seu filho de grade. E tem uma margem de auto aqui. Então, agora temos nossa primeira seção feita. E, em seguida, na próxima seção, que será nova, estaremos adicionando essas bordas angulares. Então eu vou copiar e colar um pouco de html só por causa do tempo. Para uma segunda seção, será a nossa loja e notei. Estou sentado na cor branca para que nem possamos ver isso. Ok, sim, nós já temos cor branca. Isso só se aplica ao slogan. E, em seguida, precisamos 1/3 seção apenas para que será um pouco a borda ângulo. Então eu vou adicionar uma terceira seção muito simples. Serão eventos que eu fiz puxando todas essas imagens de cinzas unspool. Então essa é uma boa opção, como eu mencionei antes. Então agora nós só precisamos adicionar são alguns styling para esta seção loja apenas para que possamos obter uma aparência mais realista de como isso iria funcionar. Então eu vou adicionar Nós estamos reutilizando um recipiente tive nesta segunda e terceira seção, e nós vamos em vez de misturado com para isso. Certo, já fizemos isso. Então eu vou adicionar alguns estilos para a seção da nossa loja, que é um pouco mais na segunda seção em que estamos trabalhando. Vou usar a posição relativa porque precisaremos disso mais tarde, assim como um índice C para as arestas angulares, então é por isso que está lá. Vou usar a posição relativa porque precisaremos disso mais tarde, assim como um índice C para as arestas angulares, E então vamos adicionar mais alguns estilos detalhados da loja. Isto é separado das bordas angulares, e não é é importante. Então, vou copiar isso para o bem do tempo. Você pode realmente colocar o que quiser nesta seção. Eu só estou fazendo um layout de três colunas com CSS Grid que é Onley um único cometas empilhados no celular e, em seguida, em 100 pixels ele vai para três vem e, em seguida, vamos adicionar em Nossos eventos seção é, Bem, não há muitos estilos para isso. Então, e você pode colocar o que quiser nesta seção é bem, apenas que Ah, terceira seção para ser capaz de mostrar com precisão as bordas angulares. E agora você pode começar a adicionar essas bordas quando eu vou estar usando é uma boa referência. Este artigo é sobre como fazer as bordas com transformações? Seus exemplos mencionaram SAS, que estavam apenas usando CSS, mas é a mesma abordagem geral que estes abordados aqui neste artigo. Ok, então nós vamos estar adicionando para adequar elementos para a seção de detalhes da loja, e isso é o que vai permitir essas arestas angulares então nós vamos para cima para armazenar detalhes, e é onde eu vou apenas copiar e colar isso em porque uma vez que um começar , porque é uma espécie de muito. E depois explicarei. Vamos enviá-lo de volta em cores inicialmente, embora para Branco. E então estaremos armando para ser alegações. E isso é para a borda difícil primeiro, e você pode ver que não é tão difícil de configurar. Por isso, às vezes, requer um pouco de finagle. O que está nessas seções, o valor superior que você pode precisar. Você ajustar, bem como a altura, mas o Vergis usando posição absoluta e o pai é posicionado em relação ea magia é torto. Então esse é o ângulo sendo aplicado 3,5 graus. E então vamos fazer a mesma coisa para aquela imagem inferior. Muito parecida. Nós vamos beber e, eles usam a mesma cor de fundo, e então a única coisa que vai mudar é que isso vai sentar lá embaixo porque estamos sentados no fundo do zero. Então está abaixo da borda inferior do que os pais, que é a div da nossa loja. Então agora temos nossas bordas anguladas e, em seguida, uma outra coisa que eu queria mostrar aqui é que você poderia realmente usar uma imagem de fundo. Isso é algo como um padrão de repetição e que também funcionará com a borda angular. Então eu vou adicionar isso em não e depois adicioná-lo a ambos os nossos pseudo elementos. E também vou adicioná-lo aos pais. Isto era algo que eu era capaz de gerar online. Há toneladas de geradores SPG Petr. Então isso é definitivamente eu acabei de perceber que eu tinha isso para a seção errada. Então é definitivamente algo para considerar usar, hum, procurar a nossa loja. E lá temos. Temos bordas anguladas que apenas como um pouco de extra. E é definitivamente algo que você pode fazer quando você está mesmo usando um padrão de repetição, você pode apenas se certificar de aplicar o mesmo padrão para você é também. Então processar elementos nessa seção e você está pronto para ir 7. Filtros de CSS: neste vídeo, vamos abordar como você pode usar filtros CSS para adicionar interesse visual no Photoshopped como efeitos todos os CSS. Então o HTML que estamos usando é muito simples. Só teremos a seção de heróis e é isso. Em nosso slogan será Explorer. E então vamos em frente e certifique-se de configurações de caneta como temos a resposta de tag minuto e eu vou adicionar a fonte para que eu pré-selecionei apenas um fundo do Google. De modo que em e que é para ensinar a cortar Muito simples. E eu vou adicionar a seguir são variáveis CSS realmente fazendo branco? Vai usar a abreviação. Se todos os caracteres são a mesma letra, você pode apenas digitar o primeiro 3 e então eu vou configurar. Vamos usar isso mais tarde como nossa configuração de filtro CSS. Vou usar um invertido de 20% que você verá mais tarde e como fizemos antes , vamos adicionar nossos estilos HTML. Eu também vou definir uma cor de fundo sobre o momento problema que é necessário devido ao bug com filtros CSS. Atualmente sobre o que eu vi seu cromo e Firefox. Então precisamos ter este Aker e conjunto de cores. Não pode ser transparente. Ok? E então nós vamos apenas adicionar nossos estilos corporais para isso. Nós vamos usar uma imagem de fundo pré-selecionada que você pode usar o que você gostaria estar puxando isso para dentro de splash como nós temos feito para já. E eu estou em um usado as propriedades de fundo cena que temos usado. Vamos arrumar isso. Ok? Não, acabei de perceber que estamos a duplicar isto. Eu não quero 100% de cobertura, e então nós vamos ter esta batida uma altura total da sua parte harmonias ah, 100 VH com apenas 100% da altura. E então vamos definir uma cor para o texto aqui esperar. E ainda não limpámos a nossa família principal. Então ele vai fazer isso agora, e isso também vai ser um item de grade, e então a única outra seção é o Nós somos a única seção desta página. Vai ser a altura total, e isso vai ser um recipiente flexível. Eu não vou apenas copiar e colar meus valores flexíveis para economizar tempo. É apenas configurá-lo na direção do pente e então nós também estamos, você sabe, centro em todo o texto. E porque o corpo é uma grade elementos podemos fazer margem de auto novamente para centro estão formigando. Então vamos fazer é e nos estilos de slogan eu vou com um peso não de 600. Vamos começar com o tamanho da fonte de quatro amigos para unidades relativas. Vou apenas o espaçamento das letras só por preferência pessoal. Tornar as coisas um pouco mais juntas. E então para telas mais brancas, vamos ter o slogan muito maior. Nós estamos indo para ir com 10 quartos. Boom! É grande. E, em seguida, o único da Itália definir o filtro. Então vamos definir o filtro CSS no corpo, Ted. Então dê uma olhada no que temos agora. Isto é sem filtros. Isto é apenas com o nosso estilo no lugar. É uma espécie de contraste e com o fundo tem um monte de cores escuras e depois esperar. E, em seguida, o nosso texto é puro filtro branco. Vamos fornecer nosso filtro invertido em azul. Esse é o resultado disso. Basicamente inverte as cores, mas apenas em 20%. Então é meio sutil, mas na verdade faz parecer mais coeso. E você poderia ajustar esses valores conforme necessário. Se eu abrir a depuração você em minhas ferramentas de desenvolvimento, essa seria uma boa maneira de dar uma olhada nesses valores, e você poderia brincar com outros filtros. Você poderia fazer grande habilidade. Então isso é tudo preto e branco que você poderia fazer. Há toneladas de casa, então eu definitivamente recomendo brincar com aqueles em ver o que você gosta no que parece bom vai realmente depender do que você tem na página, bem, para que você possa ajustar a opacidade. Há estes são muito poderosos, e eu ajudo você a dar uma chance e mostrar que estou fora. 8. Modos de mesclagem de CSS: e este vídeo, vamos analisar como você pode usar modos de mistura de mixagem em CSS para adicionar efeitos como loja de fotos e também será baseado no que fizemos na lista anterior. Então vamos começar a nossa configuração HTML. Vamos acabar com o responsável em uma tag, e eu vou usar os estilos baseados em cena como as lições anteriores. Então vai acabar em fundos e eu quero uma cópia e colar nos 20 bits de marcação que usamos porque isso é tudo o que vamos usar nesta caneta também. E vamos usar variáveis CSS semelhantes ao que fizemos antes. Vamos usar a espera. Nós também vamos usar preto este, e são misturados mistura baixa que será usando. Vamos enviá-lo para sobreposição. Mas há como com os abrigos. Há toneladas de opções e, depois, no final, darei a opção de aplicar o filtro que usamos nas lições anteriores. Teremos isso disponível também. Em seguida, podemos configurar nossos estilos html base que temos, mas temos vindo a usar para cozinhar peça que e semelhante aos filtros CSS. Na verdade, há um bug no cromo. Parece ser Crumb em Lee. Precisamos definir uma cor de fundo na tag HTML. Não pode ser transparente. Caso contrário, você não verá nenhum modo de mesclagem aparecer. Então é isso. Então eu vou reutilizar os estilos de corpo que usamos na lição anterior. Vamos usar a mesma imagem de fundo e também o mesmo estilo de herói. Então eu vou copiar faz neste recipiente bem ainda flex e, na verdade, com coloca implícito que é 100% com. Então temos o nosso herói, os mesmos estilos antes. E então vamos reutilizar o tigre em Styles, escritório Wells, copiar e colar. Isso é bom, e então para este, eu não vou colocar o texto no centro só porque para legibilidade os efeitos estavam se aplicando. Faz com que seja difícil ler em cima da sala dos fundos, então é por isso que é um pouco diferente do anterior. Ouça, e aqui é onde eu vou aplicar o modo de mistura mista. Ele vai para a seção de heróis, e é um pouco sutil, mas você pode ver como o fogo. Remova isso. Temos texto preto porque essa é a cor padrão do texto. E quando eu aplico o modo de mesclagem, ele começa a misturá-lo com o fundo. É tipo de efeito interessante, e há um monte de opções para isso é, bem, que você poderia jogar com. Se você entrar em modo de depuração, você poderia fazer inspecionar, e então você pode jogar com C. Nós dissemos é uma variável CSS para que você possa apenas brincar. Eu sinto muito. Isso é o errado. Queremos brincar com o humor de sangue misto para que possa ser mais fácil. Só disse diretamente aqui. Ok, tela de gravação de cor de tag conduzida e herói faz com que basicamente desapareça. O fornecimento de ouro parece muito parecido com o preto. Há muitas opções aqui, então é divertido brincar com isso. E depois a outra coisa que eu queria mostrar ao Waas. Se quisermos, também podemos aplicar esse filtro CSS que usamos na lista anterior. Dessa forma, você pode ver que você pode usar os filtros CSS junto com o modo de mistura de mistura ao mesmo tempo e obter ainda mais opções, e eu vou fornecer um link para caneta de código que eu criei onde você cantata ir entre os dois e definir diferentes combinações e ver como isso parece. E eu também queria mostrar que você poderia tentar sentar uma cor de fonte diferente se colocarmos branco aqui . Isso também é um efeito interessante em você pode ver como há como combinações ilimitadas você poderia fazer então eu definitivamente espero que isso é inspirado você a experimentar alguns destes para fora. Mesmo se você estiver apenas usando o filtro ou no modo de mistura de mistura individualmente, você ainda tem toneladas de opções, e é definitivamente pode fornecer um monte de interesse visual, então tente. 9. Bônus, animação SV, parte I: e esses próximos dois vídeos, vamos falar sobre o SPG e como podemos animar elementos de arquivos SPG com apenas CSS. Se você não estiver interessado em SPG, sinta-se à vontade para ignorar o Thies para considerá-los como vídeos bônus, e você pode ir para a próxima lição final depois disso. Então, o que é SPG? SPG é uma escala de gráficos eleitorais, e a melhor coisa sobre eles é que eles são nítidos em todos os tamanhos de tela, incluindo telas retina e telas não retina. Eles podem ser animados apenas com CSS como nós vamos dio. Eles também podem ser animados com JavaScript, e eles são até várias maneiras de usá-los. Você pode usá-los com a etiqueta de imagem Justin como uma imagem normal. Você também pode incorporá-los diretamente em seu HTML, que vamos fazer para dar mais controle sobre o estilo para que eles sejam bastante poderosos. E, a fim de criar Edit S P G, eu definitivamente recomendo software de edição vetorial como Adobe Illustrator ou há um monte de livre lá fora é bem, eu acredito escapar. Então sinto por você, dedo do pé, dê uma olhada em volta. Muito bem, vamos começar com a nossa fase um do nosso vídeo de ossos SPG e nesta primeira fase, vamos preparar os ativos que serão usados para a segunda fase quando os levarmos para Copan. O que vamos fazer é usar essa paisagem gratuita de Winter Mountain, P e G, e então vamos cortá-la um pouco, e um ilustrador criará uma AAP que fica em cima dela. E então vamos adicionar nossas estrelas e ilustrador. E então nós vamos trazer tudo no Copan e vamos animar estrelas. E como tudo é do mesmo tamanho, ele vai escalar para cima e para baixo com o navegador com dois. Então você pode baixar esta imagem daqui para começar. Eu já fiz isso. Vou criar um novo documento no Illustrator. Você pode usar qualquer software de edição vetorial que você tem. Eu vou usar 2000 pixels por 9 60 pixels longos para o meu documento, porque foi para isso que eu escalei a imagem na montanha. Mas você pode usar o tamanho do retângulo que quiser. Então eu vou fazer o arquivo. Vou trazer a imagem da montanha, e mostrarei como você pode criar a imagem diretamente aqui no Illustrator. Então eu vou fazer besteiras. Então ele vai selecionar automaticamente o que ele acha que eu deveria deixar cair. Mas vou anular isso. Vou acertar a fechadura para manter a proporção. Eu vou para 2000 pixels e acertar, aplicar, e então ainda é um pouco alto demais. Então eu realmente faço colheita novamente. É começar a selecionar automaticamente a partir de uma substituição. Isso e então eu fui desisolado esta proporção porque nós estávamos apenas indo esfregar espaço vazio agora. Então eu vou descer para combinar o tamanho da nossa prancha aproximadamente, hum e então nós vamos fazer aplicar. Então agora nossa imagem de montanha está pronta. A montanha. É bom nomear suas camadas. Vou levá-lo para o aeroporto. Então vamos criar uma nova camada para nossas estrelas. E primeiro, vamos criar um retângulo só para garantir que a camada de estrelas tenha as mesmas dimensões desta foto. Eu posso realmente digitar o alto aqui, e então o retângulo é criado, e eu vou apenas alinhá-lo com a imagem. E agora que temos isso realmente vai escondê-lo para que possamos ver o que estamos fazendo. As estrelas para as estrelas. Vou usar um preenchimento preto e um traço transparente. E então eu vou estar usando a ferramenta estrela, e eu vou estar criando estrelas em três tamanhos diferentes de estrela, como um sinal normal do zoom em sua Nós vemos melhor. Então isso vai ser como o tamanho normal. Em seguida, usaremos esses nomes de camada mais tarde para estilizar. Então, eu só estou chamando essa estrela. E então criaremos uma estrela ligeiramente maior que será o nosso tamanho médio. Vamos chamar esse prato de estrela e então vamos criar uma outra estrela tamanho uma maior. Ele vai chamar que começou, e então eu vou fazer é copiar e colar para criar mais destes. E manterei os mesmos nomes de camadas que usarão mais tarde. Se quiser continuar sozinho, sinta-se livre. Vou acelerar o resto do vídeo. Mas primeiro vou explicar como vamos exportar esses ativos para as estrelas que vamos fazer. Certifique-se de que temos o retângulo visível para fazer seleção de exportação de arquivo e, em seguida, temos o correto tem definido. Um parece bom. SPG é um formato e certifique-se que essas idéias de objeto dizem para estabelecer ganhos porque, caso contrário os nomes de camada não estarão no SPG. E precisamos disso para estilizar. E você vai fazer ativo de exportação e, em seguida, semelhante para a imagem da montanha. Se você cortou, você precisará exportar isso também. Podemos exportar para telas. Eu esqueci, Teoh realmente só quer começar alto as estrelas para que você não se confunda. Então fazer exportação de arquivo para telas e selecione nossa porta um que irá conter nossas montanhas. E PNG é o formato um X é bom e aeroporto de exportação. E agora vou continuar a criar estrelas. Então sinta-se livre para ficar assistindo. Você pode abrandar se necessário, ou eu vou vê-lo no próximo vídeo fase dois e estamos prontos. 10. Bônus: SVG: Tudo bem, agora estamos prontos para começar a usar nossos ativos na companhia. Só mais um passo que vou dar, o que é opcional. Vou otimizar meu SPG usando essa ferramenta on-line chamada SPG org. É livre para usar a única coisa que eu quero para ter certeza que eu não tenho caminho mesclado definido porque isso vai mudar. As estrelas subjacentes reais que queremos mantê-las são caminhos separados. Então, desde que você cozinhe fora, marque e pareça algo assim e você vê as estrelas aqui, você está pronto para ir. Vou baixar isso de lá, e então estaremos prontos para trabalhar na caneta dela. Eu já comecei uma nova caneta aqui, e eu adicionei no meditativo que temos usado. E eu também adicionei um roteiro de dança, que é um Google Funds. E eu adicionei, são estilos html baseados que temos vindo a usar, bem como este estilo de imagem responsivo. Apenas para garantir que a imagem seja dimensionada adequadamente e agora podemos trabalhar em nosso HTML. Vamos ter uma turma de herói, e depois vou ter um contentor para guardar as minhas imagens de herói. E então agora é hora de realmente usar esse SPG. Na verdade, vamos copiar e colá-lo inteiramente. Então eu vou abri-lo e controlar um ou como você escolher para um seleto tudo e, em seguida, copiar e, em seguida, colar. E a única coisa que quero fazer é adicionar uma classe de estrelas. E enquanto eu estou aqui quando você mudou o título para estrelas também e então eu vou remover este primeiro caminho, que era aquele retângulo porque nós não precisamos mais dele. Então nosso SPD está definido e nessa mesma div, eu vou incluir nossa imagem. Você pode se sentir livre para fazer referência aos links de caneta que eu forneci. Use a minha imagem se quiser ou puder. Se você tem co print pro conta, você pode fazer o upload de seu próprio arquivo diretamente para Copan. Caso contrário, você pode hospedá-lo em um serviço de imagem como cintilação ou ele pode até funcionar no Dropbox. Então eu vou estar usando o meu vamos ver o que eles fecham porcaria montanha. Então eu tenho o seu disponível Eu vou apenas colar aqui. É sempre bom enviar uma etiqueta de nota. Então agora temos as nossas montanhas e as nossas estrelas para que possamos começar enquanto estou aqui. Eu só vou adicionar o resto do HTML. É só um slogan. E agora terminamos com HTML. Além do que vejo, esqueci-me de acrescentar a nossa turma, que vai precisar do estilo dela na imagem que vai ser uma classe de montanhas. E agora nós definitivamente temos algum estilo para fazer. Primeiro, eu vou copiar e colar em algumas variáveis CSS que estarão usando incluindo nossa fonte. E agora podemos ir em frente e começar a adicionar em nossos estilos. Eu vou estar usando algum estilo que vai empilhar a imagem, ele, a imagem da montanha e nosso SPG Vai ser a posição lto. Vamos usar alguns valores de posicionamento margem esquerda de senhora de 100%. E esta é apenas outra forma de empilhar as coisas umas sobre as outras. Agora que podemos, nós vemos que eles estão empilhados e eu também vou criar alguns antecedentes sobre a seção de heróis , que será padrão para azul e próximo de eu vou Teoh Então que imagens de herói fez. Vou adicionar alguns estilos lá mais cheio de escondidos apenas para garantir que tudo se encaixa dentro que é o nosso recipiente cair dentro de zero apenas garante. Havia uma lacuna entre a imagem da montanha e a borda da porta de visão. Então isso se livra disso porque nós normalmente não podemos usar display preto, mas nós não queremos usar isso neste layout particular. Em seguida, eu vou adicionar por estilos de slogan e eu vou adicionar em algumas consultas de mídia apenas toe aumentar os lados porque ele está olhando um pouco pequeno na área de trabalho que está olhando bom. E então você pode ver que são SPG precisa de algum estilo. As estrelas ainda estão usando seu Phil escuro, e nós queríamos ser esperar para que pudéssemos usar a propriedade de preenchimento para mudar isso e altura de 100% e economizar. Ok, então agora é o ponto em que vamos adicionar em nossas animações estelares. Vou usar alguns quadros diferentes só para uma variação. Mas você poderia definitivamente apenas criar um desses e usá-los para todas as suas estrelas. Então este primeiro 1 é para as estrelas de tamanho normal, e está apenas mudando a capacidade em diferentes pontos da animação. Em seguida, as estrelas maiores terão estes quadros chave. Então, é apenas uma mudança de opacidade, mas apenas valores de propriedade ligeiramente diferentes em momentos diferentes. E então, para as estrelas médias, eu tenho até uma diferente. Então eu só queria adicionar muita variação, mas você definitivamente não precisa fazer isso. E então nós vamos adicionar as animações para que nós estamos usando esses quadros-chave. Então precisamos usar os atributos de dados e os seletores R. Então isso será para as menores estrelas. E eu vou para a loja de quatro segundos a chave de animação, francamente, estrela cintilante, vai ser facilitando para a flexibilização. Eu estou em um atraso ele começar para a primeira corrida para 0.2 segundos apenas para um pouco mais de variação. Vai se repetir para sempre, ir em direções alternadas e correr para trás. E lá você pode ver que já está fazendo efeito. E a cópia disso e nós vamos dio uma coisa semelhante. Mas para as estrelas médias, vamos com três segundos. É bom variar esses eventos apenas para um pouco mais de interesse. Só porque a natureza é também tem muita variação. Nós vamos com quatro segundos de atraso lá e nós não vamos usar o de trás para frente e então nós vamos cabeça são essas estrelas e eu vou usar dois segundos lá e isso vai ter os grandes, grandes quadros chave estrela. E também vamos retroceder sobre isso novamente, apenas para variação, e você pode ver que isso já está acontecendo. Agora eu estou repetindo coisas e parece bom, e há apenas um outro conjunto de quadros-chave que eu vou adicionar. E isso é para a seção de heróis, a cor de fundo. Decidi que também queria isso . Mudar. Vai começar com o azul que definimos, e então ele vai para um azul mais escuro e então um azul ainda mais escuro, e nós vamos aplicar isso na seção de encontrar nosso herói. Nós vamos usar o registro de preguiça em quadros chave, que eu acabei de criar. Vou definir uma duração de. Isso é algo que eu precisava. Você pode jogar com os valores com certeza. Eu vou com dois segundos de atraso se eu a primeira corrida talvez sair por um tempo, e então nós temos estado no lugar bem, e você pode ver como você pode fazer muito com essas animações sutis juntos. É algo muito único. Espero que isso inspire você a experimentar algumas animações com o SPG e definitivamente considerar colocá-las em camadas com um PNG para opções de estilo adicionais. 11. Considerações no site: e, finalmente, neste vídeo, eu queria abordar algumas considerações para ter em mente ao usar qualquer uma das técnicas que abordamos neste curso. Primeiro de tudo, algumas diretrizes para animações que você vai querer evitar adicionar em animações que interferem com a capacidade de seus usuários de interagir com seu site. Então, por exemplo, um site de bloqueio que você não quer ter alguma animação longa que está voando por toda a tela. Isso está tornando difícil para os usuários lerem suas postagens de sangue ou em sites de um varejista algo que vai tornar difícil para um usuário passar pela caixa flutuante. Você também vai querer definir suas durações de animação apropriadamente, então normalmente, isso seria meio segundo ou menos então algo curto que não vai ser executado para sempre e distrair o usuário e então, em termos de desempenho, as melhores propriedades para inimigo nossa capacidade e transformar aqueles dão o desempenho mais suave . E se você está procurando por mais informações sobre isso, eu vou fornecer alguns links e o recurso é em termos de estilos. Você deve ter certeza de que o texto é legível quando você tem muita coisa acontecendo por baixo do texto. Obviamente, há uma possibilidade. O texto não será tão legível. Então você quer ter certeza de ter sua cor de fonte, sua cor de fundo e qualquer granulado e fornecido em conta também. O Aziz. As cores da imagem que você está usando e a frente que você está usando Você deve considerar uso de uma ferramenta de contraste de cores ao selecionar a paleta de cores para o seu site. Isso incluirá cores usadas para fundos e para Fox, e eu fornecerei alguns links para isso também. E então, quando você estiver usando propriedades CSS mais recentes, incluindo modos de mesclagem de filtros CSS de grade CSS, será necessário levar em consideração o suporte do navegador que você pode usar. Posso usar o dedo do pé da dot org? Procure o que é o suporte do navegador e, em seguida, certifique-se de fornecer alguns recuo para os animadores mais antigos para que eles ainda tenham uma boa experiência. A Leslie. Você deseja otimizar suas imagens. Você pode usar a imagem Optima Fear no Mac. Você pode usar ferramentas baseadas na Web, e eu fornecerei mais alguns links. Certifique-se de que você dê esse passo extra apenas para evitar que seus usuários esperem para sempre baixar imagens enormes em seu site, e espero que isso tenha sido útil 12. Conclusão: você completou o curso. Parabéns e obrigado por participar desta aula. Espero que você vá embora com algumas novas técnicas que você pode usar em seu próximo projeto Web , onde você está olhando para um pouco de interesse visual para o projeto de classe, você vai levar duas ou mais das técnicas que aprendemos nesta classe e aplicá-los em seu próprio projeto Web. Além disso, estar fornecendo um lidar em que poderia ser usado como um ponto de partida se você não tem um projeto atual . Se você gosta que seu envio de caneta de código seja adicionado à coleção de classe que eu criarei no Copan, me avise. Obrigado novamente e vejo você na próxima vez.