Curso de Design Responsivo Aula 08 Criando sessão da galeria de imagens

Nessa vídeo aula vamos criar a sessão da galeria de imagens, realizar a marcação e a estilização da sessão e das imagens, além de utilizar um filtro CSS nas imagens da nossa galeria.

O que é o CSS Filter?

A propriedade de filtro proporciona efeitos gráficos como desfoque, nitidez, ou a cor mudando um elemento. Os filtros são usados ??para ajustar a renderização de imagens, fundos, e bordas. Efeitos antes vistos apenas em programas como Photoshop.

Código HTML desenvolvido na vídeo aula

<section class="fundoVerde limpa">
            <div class="conteudo galeria">
                <h1>Quer adotar um cão ou gato?</h1>
                <p>Se você deseja ter um amiguinho fiel, companheiro e leal, não precisa pagar por um, pois um amigo não se compra! Amigo a gente ama, cuida e respeita. Amigo não tem raça, não tem pedigree. Então, procure um cão ou gato para adotar aqui.</p>
                <div class="caixa-g-3 caixa-m-6">
                    <img src="uploads/galeria1.jpg" alt="Galeria 1" title="Galeria 1">
                </div>
                <div class="caixa-g-3 caixa-m-6">
                    <img src="uploads/galeria2.jpg" alt="Galeria 2" title="Galeria 2">
                </div>
                <div class="caixa-g-3 caixa-m-6">
                    <img src="uploads/galeria3.jpg" alt="Galeria 3" title="Galeria 3">
                </div>
                <div class="caixa-g-3 caixa-m-6">
                    <img src="uploads/galeria4.jpg" alt="Galeria 4" title="Galeria 4">
                </div>
                <div class="caixa-g-3 caixa-m-6">
                    <img src="uploads/galeria5.jpg" alt="Galeria 5" title="Galeria 5">
                </div>
                <div class="caixa-g-3 caixa-m-6">
                    <img src="uploads/galeria6.jpg" alt="Galeria 6" title="Galeria 6">
                </div>
                <div class="caixa-g-3 caixa-m-6">
                    <img src="uploads/galeria7.jpg" alt="Galeria 7" title="Galeria 7">
                </div>
                <div class="caixa-g-3 caixa-m-6">
                    <img src="uploads/galeria8.jpg" alt="Galeria 8" title="Galeria 8">
                </div>
            </div>
        </section>

Código CSS desenvolvido na vídeo aula

.fundoVerde {
    color: #45D345;
    background-color: #009900
}
.galeria img {
    background-color: #008200;
    padding: 5px;
    height: 160px;
    -webkit-filter:grayscale(100%);
    filter:grayscale(100%)
}
.galeria img:hover{
    -webkit-filter:grayscale(0);
    filter:grayscale(0);
    -webkit-transition: all 1s ease;
    transition: all 1s ease
}

Utilizamos em nosso exemplo de galeria de imagens uma propriedade CSS Filter grayscale, existem outros que podem ser utilizados. O suporte para todos os navegadores ainda não é muito bom, mas, dependendo do seu público, você já pode usar a maioria sem problemas nos navegadores atuais.

Existem algumas observações interessantes sobre a aplicação dos filtros. Por exemplo, se você quiser combinar os filtros sepia() e grayscale(), certifique-se de adicionar sepia() antes do grayscale(), caso contrário o resultado será apenas grayscale().

Para saber mais informações sobre o CSS Filter ver exemplos clique no link abaixo

https://developer.mozilla.org/pt-BR/docs/Web/CSS/filter



Hospedagem Profissional de Sites