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

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

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

Mensagem por Solkis 27.11.09 22:23

Adicionar sombra em volta da estrutura do fórum
Com este tutorial iremos aprender como podemos utilizar recursos inovadores do CSS. 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. 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!

Adicionar sombra em volta da estrutura do fórum

Tutoriais, dicas e astúcias

Código CSS

CSS na verdade significa "Cascading Style Sheets", sua principal função é personalizar um determinado conteúdo exibido, em um determinado lugar na página. Cada versão de fórum (phpbb2, phpbb3, punbb, modernbb, awesomebb e invision) possuem uma classe diferente, e nessas classes podem ser adicionadas as “propriedades”. Caso queira conhecer alguns tipos de classes, poderá consultar mais informações no seguinte: Elaborar um código CSS

Painel de controle Seta Branca Visualização Seta Branca Imagens e Cores Seta Branca Cores Seta Branca Folha de estilo CSS

[TUTORIAL] Adicionar sombra em volta da estrutura do fórum Stylea10
[TUTORIAL] Adicionar sombra em volta da estrutura do fórum 110111Seta Salvar CSS- Salva todo o CSS em arquivo TXT em seu computador. Em outras palavras, permite criar um backup de seu CSS personalizado.
[TUTORIAL] Adicionar sombra em volta da estrutura do fórum 110210Seta Forçar CSS base do fórum - Força o CSS padrão da versão de seu fórum, ignorando o CSS personalizado. Caso queira verificar o CSS base d fórum, basta clicar no link "Ver CSS base do fórum".
[TUTORIAL] Adicionar sombra em volta da estrutura do fórum 110310Seta Desativar o CSS base - Desativa o CSS base da versão de seu fórum, e permite que somente o CSS personalizado do fórum opere em todo o fórum.
[TUTORIAL] Adicionar sombra em volta da estrutura do fórum 110410Seta Melhorar CSS - Com essa função ativa, a capacidade de carregamento da página é aumentada, facilitando a navegação nas páginas de seu fórum. Mas é importante lembrar que, para que a função funcione normalmente como prometida, você terá que adicionar o código correto na folha de estilo.

phpBB2

Código:
.bodylinewidth {
-webkit-box-shadow: 0px 20px 20px #e30000!important;
-moz-box-shadow: 0px 20px 20px #e30000!important;
box-shadow: 0px 20px 20px #e30000!important;
}

phpBB3, ModernBB e AwesomeBB

Código:
#wrap {
-webkit-box-shadow: 0px 20px 20px #e30000!important;
-moz-box-shadow: 0px 20px 20px #e30000!important;
box-shadow: 0px 20px 20px #e30000!important;
}

punBB

Código:
.pun {
-webkit-box-shadow: 0px 20px 20px #e30000!important;
-moz-box-shadow: 0px 20px 20px #e30000!important;
box-shadow: 0px 20px 20px #e30000!important;
}

Invision

Código:
#ipbwrapper {
-webkit-box-shadow: 0px 20px 20px #e30000!important;
-moz-box-shadow: 0px 20px 20px #e30000!important;
box-shadow: 0px 20px 20px #e30000!important;
}
-webkit-box-shadow: 0px 20px 20px #e30000!important;
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.

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

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

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

Resultado


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

Solkis
Membro Entusiasta

Membro desde : 26/01/2008
Mensagens : 9983
Pontos : 12071

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos