Filtros em imagens com CSS3, vídeo aula 75 HTML5 e CSS3

Neste vídeo vemos mais cinco tipos de filtros diferentes utilizando CSS3, o primeiro é transparência, depois saturação, hue-rotate, drop-shadow e inverter cores.

O que é hue-rotate?
Pelo o que eu entendi, hue-rotate é um circulo onde se encontram todas as cores, sendo 0deg a imagem atual e 360deg o valor máximo.

0deg é onde se encontra o vermelho, 60deg é onde se encontra o amarelo, 120deg onde se encontra o verde, 180deg é ciano (verde-água ou azul-piscina) onde seu hexadecimal #00FFFF, 240deg azul e 300deg magento, Magento é a uma plataforma de e-commerce open-source :).

Confira também nossa tabela de cores HTML: LINK.

Código fonte HTML:

            <figure class="filtro6">
                  <img src="imagem.png"></img>
                  <figcaption>Transparencia</figcaption>
            </figure>
            <figure class="filtro7">
                  <img src="imagem.png"></img>
                  <figcaption>Saturar</figcaption>
            </figure>
            <figure class="filtro8">
                  <img src="imagem.png"></img>
                  <figcaption>hue-rotate</figcaption>
            </figure>
            <figure class="filtro9">
                  <img src="imagem.png"></img>
                  <figcaption>drop-shadow</figcaption>
            </figure>
            <figure class="filtro10">
                  <img src="imagem.png"></img>
                  <figcaption>inverter cores</figcaption>
            </figure>

Código fonte CSS:

Assista ao vídeo:

Se estiver utilizando bloqueador de propaganda, por favor, coloque este site na lista branca (isto sempre será apenas um pedido). Obrigado pela escolha.