[TUTORIAL] Adicionar sombra em volta da estrutura do fórum

[Solkis]

Efeitos CSS

Com este tutorial iremos aprender como podemos utilizar recursos inovadores do CSS3. Veremos como podemos, sem fazer uso de imagens, adicionar uma sombra em volta da estrutura do fórum. Mas cuidado, este recurso não está disponível para o Internet Explorer e nem mesmo para as versões inferiores ao Mozilla Firefox 3.5.0.

--> Tutoriais, Dicas e Astúcias <--
Adicionar sombra em volta da estrutura do fórum

1º - Adicionar sombras no fórum:
Vamos começar primeiramente colocando as sombras nas bordas das paginas do Fórum, para isto terá de adicionar o código correspondente à versão do seu Fórum:

PhpBB 2

.bodyline {
-moz-box-shadow: 0px 20px 20px #CCCCCC;
-webkit-box-shadow: 0px 20px 20px #CCCCCC;
}

PhpBB 3

#wrap {
-moz-box-shadow: 0px 20px 20px #CCCCCC;
-webkit-box-shadow: 0px 20px 20px #CCCCCC;
}

PunBB

.pun {
-moz-box-shadow: 0px 20px 20px #CCCCCC;
-webkit-box-shadow: 0px 20px 20px #CCCCCC;
}

Invision

#ipbwrapper {
-moz-box-shadow: 0px 20px 20px #CCCCCC;
-webkit-box-shadow: 0px 20px 20px #CCCCCC;
}

Vermelho -> Irá definir a posição da sombra entre o lado direito ou esquerdo da página. Se o valor for positivo, será para a direita. Caso o valor seja negativo, será para a esquerda. Quanto maior for o valor, mais irá se expandir a sombra.
Laranja -> Irá definir a posição da sombra entre o lado de cima ou o lado de baixo da página. Se o valor for positivo, será para baixo. Caso o valor seja negativo, será para cima. Quanto maior for o valor, mais irá se expandir a sombra.
Violeta -> Esta valor representa a cor hexadecimal da borda.
Verde -> Pode modificar a qualidade da sombra. Quanto maior for o valor, mais spray ela ficará. Para que consiga compreender melhor, veja estas duas imagens, a primeira mostra quando o valor é zero e a segundo mostra como fica quando vamos aumentando:

2º - Adicionar o código à Folha de estilo CSS:
Terá de aceder à:
Painel de Controle -> Visualização -> Imagens e cores -> Cores -> Folha de estilo CSS

(clique na imagem para aumentar)

Deverá colocar o código, nesta página. Se já contém algum código, deve adicionar o código de sombreamento, assim como qualquer outro que adicione futuramente, depois do já existente.



3º - Resultado através de uma imagem:

(carregue na imagem para aumentar)

/!\ Como é muito variado os efeitos que se podem ser feitos com esta propriedade, decidimos somente explicar suas propriedades básicas, mais saiba que com uma busca na Internet poderá descobrir como criar sombras realmente surpreendentes!

---

© Fórum dos Fóruns

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: Adicionar sombra em volta da estrutura do fórum