Entrar
Os membros mais ativos do mês
Nenhum usuário |
Quem está conectado?
Há 4 usuários online :: 0 registrados, 0 invisíveis e 4 visitantes :: 1 motor de buscaNenhum
[ Ver toda a lista ]
O recorde de usuários online foi de 23 em Seg Jun 08, 2020 3:43 am
Últimos assuntos
[TUTORIAL] Adicionar sombra em volta da estrutura do fórum
Web ASA Fórum | Oficial :: Geral :: :: Serviços Web Sites :: Suporte Forumeiros :: Forumeiros & Você :: Tutoriais, dicas e astúcias :: Scripts CSS
Página 1 de 1
[TUTORIAL] Adicionar sombra em volta da estrutura do fórum
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] | 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 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)
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
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)
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
/!\ 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: [Dúvida] Adicionar sombra em volta da estrutura do fórum |
Tópicos semelhantes
» [TUTORIAL] Adicionar fóruns à um widget
» [TUTORIAL] Adicionar um vídeo num tópico
» [TUTORIAL] Criar widget "Adicionar aos Favoritos"
» [TUTORIAL] Adicionar imagem no fundo do menu
» [TUTORIAL] Adicionar ícone Online / Offline
» [TUTORIAL] Adicionar um vídeo num tópico
» [TUTORIAL] Criar widget "Adicionar aos Favoritos"
» [TUTORIAL] Adicionar imagem no fundo do menu
» [TUTORIAL] Adicionar ícone Online / Offline
Web ASA Fórum | Oficial :: Geral :: :: Serviços Web Sites :: Suporte Forumeiros :: Forumeiros & Você :: Tutoriais, dicas e astúcias :: Scripts CSS
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos
|
|
Dom Jun 24, 2012 11:15 am por Alisson Silva
» [Re-Apresentação] Fábio
Sex maio 25, 2012 4:45 pm por Fábio
» PixelZIP ~ design&programção em só lugar
Sex maio 25, 2012 4:44 pm por Fábio
» Pedido de logo
Dom maio 20, 2012 10:06 am por Alisson Silva
» Kernel - Apresentação
Sáb maio 19, 2012 9:49 am por Alisson Silva
» [Galeria] Gabriel Schiavi - Atualizado (20/02 - !5:21)
Sáb maio 19, 2012 9:48 am por Alisson Silva
» HEBBO HOTEL 24 HORAS ONLINE !!
Sex maio 04, 2012 7:20 pm por Alisson Silva
» Pedido de Layout
Sex maio 04, 2012 5:23 pm por Fonsecca
» [RESOLVIDO]TV CCE HPS 2071-D (IMAGEM SÓ EMBAIXO, ACIMA, LINHAS DE RETRAÇO E FAIXA PRÊTA NO TOPO DA TELA).
Qua Abr 11, 2012 4:07 pm por Fry
» [contato] Deixo aqui meus contatos virtuais
Qua Abr 11, 2012 3:25 pm por Fry