Qual é a melhor maneira de aplicar uma sombra?

Question

O que é o melhor método para aplicar sombras? Eu estou trabalhando em um site agora onde temos um bom negócio deles, no entanto, eu tenho lutado para encontrar o melhor método para fazê-lo. O local é bastante animação tão pesadas sombras necessidade de trabalhar bem com isso.

Eu tentei um pulgin sombra jQuery. As sombras parecia bom e eram fáceis de usar, mas eram lentos e não funcionam bem com as animações (lotes necessários de redesenho, muito joggy).

Eu também tentei criar a minha própria extensão jQuery que envolve meu elemento em um par de divs cinza e, em seguida, offsets-los um pouco para dar um efeito de sombra. Isso funcionou bem. É rápido e responsivo à animação. No entanto, ele faz a manipulação DOM / travessia complicada uma vez que tudo é envolvido nestes divs sombra.

Eu sei que tem que haver uma maneira melhor, mas isso não é exatamente o meu forte. Pensamentos?

Answer 1

ShadedBorder é uma boa aparência e fácil de usar Shadow-Library. verificá-la

Answer 2

Você não precisa quebrar essas-sombra divs em torno do outro conteúdo, basta-lhes definir um pouco torto e colocá-los em um z-index mais baixo -!)

Answer 3

Se o seu principal problema é navegar o DOM, basta adicionar uma classe e / ou ID para o seu elemento, e apresentá-lo com seletores jQuery. ainda melhor se você armazenar o árbitro em uma variável, para que você não precisa selecioná-lo com muita freqüência

Answer 4

Embora ainda é ter total apoio cross-browser, você pode tentar usar a CSS estabelecimento de 3 text-shadow .

Answer 5

Isso depende muito de quão freqüentemente suas imagens terão de ser mudando, e as áreas coloridas que eles vão fazer a cobertura. Porque eu estou supondo que você vai precisar para prestar atenção ao cumprimento IE6, a maioria das soluções de alfa-PNG fará com que tais agitado-ness horrível que você vai gastar mais tempo em optimzation desempenho do que você gostaria de ter de adivinhar.

Para resolver isso no passado, uma vez que as nossas imagens são modificados a menos de uma vez por mês, chamamos as imagens através de um script de cache de PHP que se aplica automaticamente a sombra usando uma cor de fundo pré-definida de modo que não tem que confiar em qualquer transparência. Isso resulta em downloads mais rápidos (menos solicitações HTTP) e um mais rápido interface porque há menos mágica Javascript / CSS em obras.

Eu entendo que esta é uma solução muito old-school, e as soluções acima seria inteiramente aceitável se as imagens eram estáticas, mas sendo compatível cross-browser e animado provavelmente vai forçá-lo a fazer uma solução deste estilo.