Criando backgrounds com sombra para sites

  • Publicado em: 22/12/2010
  • Revisado em: 19/12/2013
  • Categoria(s)HTML e CSS
  • Autor: Rodolfo
  • Newsletter: Inscreva-se

Nesta vídeo aula nosso colega Rodolfo irá explicar como criar e adicionar backgrounds com efeito de sombra em seu site. Por várias vezes nos deparamos com sites nos quais o fundo gera um efeito de sombra para o lado, dando a impressão de que o site está flutuando, pois então, é este efeito que você irá aprender nesta aula.

Depois de assistir esta vídeo aula, você será capaz de fazer fundos incríveis para seus sites, boa aula.

Para praticar você pode usar os códigos abaixo:

<div id="sombra">
<div id="wrap">
Todo o contedo do site deve estar dentro desta 'div'
</div>
</div>
#sombra{
width:940px;
background:url(images/bg.png) repeat-y;
margin:0 auto;
}

#wrap{
background:#FFF;
margin:0 auto;
width:900px;
}

Gostou da aula? Tem dúvidas? Participe deixando sua opinião!

Compartilhe esse post:

Sobre o autor

Rodolfo

Nascido em Barra Bonita Interior de São Paulo, aprendi tudo que sei sobre Web através de sites e fóruns, atualmente venho trabalhando com CMS como Joomla, Wordpress e Drupal. Também possuo conhecimento em padrões web como XHTML , CSS e PHP para CMS.

Comentários

Atualmente temos 4 comentários para este post. Participe você também, clique aqui e comente sobre o assunto.

  • Leandro comentou em

    amigo eu fiz tudo direitinho como vc fez na video aula porem so funcionou no IE no chrome e no firefox n deu certo

    tem alguma solução p isso?

    Responder
    • Olá Leandro, primeiramente obrigado pelo comentário. Verifique seus elementos CSS e imagem de fundo, pois como você pode ver, na aula é usado o Firefox para testes e funciona certinho. Verifique novamente seus códigos ou veja se não há algum recurso do seu navegador que está desabilitado e que esteja influenciando nisso.

      Responder

Deixe seu comentário