Sombra - Drop shadow

Um retângulo vermelho projetando uma sombra sobre um fundo semelhante a madeira

Em design gráfico e computação gráfica , uma sombra projetada é um efeito visual que consiste em um elemento de desenho que se parece com a sombra de um objeto, dando a impressão de que o objeto está elevado acima dos objetos atrás dele. A sombra projetada é freqüentemente usada para elementos de uma interface gráfica do usuário , como janelas ou menus , e para texto simples. O rótulo de texto para ícones em desktops em muitos ambientes de desktop tem uma sombra projetada, pois esse efeito distingue efetivamente o texto de qualquer fundo colorido que possa estar na frente.

Uma maneira simples de desenhar uma sombra projetada de um objeto retangular é desenhar uma área cinza ou preta embaixo e deslocada do objeto. Em geral, uma sombra projetada é uma cópia em preto ou cinza do objeto, desenhada em uma posição ligeiramente diferente. O realismo pode ser aumentado por:

  1. Escurecendo as cores dos pixels onde a sombra é projetada, em vez de torná-los cinza. Isso pode ser feito com o alfa mesclando a sombra com a área na qual ela é projetada.
  2. Suavizando as bordas da sombra. Isso pode ser feito adicionando desfoque gaussiano ao canal alfa da sombra antes de mesclar.

As sombras projetadas inseridas são um tipo que desenha as sombras dentro do elemento. Isso permite que o elemento da interface apareça como se estivesse afundado na interface.

Usar

Os gerenciadores de janela de empilhamento desenham uma borda de janela ao redor das janelas, enquanto os gerenciadores de janela de composição desenham sombra projetada ao redor das janelas

Geralmente, os gerenciadores de janela que são capazes de composição permitem efeitos de sombra projetada, enquanto os gerenciadores de janela incapazes não permitem. Em alguns sistemas operacionais como o macOS, a sombra projetada é usada para diferenciar entre janelas ativas e inativas.

Os sites podem usar efeitos de sombra projetada por meio da sombra da caixa de propriedades CSS, sombra de texto e filtro. Os dois primeiros são usados ​​para elementos e texto respectivamente, enquanto o sombreamento filtra adicionalmente ao conteúdo do elemento, permitindo que ele suporte elementos de formatos estranhos ou imagens transparentes.

links externos

Referências

  1. ^ [1] , função de filtro drop-shadow (), Mozilla Developer Network