08/07/2013

Como usar o Box-Shadow

||

Yo bunnys eu disse que só voltaria daqui a umas semanas, mas não consigo. Então vim postar um pedido de postagem bem rapidinho. Me pediram para explicar como se usa o box-shadow e para que server, achei bem interessante afinal usamos o box-shadow em todo lugar do blog: colunas, tooltip, data, menus como em muitos outros lugares.

Gente como estou em viajem não sei se chegarei a tempo de fazer o sorteio na chegada de 1100 seguidores, mas assim que eu voltar faço sem falta. Então vamos a explicação do código?

Para o box-shadow não tem lugar exato, você pode adiciona-lo em qualquer lugar onde desejar que ele apareça. Se você sabe o básico de HTML vai facilitar bastante para achar determinadas partes como: sidebar ou widgets, área de postagens etc...

 O código do box-shadow é esse:

box-shadow: inset 0 0 10px #eee, 0 0 4px #ccc;
  
10px: sombra interna e tamanho da mesma
#eee: cor da sombra interna
4px: tamanho da sombra externa
#ccc: cor da sombra externa

Agora vou mostrar como adicionar na área das postagens. Procure por r .main-inner .column-center-outer {  ao achar abaixo dele cole o código do box-shadow. Agora para adiciona-lo em efeito de imagens ou menus faça o mesmo procure por ele e adicione o código. Apesar de eu já ter a base desse tutorial quero creditar o EAH porque peguei o código de lá, obrigada pela explicação Isa.

Bem vou terminando a postagem por aqui, espero que ajudem e tenham  gostado e que seja útil de alguma forma essa postagem, qualquer duvida é só perguntar, ate a próxima pessoal e bye bye

4 comentários:

  1. Mas o que seria o box-shadow? Por favor me responda, eu to confusa!
    www.moda-teensworld.blogspot.com

    ResponderExcluir
    Respostas
    1. box-shadow é para criar sombras internas e externas em elementos como menus e gadgets. Dependendo da cor e tamanho faz efeitos diferentes, como uso aqui nas caixas de comentários que faz um efeito bolinado ou de meus gadgets com sombras. Também pode usa-lo para varias outras coisas

      Excluir
  2. Oiee,bom dia!!
    como vai?
    Adoreeeeeei o seu post,muito lindoo *-*

    Saiu um novo post no meu blog,espero sua visitinha lá ^^
    http://gliter-lovely.blogspot.com.br/

    bjooooos ♥

    ResponderExcluir
    Respostas
    1. Ola, entendo obrigada. Faço sim pode deixar. bjus

      Excluir