Por que o Box Shadow deve usar apenas RGBA

Enquanto folheava o <a href=” http://www.linkedin.com/home “target=”_blank”> LinkedIn </a> outro dia (agora, meses atrás), percebi suas” sombras “no menu de navegação principal foram criados com a cor hexadecimal <span style = “color: # 888;”> # 8888888 </span>.

Isso está errado por muitos motivos.

Uma sombra é criada a partir da falta de luz, Se não me engano, e # 888 (para fins de discussão, cinza), é uma sombra; uma cor.

Esqueça a discussão se é realmente uma cor ou não, não há fonte para produzir uma sombra cinza, apenas uma preta com presença de luz, tornando-a opaca.

O que estou querendo dizer é que, se você quiser lançar uma “sombra” adequada em algo, isso envolve transparência, não apenas cor / sombra.

Veja este Fiddle por exemplo: <a href=” http://jsfiddle.net/jakie8/dsMVn/1/ “target=”_blank”> Exibir em uma nova janela </a>

Antes de clicar na tela (no violino) e alternar para o vermelho do fundo, observe as sombras. Eles são tão parecidos, e é por isso que é fácil de f * car, porque quando você adiciona o elemento de cor (clique no fundo do fiddles agora, ele muda para vermelho), você pode ver que nossa sombra de caixa RGBA está sendo “projetada “como um bo $$ enquanto o nosso … bem, o Hex one permanece # 888.

Disse Nuff.

Nota: Desde que escreveu esta dica, o LinkedIn atualizou seu site, mas o ponto ainda se mostra válido.