1. Este site usa cookies. Ao continuar a usar este site está a concordar com o nosso uso de cookies. Saber Mais.

Ajuda css shadow

Discussão em 'Web Development' iniciada por scrub, 19 de Fevereiro de 2013. (Respostas: 8; Visualizações: 881)

  1. scrub

    scrub Power Member

    Boa tarde,

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

    [​IMG]

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


    Só CSS :)

    Alguma ideia?!

    Obrigado.
     
  2. scrub

    scrub Power Member

    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 ;)
     
  3. ByMySlf

    ByMySlf Power Member

    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.
     
  4. scrub

    scrub Power Member

  5. nfk

    nfk Power Member

    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.
     
  6. scrub

    scrub Power Member

    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...

    [​IMG]



    Obrigado pela ajuda.. (para já) it's done!
     
  7. ByMySlf

    ByMySlf Power Member

    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.
     
  8. Zed_Blade

    Zed_Blade Power Member

    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..)
     

Partilhar esta Página