21 março 2013

Como usar o Box-Shadow

| |

Olá ^-^
Eu fui ver minha Ask que estava meio que abandonada e vi um pedido de tutorial bem útil e interessante: como usar o Box-Shadow.

Neste layout atual, para todo o lugar que vocês olharem vão ver Box-Shadow: no jump-link (leia mais), na área da postagem, no tooltip, na navegação, na data, e em outros lugares.

Quem tem dificuldade, vai se surpreender pela facilidade desse tutorial.
Curioso? Então, leia mais ;P

Não há um lugar exato para usar o box-shadow (b:skin ou /* widgets), você pode usar em qualquer lugar que você quiser basta apenas ter conhecimento básico de HTML. Saber onde fica a área de postagem, coluna/widgets e outras coisinhas.

O código do box-shadow é esse {eu não peguei de lugar algum, é que de tanto usar eu meio que memorizei como se faz}:
box-shadow: inset 0 0 20px #eee, 0 0 4px #ccc;
20px é o tamanho da sombra interna #eee é a cor da sombra | 4px é o tamanho da sombra externa #ccc e essa é a cor.


Para colocar na área de posts, caso o seus posts sejam separados, aperte F3 e procure por .post-outer { e abaixo cole o código do box-shadow, visualize e pronto.

Agora se você não usa, aperte F3 e procure por .main-inner .column-center-outer { e abaixo cole o box-shadow abaixo.


Para colocar nos gadgets você precisa separa-los primeiro {tutorial aqui}, e depois no lugar de box-shadow: 1px 3px 15px 2px #ccc; no código de separação, cole o código que eu passei.


Agora que você já sabe o básico, você pode mudar as cores e aplicar no lugar que você quiser, só depende da sua criatividade.

Espero que esse tutorial tenha sido útil para vocês

9 comentários:

  1. O Box-shadow deixa um efeito fofinho no blog, adoro usar esse "recurso" está lindo o novo layout, amore, mas, não sei se é erro do meu navegador que faz com que os gadgets do cabeçalho fiquem fora do lugar :/ tirando isso, tá mó perfeição :D
    Beijo <3
    pqngarota.tk

    ResponderExcluir
    Respostas
    1. Aqui no meu pc Também esta algumas coisas fora do lugar , isso no pc , mas quando vou pro netbook esta tudo normal , . é problema no tamanho da tela , mas ja tentei mudar aumentar e diminuir , mas não arruma G_G

      Excluir
  2. ótimo tutu amei
    http://mr-kawaii.blogspot.com.br/

    ResponderExcluir
  3. Amei o blog, estou seguindo e adorei o tutorial! Beijos

    ResponderExcluir
  4. Não sei como usar ainda... Vou ler a postagem, mas já sei que vai ser útil.
    -Desculpa a demora, mas estava sem passar nos afiliados por um tempo.
    Rawn ●ω● @TSD

    ResponderExcluir
  5. Que divino esse novo layout, estou cheia de inveja >.<' Nem tenho palavras, perfeito demais!

    E esse Tutorial é super útil amei

    Adolescente Nerd

    ResponderExcluir
  6. Achei Lindo Seu blog primeira vez que venho aqui

    http://nosnocomputador.blogspot.com.br/

    ResponderExcluir
  7. Adoro o "inset", fica um efeito muito fofo! Adorei o tutorial! <3

    Beijos
    Too Kawaii

    ResponderExcluir
  8. Uma perguntinha: O que é Box-Shadow??E pra que ele serve??

    ResponderExcluir

« »