Jump to content
  • Revista PROGRAMAR: Já está disponível a edição #60 da revista programar. Faz já o download aqui!

claudiuh

[Ajuda] Ajuda com template

Recommended Posts

yoda

A sombra não se reproduz por CSS. O que tens a fazer é criar uma imagem com a representação da sombra (no teu caso podes criar uma imagem com 1px de altura e ao comprimento da sombra, uma imagem por cada um dos lados) e criar uma div para a apresentar. Não esquecer que opacidade só é conseguida com png's ou gif's.


#sombra_lado_esquerdo {
width: 10px;
height: 500px;
background: url(sombra_lado_esquerdo.png) repeat-y top left;
}

#sombra_lado_direito {
width: 10px;
height: 500px;
background: url(sombra_lado_direito.png) repeat-y top left;
}

Share this post


Link to post
Share on other sites
pwseo

Por acaso até se reproduz, mas só com CSS3 e actualmente com atributos específicos de cada browser (-moz-box-shadow e -webkit-box-shadow). O Opera suporta o atributo "final" box-shadow.

#content {
  -moz-box-shadow: 0px 0px 20px #000;
  -webkit-box-shadow: 0px 0px 20px #000;
  box-shadow: 0px 0px 20px #000;
}

Outra solução seria ainda utilizar imagens de fundo múltiplas:

body {
  background-image: url(shadow.png), url(gradiente.png);
  background-position: top center, top left;
  background-repeat: repeat-y, repeat-x;
  background-color: /* cor de fundo que continua o gradiente */
}

Obviamente, nada disto funciona no Internet Explorer... Mas é sempre bom saber que há maneira de o fazer dependendo cada vez menos de <div> extra com função decorativa :)

Share this post


Link to post
Share on other sites
jfosorio

Apenas gostaria de acrescentar que existe um método de especificar a opacidade de elementos de uma página com CSS e que é compatível com IE:

<style>

  .transparente{

      filter:alpha(opacity=10);    /* a opacidade pode ser um número inteiro entre 0 e 100 */

  }

</style>

<body>

  <div class="transparente">

       

  </div>

</body>

-------------------------------------------------------------------------------------------------

Comprimentos!


CSS 3D Text - Partilha mensagens em 3D com os teus amigos no Facebook!

Portal de Informática it4life - Emprego, notícias, fórum, comunidade.

Share this post


Link to post
Share on other sites
mjamado

Apenas gostaria de acrescentar que existe um método de especificar a opacidade de elementos de uma página com CSS e que é compatível com IE:

Não usar CSS que não é standard e sobretudo, não usar os filtros do IE.

Os filtros são avaliados de cada vez que a janela é redesenhada - isto é, um mero scroll chama os filtros. É uma pancadola na performance que até danças...

Para além do óbvio, claro - estás a usar CSS que não é standard, correndo o risco de não vir a ser suportado futuramente, e não ser, actualmente, em todos os browsers, ao contrário de CSS (2) standard.


"Para desenhar um website, não tenho que saber distinguir server-side de client-side" - um membro do fórum que se auto-intitula webdesigner. Temo pelo futuro da web.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.