[TUTORIAL] Adicionar sombra no quadro dos artigos

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

[TUTORIAL] Adicionar sombra no quadro dos artigos

Mensagem por Oto! em 14/07/12, 07:17 pm

 Adicionar sombra no quadro dos artigos

Para dar um efeito realistico no blog nós vamos adicionar um pequeno código CSS no que resultará em algo interessante. Vamos adicionar sombra ao quadro dos artigos de seu blog fazendo com que o mesmo ganhe destaque imprescionante!

--> FAQ'S e Tutoriais <--
Adicionar sombra no quadro dos artigos


- Edição expert com CSS:
Para que seja possível que o efeito torne-se real precisamos conhecer a função que vamos usar.Painel de controle ->> Multiblog ->> Tema personalizado ->>

(carregue na imagem para aumentar)

Agora vamos adicionar o código CSS para modificar o que desejamos.

- Código CSS e opção para modificar:
A variável ".post" indentifica o local em que será aplicado o efeito CSS.
.post {
border: 1px solid #98469B;
-moz-box-shadow: 0px 0px 10px #CCCCCC;
-webkit-box-shadow: 0px 0px 10px #CCCCCC;
}
Preto: Cor da borda do quadro dos artigos.
Ciano: Irá definir a quantidade da borda do quadro dos artigos.
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:
     

--> FAQ do Tutorial <--
Adicionar sombra ao quadro dos artigos



  • Existe outras variáveis para adicionar efeitos nas mensagens?
    ".post .content, .post .date" é uma das classes do termo de mensagem. Caso você queira usar os mesmos efeitos em outro local no blog, basta substituir o valor .post pela variável desejada.

  • Não sei geirr um CSS. E agora?
    Você poderá consultar mais informações no tutorial de elaboração de um CSS: Elaborar um CSS.




© Suporte Criarumblog

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
[Dúvida] Adicionar sombra ao quadro dos artigos
avatar

Oto!
Hiperativo

Inscrito dia : 07/04/2011
Mensagens : 3363
Pontos Ativos : 4818

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