CSS Image Effects

1. Introdução

O artigo "CSS Image Effects" explora técnicas modernas de CSS para criar efeitos visuais impressionantes em imagens, sem depender de editores gráficos ou JavaScript.

2. Efeitos Demonstrados

2.1. Efeitos Básicos

• Bordas Arredondadas:

  img { border-radius: 50%; } /* Circle */

• Sombra:

  img { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); }

2.2. Efeitos Avançados

• Máscaras CSS (clip-path):

  img { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); } /* Diamond */

• Filtros (filter):

  img { filter: grayscale(100%) blur(1px); }

2.3. Blend Modes (mix-blend-mode)

• Sobreposição criativa de imagens:

  .overlay { mix-blend-mode: multiply; }

3. Exemplo Prático: Efeito de Hover

.card img {
        transition: all 0.3s;
        filter: brightness(100%);
      }
      
      .card:hover img {
        filter: brightness(70%) sepia(50%);
        transform: scale(1.05);
      }