PLAY
Últimos artigos
Página inicial
Compartilhar
Escrever artigo
Denunciar
Atalhos no teclado
Enviar feedback
Sobre a Wikiblogs
Voltar
Atualizar página
Sugestões de pesquisa
Carregando...
Start a Hangout
Iniciar um Hangout sobre essa página
Mudar o plano de fundo de um elemento

domingo, 29 de julho de 2012

Mudar o plano de fundo de um elemento

As vezes cria um efeito legal adicionar um background diferente em um elemento do seu site. Para isso existe vários códigos para perzonalizar como quizer. Imagine como vai ser a cor ou a imagem do background deste elemento, abra o bloco de notas e coloque o código abaixo:

Cada sesão da para ser personalizada conforme desejar e para isso siga com cuidado para não fazer errado. Em "background-color" você pode mudar a cor do plano de fundo. Em "background-image" serve pata adicionar uma imagem (sites como Facebook e Google+ usam esse código para protejer suas imagens, para usuários não fazerem o dowload delas). Em "background-position" você altera as coordenadas da imagem (se você que ocultar uma parte do background, use esse código para criar uma margem de topo e de esquerda da imagem). Em "background-repeat" como ja diz o código, serve para repetir a imagem, se que que repita, troque por "repeat" se quer que não repita, troque por "no-repeat". E finalmente "background-attachment" para mudar a forma como a imagem vai ficar visivel, se que que fique fixa ( no caso de ser o plano de fundo do site) mude para "fixed" e se não que esse efeito retire esse seção. As edições podem ser adicionado tanto por meio de style como de CSS.

Avançado

Uma forma interessante que achei ao vasculhar os códigos da Google para criar um efeit gradient (saiba o que o efeito gradient) e adicionar um código mais avançado, que pode demorar mais para editar por cada seção so funciona em um navegador. Para criar esse efeito adicione os ódigos abaixo ao bloco de notas:

Edite os valores das cores para melhorar o visual. OBS: cada código tem que ser igual para que usuários de diferentes navegadores posam ter uma mesma experiência. Observe que cada navegador tem seu código (webkit do Chrome, moz do Mozilla, o do Opera, ms eu não sei qual é e linear para outros navegadores não citados e se mesmo assim o navegador não entender exite o "backgroud-color" para ter uma cor). Outra dica bem legal para usar um background um pouco transparent, é usar o RGBA (red, green, blue, a...) certamente você ja viu isso no paint, Power point, Google docs que consiste em usar uma conbinação de treis cores para cirar uma nova, mais ou menso como acontece com a tinta guache. Para isso use:
backgroun-color: rgba(0,0,0,.4);

No primeiro "0" você muda o vermelho, no segundo você muda o verde e no terceiro o azul e no ".4" você muda a transparencia da cor. Os códigos podem ser adicionados por meio de style em DIV, SPAN, IMG, etc ou por meio de CSS.

Comentários

  1. Haha ' bb adoreei o Tuto *-*
    Vou usar no meu blog ;DD
    Bjim ~
    Visita?

    http://themyteenagedream.blogspot.com

    ResponderExcluir
  2. Oi! Sabpe,eu qiriia que vc fizesse um post pra personalizar o widget,pq eu preciso pro meu blog!

    http://best-for-teens.blogspot.com

    ResponderExcluir