Ajuda css shadow

scrub

Power Member
Boa tarde,

Preciso de fazer uma div com a sombra igual à da imagem.



Ou seja, em cima e apanhar um bocado dos lados. e o mesmo em baixo.


Só CSS :)

Alguma ideia?!

Obrigado.
 
Já tinha visto esse site.. agora tenho é que conseguir fazer com o efeito da imagem.

Era só para ver se alguém sabia de algum exemplo já parecido com aquele :)
Mas vou tentar fazer..

Obrigado pelo site ;)
 
Talvez com os pseudo-elements :before e :after consigas reproduzir o que pretendes.

Aqui tens um exemplo de como usar os referidos pseudo-elements em conjunto com a propriedade box-shadow. Tenta adaptar para o teu propósito.
 
Outra ideia, um bocado hackish, seria teres duas caixas por trás da principal, no topo e no fundo, e nessas é que punhas a sombra. Ou uma caixa mais pequena por cima, que escondesse a sombra no centro da caixa grande. Se calhar não ficava exatamente como no exemplo que deste, em que a sombra vai diminuindo à medida que se afasta dos extremos.
 
Foi como fiz.. Para já fica assim até arranjar outra solução. Mas assim está a funcionar perfeitamente.

A sombra vai diminuindo como eu queria porque usei perspective e transform nas duas divs que ficam por trás. Assim começa com os cantos de "fora" no sitio certo, mas os cantos de "dentro" mais para dentro, acabando por esconder a sombra. :)

Mas fica aqui o resultado. Está mais alta que a original, mas a ideia é essa :P . Mas como as sombras estão a usar percentagem fica sempre a bater certo...





Obrigado pela ajuda.. (para já) it's done!
 
A melhor forma será talvez fazer uma sombra com gradiente de "preto" para transparente e de volta para "preto", com rgba (não sei qual a cor da sombra, mas é mais ou menos isto..)
 
Back
Topo