4.12.13

Explicando os básicos: fundos


Bom dia, leitores por-enquanto-quase-inexistentes >.< No post de hoje darei continuidade à sequência de posts onde explico com todos os pormenores os básicos de HTML, dando noções de várias formas de aplicar, explicando como cada parte do código varia e tudo o mais. Já falei de bordas coloridas - referindo também no mesmo post os cantos arredondados e a outline, porque considero espécies de bordinhas. Hoje falarei de algo que também acho importantíssimo, que são os fundos - ou background. Interessados?




Personalizando o fundo de várias maneiras:

Cor sólida:
  • Base do código»      background: #color;
  • Background»    Essa palavra indica a quê que a linha se refere, neste caso, ao background - para o caso de alguém não saber, significa fundo em inglês. Nunca usei, mas já vi pessoas a usarem para cores sólidas "background-color", então suponho que também funcione. www
  • #color» Vá a uma tabela de cores, e substitua pela cor que quiser. Já disse no post anterior que há 3 maneiras de representar cores, e todas funcionam:  por nome» DodgerBlue; por código Java» rgb(30 144 255); por código HTML (mais comum)» #1E90FF. Isso é a mesma cor. 
  • Nunca se esqueça do sinal de pontuação no fim (;)


Imagem:
  • Base do código»      background: url(LINKDAIMAGEM) repeat;
  • Background» Ok, a primeira palavra indica o que é. Se quiser com imagem, tem de dizer apenas "background", e nunca "background-color". www
  • url(LINKDAIMAGEM)» Aí, você vai substituir a parte que diz link da imagem pela url da sua. Como sabe? Pode hospedar num site de imagens, ou de forma mais fácil: insere a imagem na postagem, e copia a url clicando nela com o lado direito do rato. Cuidado para não apagar os parênteses! Ah, e há quem coloque o link da imagem entre aspas, dentro dos parênteses, mas não fazem diferença. 
  • Repeat» Se você quiser ocupar uma área grande, e a imagem não for um png, vai querer que se repita, então deixe como está. Se não quiser que se repita, então troque "repeat" por "no-repeat". www
  • Nunca se esqueça do sinal de pontuação no fim (;)

Com graduação de cores:
  • Base do código»   background: -webkit-gradient(linear, lugar1,lugar2, from(#cor1 ), to(#cor2)) 
  • A parte do background já foi mais que explicada.
  • Lugar 1 e lugar 2 - zona onde começa o gradiente (1) e onde acaba (2). Indico para lugar 1, left top, e para lugar 2, left bottom, que dará uma graduação vertical. Mas vá experimentando e vendo o que lhe agrada.
  • Relembro que: left»esquerda; right»direita; top»topo; bottom»baixo;
  • #cor1 e #cor2 - cor que começa o gradiente (1) e cor que termina (2). Vá buscar o código a uma tabela de cores normal.
  • Nunca se esqueça do sinal de pontuação no fim (;)  


Com imagem/minigif e cor:
  • Base do código»      background: #cccccc url(LINKDAIMAGEM) no-repeat;
  • Tudo o que eu disse para as imagens é válido para a parte do código que começa em "url", e a parte da cor, que vem antes, já expliquei acima. 
  • O efeito será semelhante a ver uma imagem sobreposta a uma cor. Faça a combinação que quiser.
  • Se quiser que o mini-gif ou o que for se repita horizontalmente, escreva, em vez de repeat, "repeat-X". Se quiser que se repita na vertical, use "repeat-Y". www
  • Nunca se esqueça do sinal de pontuação no fim (;)

Ok, está bem explicadinho? Acontece que você provavelmente não quer só mudar o fundo, pois não será ajustado na perfeição. Para ajustar, você precisaria de editar coisas como a margin e o padding, mas só o irei ensinar noutro post, por ser bastante complicado. Até já ;)



5 comentários:

  1. Muito bem explicado mesmo...
    Gostei muito do tuto.
    Esperando novas atualizações.

    ResponderEliminar
    Respostas
    1. Arigatou, eu esforcei-me para dizer tudo o que era possível. Vou tentar, a escola mantém-me bem ocupada, mas ainda assim espero nunca ficar muito tempo sem postagens novas :)

      Eliminar
  2. a explicação foi ótima! mais nao tive muito tempo para ler tudo =/ estou super ocupada,mesmo hoje sendo sabado >.< retribui a visita?

    http://toolovepandas.blogspot.com.br/ || Estamos te esperando! ♥

    ResponderEliminar
    Respostas
    1. Pois, realmente estendi-me um bocado, mas era para deixar tudo explicadinho... Ah, também ando ocupada, por isso não comento muito no seu blog, mas ainda assim eu visito várias vezes ;)

      Eliminar
  3. ~Nyahooo~
    Consegue explicar muito bem!!
    Nossa que lay lindooo *-* Sempre fui apaixonada pelos seus layouts, como o da Rin e do Len, foi quando conheci o blog e estava diwoo~ Continua viu ^.~ Eu não sei mexer muito com layouts, mas vou aprendendo lentamente e obrigada por disponibilizar muitas coisas aqui!! Amei o efeito nos afiliados *--------* Ani-Chii eu gostaria de pedir um tuto, posso? Sabe o mapa que você fez? Então eu gostaria de aprender como se faz para organizar as postagens em temas e tudo mais... Eu não sei T.T Poderia me ajudar?? Agradeço desde já!

    ~. Kissus de amoras .~

    ResponderEliminar