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 . Mas como as sombras estão a usar percentagem fica sempre a bater certo... Obrigado pela ajuda.. (para já) it's done!
Creio que ficou uma boa solução. Tive uma ideia similar, mas estava a tentar ajudar, de modo a que apenas necessitasses de um div.
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..)