Eu tenho uma barra de navegação com guias onde gostaria que a guia aberta tivesse uma sombra para diferenciá-la das outras guias. Também gostaria que toda a seção da guia tivesse uma única sombra (ver linha horizontal inferior) subindo, sombreando a parte inferior de todas as guias, exceto a aberta.
Vou usar a box-shadow
propriedade CSS3 para fazer isso, mas não consigo descobrir uma maneira de sombrear apenas as partes que desejo.
Normalmente, eu cobriria a sombra inferior da guia aberta com a área de conteúdo (mais alta z-index
), mas, neste caso, a própria área de conteúdo tem uma sombra que acabaria cobrindo a guia.
Layout de guia
_______ _______ _______ | | | | | | ____ | _______ | __ | | __ | _______ | ______
Linha de sombra.
A sombra subiria a partir das linhas horizontais e para fora das linhas verticais.
_______ | | _______________ | | _________________
Aqui está um exemplo ao vivo:
Alguma ajuda aí, gênios?