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

[Solkis]

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 Visualização Imagens e Cores Cores Folha de estilo CSS Salvar CSS- Salva todo o CSS em arquivo TXT em seu computador. Em outras palavras, permite criar um backup de seu CSS personalizado. 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". 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. 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: Resultado

Se você tiver a respeito deste tutorial, queira criar um novo tópico com o título: Adicionar sombra em volta da estrutura do fórum