[TUTORIAL] Adicionar sombra no quadro dos artigos

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

TUTORIAL - [TUTORIAL] Adicionar sombra no quadro dos artigos Empty [TUTORIAL] Adicionar sombra no quadro dos artigos

Mensagem por Oto! 14.07.12 23:17

TUTORIAL - [TUTORIAL] Adicionar sombra no quadro dos artigos Generale  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)
TUTORIAL - [TUTORIAL] Adicionar sombra no quadro dos artigos Imagem10

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:
TUTORIAL - [TUTORIAL] Adicionar sombra no quadro dos artigos 27020110       TUTORIAL - [TUTORIAL] Adicionar sombra no quadro dos artigos 96056610

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

TUTORIAL - [TUTORIAL] Adicionar sombra no quadro dos artigos Act_bo11 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
Oto!

Oto!
Hiper Membro

Membro desde : 07/04/2011
Mensagens : 3363
Pontos : 4818

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