Transcrições
1. Introdução: Oi, eu sou Aga e eu criei um super criativo classes CSS para você. Se você gostaria de se tornar um CSS Harry Potter, a hora é agora. Em meus exercícios você está indo para jogar com filtros
CSS, como tons de cinza, contrastes, saturação, mas também para aplicar realmente bom efeito rasgado zuo apenas em um par de linhas de código usando modos de mesclagem CSS. Se o seu curioso, bem, você pode fazer apenas com CSS para entrar no photoshop, ou outro editor de gráficos. Por favor, fique comigo. As aulas são destinadas a pessoas que já leram algumas linhas de código. Mas se você não está familiarizado com CSS, eu fortemente, recomendo que você assista minhas outras aulas. Adeus, vejo-te nas minhas aulas.
2. Ferramentas: Vamos falar sobre ferramentas que vamos usar nessas aulas. Primeiro de tudo, vamos usar nosso navegador favorito. Eu costumo usar o Chrome, também
podemos usar o Firefox. Vamos usar muito DevTools. O que são DevTools? Estas são ferramentas de desenvolvimento web, e são incorporadas diretamente em todos os navegadores. Gosto muito de usar DevTools no Chrome, mas talvez você tenha preferências diferentes. Vamos ver como podemos lançá-los e o que realmente está dentro. Temos o Chrome aberto, clicamos com o botão direito do mouse, “Inspecionar” e bang, temos as DevTools abertas no lado direito da janela. O que você pode ver aqui, é todo o código, HTML do nosso site está aqui, temos o site deste Skillshare aberto. Você pode apenas verificar qual parte do código é responsável pelo layout. Por exemplo, se você quiser descobrir no código onde a navegação
está, basta clicar nesta seta e navegar até ela. Agora, você sabe que este pedaço de código é responsável por renderizar a navegação. Aqui, temos estilos, que
possamos chegar ao arquivo CSS. Podemos voltar aos elementos, então nosso código HTML, e ver quais estilos são aplicados aqui. Por enquanto, pode parecer complicado, mas não se preocupe, vou explicar tudo passo a passo. Se você gostaria de ter esta janela em outra posição, você pode decidir se ela deve ser para baixo para a esquerda ou talvez deveria estar em uma janela separada. Também podemos abrir DevTools no Firefox. A regra é a mesma, clique com o botão direito, “Inspecionar Elemento” e você pode ver a janela do DevTools, que fazem parte do navegador Firefox Web. Novamente, temos o código HTML, temos CSS. Também podemos alterar a posição do DevTools. Por exemplo, arraste-os para a direita. Outra coisa que precisamos ter, é um editor de código. Eu recomendo que você use Atom. Você pode baixá-lo gratuitamente no site, atom.io e está disponível para macOS e Windows. Talvez como outros editores de código como Sublime Text. Sinta-se livre para usar o que se adapte às suas necessidades. Assumindo que vamos usar, navegador
web, DevTools e editor de código.
3. Filtros em CSS + exercício: Nesta lição, você vai aprender sobre filtros CSS. Os filtros CSS nos ajudam a obter efeitos como no Photoshop, como desfoque, ajuste de contraste ou mudança de cor. Os filtros CSS disponíveis são desfoque, brilho
, contraste , sombra, escala de cinza, rotação de tons, inverter, opacidade, saturar e sépia. Abra a pasta de filtros CSS e, em seguida, clique no índice HTML. Este é o site onde vamos fazer o exercício de filtro CSS. Temos as imagens que exigem um pouco de modificações, como modificação do brilho ou contraste, você pode se sentir livre para fazer o que quiser. Vou mostrar-lhe a minha maneira de melhorar estas fotos. Primeiro, vamos lançar as ferramentas de desenvolvimento. A maneira mais rápida é usar o atalho com
um teclado ou clicar com o botão direito do mouse para inspecionar. Como você pode ver, temos código HTML para o, para esses dois picos. E nós vamos aplicar filtros CSS. Estou escrevendo filtro, e digamos que eu gostaria de aumentar o contraste. Se eu digitar 1, isso significa que o estado não muda. Se eu escrever 1.1, isso significa que o contraste é aumentado em 10 por cento. Se eu escrever 0,9, isso significa que o contraste é reduzido em 10 por cento. Vamos aumentar o contraste em 20%, e gostaríamos de adicionar brilho, bem como aqueles que nada mudou. Mas vamos aumentar em 20 por cento. A foto está mais escura agora. Para colocar a imagem em uma vibração mais antiga, eu vou usar filtro saturado também. Vamos combinar todos esses filtros livres, e eu estou escrevendo saturar e gostaria de
aumentar a saturação em 30 por cento, digamos. Eu digitando 1.3. Como você pode ver, a imagem está melhorada agora. Talvez um pouco mais de saturação. Você pode ver agora que a imagem tem uma palavra de clave diferente. claro que podemos alterá-lo no Photoshop, mas no CSS é muito mais fácil se você ainda não tiver o Photoshop aberto. Vou copiar o código e colá-lo no editor Atom. Estou procurando o seletor esquerdo em CSS, estou colando,
salvando e consulte a página para que eu possa ver que a imagem [inaudível] são salvos. O que vou fazer agora é aplicar o efeito de pairar. Eu gostaria de ter esta imagem borrada porque é como
a imagem que está por trás da imagem com as ondas, então eu vou aplicar camada de filtro de desfoque. Para o desfoque precisamos definir o valor em pixels. Por exemplo, eu gostaria de ter a imagem borrada por quatro pixels e, ao passar o mouse, eu gostaria de desborrar a imagem. Vamos copiar o código e colá-lo em nosso editor Atom, em nosso arquivo CSS. E ao passar o mouse, então eu estou escrevendo agora a pseudo-classe, eu gostaria de ter os mesmos valores, então eu preciso copiá-los, não para redefinir e desfocar, zero. Vamos verificar o efeito. Estou atualizando a página e se eu passar o mouse, o borrão se foi. Você pode fazer toneladas de efeitos diferentes. Reproduzir pseudo-classes, brincar com filtros, com outras imagens. Eu recomendo fortemente que você vá ousado e experimente com eles. Sua lição de casa é aplicar filtros para esta imagem e para o fundo também. Para o fundo, funciona da mesma forma. Nós apenas aplicamos filtro, por exemplo, inverte 0,8 ou saturar 1,5. No próximo exercício, vou mostrar-vos alguma magia com filtro de sombra.
4. Filter de CSS: Esta parte vamos jogar com filtro Drop-Shadow. Para drop shadow, precisamos definir quatro valores. O primeiro é deslocado no eixo x, o segundo está no eixo y, terceiro é definir como o desfoque vai ser espalhado, então o raio de desfoque e o último é a cor. Agora confira a sombra na prática. Estamos abrindo a pasta de sombreamento e índice HTML. Este é o site onde vamos implementar o filtro de sombra. Vamos abrir ferramentas de desenvolvimento como sempre e aqui vamos aplicar filtro a esta imagem. Estou escrevendo filtro drop shadow e primeiro deslocamento em x. digamos, cinco pixels, deslocamento em y, digamos 10 pixels, o raio de desfoque, digamos, zero e a cor, por enquanto, vamos tentar com branco. Temos a sombra. O que é a coisa mais legal sobre drop shadow na propriedade filter é que ele realmente aborda a forma do arquivo PNG. Temos o arquivo que tem transparência. Temos a imagem que é cortada, você pode ver a forma da mão e as folhas e é melhor usar filtro porque aborda a forma. Se aplicarmos Box-shadow em vez disso, você verá que o efeito é um pouco diferente. Vamos escrever 10 pixels do deslocamento, 10 pixels do desfoque e a cor branca
também e você pode ver aqui o efeito é bastante estranho. Vamos comandar a transformação, para que ela não seja girada. A coisa é que box-shadow funciona apenas quatro caixas, por isso não importa se você tiver cortado a imagem e salvo no arquivo PNG, ele trata sua imagem apenas como o retangular; por isso, ele definiu altura e largura. Ele pode diferenciar as formas dentro da imagem. O que é legal sobre sombra de filtro é que ele realmente respeita isso Nós podemos ter combinações muito legais e efeitos realmente agradáveis. O que eu realmente gosto no drop-shadow é que nós também podemos usar RGBA, possamos mudar o canal alfa da cor, o que
significa que nós podemos mudar a transparência, então vamos ter cor preta, então é 000 e se você Assim, fechando. Temos a cor preta, mas se adicionarmos o quarto valor, que está no canal alfa, o canal de transparência, digamos 50%, você pode ver que há transparência acontecendo, o que é incrível. Talvez vamos ter 30 por cento e vamos borrar um pouco. Talvez não tanto assim. Talvez por cinco pixels. Talvez vamos ter um pouco nas partes inferiores da imagem. Isso é realmente interessante, na verdade, porque ele se parece com uma coisa 3_D, então seu site não é mais plana e você pode jogar muito com ele, graças à propriedade filtro drop shadow. Eu recomendo vivamente que você confira e aplique suas próprias idéias e soluções. A última coisa que eu quero mencionar aqui é que nós também podemos jogar com filtro drop shadow usando animações CSS. Como você pode ver, a coisa é muito simples, basta aplicar animação,
a animação quadro-chave que muda a posição de deslocamento para x e y. Se olharmos para o código, você verá que temos os quadros-chave, animações drop shadow ou para o primeiro quadro, teremos alguns tipos de valores e, para o último, aumentou o deslocamento para o eixo x e também a maior dispersão do desfoque. Estou realmente curioso sobre o que você vai conseguir misturando todas essas propriedades, como filtragem e animações, então deixe-me saber colocando seu trabalho na seção do projeto. A última parte desta classe é, vamos nos concentrar em modos de mesclagem CSS. É uma coisa super excitante. Então, por favor, fique comigo.
5. Modos de blend em CSS - introdução: Este é o momento de começar a jogar com modos de mistura. Os modos de mesclagem CSS nos permitem misturar elementos com os elementos por trás dele. Podemos usar o modo de mistura de mistura, onde misturamos o elemento e esse elemento por trás dele. Para o modo de mesclagem de fundo, definimos a mesclagem entre a imagem de fundo dos elementos e sua cor de fundo. [ inaudível] pode estar familiarizado com os modos de mesclagem. Por exemplo, no Photoshop, onde você pode aplicar esse amigo afeta na camada D. Por exemplo, podemos ter terapia ou modo de mistura de sobreposição ou luz de pino. Isso significa que nossa imagem da camada dois é misturada, é misturada, a camada que tem por trás dela. É por isso que podemos alcançar essas cores incríveis. Como você pode ver aqui, temos a lista completa dos modos de mesclagem disponíveis no Photoshop. A beleza do modo de mesclagem CSS é que temos o mesmo disponível em cores. Vamos verificar como CSS mesclar modos, palavras e práticas. Temos a imagem à esquerda. É uma simples etiqueta IMG. Estou aplicando o modo de mistura mista. O primeiro exemplo que queremos verificar como cor. Em seguida, temos queimadura de
cor, esquivar de cor, escurecer, diferença ,
exclusão, luz dura, matiz, que é muito louco, herdar para que não mude nada. Iluminação inicial, luminosidade, multiplicação, normal, sobreposição, saturação, tela, luz suave, desajustada. Podemos jogar com as cores, alterando a cor de fundo do pai desse elemento IMG. Vamos torná-lo azul e mudá-lo para exclusão. Teremos tal resultado. Para tornar o efeito mais forte, podemos aplicar escala de cinza adicionando filtro CSS. Graças a isso, vamos ver que as cores foram limitadas porque nossa imagem está agora em escala de cinza , então temos apenas os níveis têm cores cinza. No exercício à parte, vamos experimentar modos de mesclagem para criar o efeito de tom duplo. Você pode estar familiarizado com ele a partir do produto spotify.
6. Efeito de Duotone: Neste exercício final, vamos criar um efeito duotônico. O efeito mais fino que queremos alcançar com os modos de mesclagem CSS, é este que você pode ver à esquerda. Isso me lembra o efeito duotônico, conhecido pelo Spotify. Espero que esteja familiarizado com isso. Então vamos começar a fazer o experimento. Vamos abrir modos de mesclagem pasta duotone e HTML de índice Flash. É aqui que vamos implementar o efeito duotônico. Vamos abrir as ferramentas de Def e inspecionar o código. Há algumas coisas que precisam ser feitas, a fim de criar o efeito duotônico. Primeiro de tudo, vamos aplicar a cor de fundo ao contêiner, que é um pai de nossa imagem. No nosso caso, é seletor de imagem esquerda da classe de imagem. A segunda coisa é aplicar uma propriedade de modo de mesclagem de mistura à imagem, fazer a imagem em tons de cinza, e levar o resto de tudo para contrastar. Para maximizar o efeito duotônico é necessário ter a imagem em escala de cinza. A última coisa seria criar um pseudo elemento com uma cor de fundo, então teremos as duas cores misturadas. Uma cor que vai ser tirada do contêiner pai, e a segunda que vai ser tirada do pseudo-contêiner. Vamos aplicá-lo por cor vermelha. Digamos que queremos azul primeiro. É assim que vamos ver a cor azul, em vez disso. Agora podemos ver a imagem, vamos adicionar o modo de mistura de mistura, e como você pode ver, a imagem é misturada com o fundo azul. Mas agora também temos que criar a pseudo-classe. Primeiro vamos copiar o código e implementá-lo em nosso CSS. Então eu estou procurando o recipiente de imagem esquerda, Eu fiz em segundo plano. Estou adicionando o modo de mistura de mistura por enquanto. Podemos usar clarear, e também queríamos aplicar filtro, para fazer a imagem em tons de cinza. Estou escrevendo, filtrar a escala de cinza 1, e também podemos aumentar o contraste 30
por cento [inaudível]. Vamos atualizar a página, e você pode ver que você obtém o plano de fundo, podemos mudar, este é o plano de fundo no contêiner pai,
e o indivíduo tem o clarear, modo de
mistura de mistura aplicado, e um filtro em tons de cinza. Também podemos alterar o modo de mistura de mistura para qualquer outro. Eu vou sugerir ir ir com escurecer em vez de clarear, porque nós vamos usar o lighten para o pseudo elemento. Falando sobre pseudo-elemento,
vamos, naturalmente, precisar criá-lo. Estamos criando o pseudo elemento para o contêiner pai da imagem,
então, no nosso caso, é a imagem esquerda. Isto é como pseudo elemento parece, e é muito importante para definir o conteúdo, a
fim de ter o pseudo elemento gerado. Ele pode ser esvaziado, assim como eu fiz aqui,
e, claro, definindo o tamanho dele, então altura e largura. Temos a posição absoluta, Tab zero, esquerda zero, e agora podemos aplicar a cor de fundo. Estou apenas adicionando alguém, apenas um aleatório, e o modo de mistura de mistura. Como mencionado anteriormente, vou aplicar escurecimento. Então, vamos salvar e atualizar a página. Algo mudou. Alguém não foi a melhor escolha, então podemos tentar usar as cores dos amigos. Vamos ver qual imagem está aqui. Eu sugiro ir com um vermelho, para o recipiente pai, e para, depois de duas aulas, o azul. Desculpe por mudá-lo, isso é experiência. Depois que eu estou colando esta cor e para o recipiente pai vermelho um. Estou refrescante, e este é o efeito final. Claro, podemos tentar ser mais loucos com ele, e por exemplo adicionar tela, ou qualquer outro que se adapte melhor às suas necessidades. Mas é assim que basicamente você pode fazer o efeito duotone, misturando as cores do recipiente pai, com um pseudo elemento aplicado a ele.
Aga Naplocha, Creative coder & designer
