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

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

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

Mensagem por Solkis em 27/11/09, 08:23 pm

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




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


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



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

Solkis
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 26/01/2008
Mensagens : 9983
Pontos Ativos : 12074

Ver perfil do usuário http://ajuda.forumeiros.com

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum