Faça tópicos usando o comando div!
Olá!
bem, como pediram no tópico que fiz ([Prévia] Kirby - Planet Robobot) vou mostrar como fiz toda aquela papagaiada com os fundos e tal
Primeiramente, saibam que tudo aquilo é a mesma "ferramenta", que é o comando div. Ele cria uma divisão na página, e essa divisão pode ser configurada de várias formas, como tendo cores, imagens, transparência, posição e por aí vai. Basicamente, o comando para fazer um div é simplesmente esse:
Algo muito importante é que como HTML usa tags, praticamente sempre que você abrir um div você deve fechar com um /div. Se não fizer isso, a página do fórum vai ficar toda bugada, com elementos como o avatar ou as barras laterais em posições diferentes. Então lembrem de sempre usar o /div após abrirem um div!
Mas não precisa fechar imediatamente, pois você pode colocar conteúdo dentro do div, e esse conteúdo pode ser até mesmo outro div. Mas tenham noção de que se algo foi colocado dentro de um div ele deve terminar ainda dentro do div, nunca fora. Exemplos de códigos corretos e incorretos:
Correto:
Incorreto:
Isso vale para qualquer outra coisa, como formatação de texto (centralizar, alinhar à direita ou esquerda, justificar), efeitos (sublinhar, negrito, riscar), tamanho das letras, cores e por aí vai. Se começa dentro do div, termina dentro do div. Se começa fora, termina fora.
Pronto, com isso já podemos começar então
O mais comum de usar são os fundos coloridos, e essa é uma função do div. Para fazer isso, basta definir no estilo dele a cor que vai usar, e como quer que seja preenchido. O estilo é definido ao se acrescentar um style="conteúdo", sendo conteúdo o que quer que vá definir como estilo. Importante: não se usa igual ( = ) dentro do conteúdo do style e sim dois-pontos ( : ), assim como sempre deve separar funções diferentes com ponto-e-vírgula ( ; ). Continue lendo e vai entender -q
Vou listar as funções que usei no tópico, com exemplos para verem como faz
Com isso foram todas as coisas que usei para fazer o tópico, além de prints e tipografias, além das tabelas para organizar as imagens. Espero que tenha ajudado, e quem tiver alguma dúvida, só falar!
Eu não conheço muito de HTML, então se tiver métodos mais fáceis que esses aí, ou outras coisas legais e souber, pode falar aqui que adiciono no tópico e coloco os créditos ^^
Lembrando que todas essa funções funcionam independente do fundo. Div são divisões, não precisa colorir necessariamente para usar uma dessas. Esse meu tópico inteiro está justificado usando essa função aí acima, mas sem criar um fundo colorido.
bem, como pediram no tópico que fiz ([Prévia] Kirby - Planet Robobot) vou mostrar como fiz toda aquela papagaiada com os fundos e tal
Primeiramente, saibam que tudo aquilo é a mesma "ferramenta", que é o comando div. Ele cria uma divisão na página, e essa divisão pode ser configurada de várias formas, como tendo cores, imagens, transparência, posição e por aí vai. Basicamente, o comando para fazer um div é simplesmente esse:
- Código:
<div>"seu texto"</div>
Algo muito importante é que como HTML usa tags, praticamente sempre que você abrir um div você deve fechar com um /div. Se não fizer isso, a página do fórum vai ficar toda bugada, com elementos como o avatar ou as barras laterais em posições diferentes. Então lembrem de sempre usar o /div após abrirem um div!
Mas não precisa fechar imediatamente, pois você pode colocar conteúdo dentro do div, e esse conteúdo pode ser até mesmo outro div. Mas tenham noção de que se algo foi colocado dentro de um div ele deve terminar ainda dentro do div, nunca fora. Exemplos de códigos corretos e incorretos:
Correto:
- Código:
<div> [img]url da imagem[/img] </div>
Incorreto:
- Código:
<div> [img]url da imagem </div> [/img]
Isso vale para qualquer outra coisa, como formatação de texto (centralizar, alinhar à direita ou esquerda, justificar), efeitos (sublinhar, negrito, riscar), tamanho das letras, cores e por aí vai. Se começa dentro do div, termina dentro do div. Se começa fora, termina fora.
Pronto, com isso já podemos começar então
O mais comum de usar são os fundos coloridos, e essa é uma função do div. Para fazer isso, basta definir no estilo dele a cor que vai usar, e como quer que seja preenchido. O estilo é definido ao se acrescentar um style="conteúdo", sendo conteúdo o que quer que vá definir como estilo. Importante: não se usa igual ( = ) dentro do conteúdo do style e sim dois-pontos ( : ), assim como sempre deve separar funções diferentes com ponto-e-vírgula ( ; ). Continue lendo e vai entender -q
Vou listar as funções que usei no tópico, com exemplos para verem como faz
- Fundos Coloridos:
A função que dá cor ao fundo é a "background-color", e você pode colocar de 2 formas: através do código de cor hexadecimal (como: #FFFFFF; por exemplo) ou pelo RGB, o código de cor com a quantidade de Vermelho, Verde e Azul na cor (que fica assim: 255, 255, 255; por exemplo). Eu acho mais fácil usar pelo hexadecimal, já que é o sistema de cores do fórum, então vamos lá! Assim é como fica um fundo colorido usando a cor amarela (#FF9900):teste
- Código:
<div style="background-color:#ff9900;">teste</div>
Mas como assim fica meio feio, já que o fundo fica no mesmo tamanho do texto, podemos usar oura ferramenta: o espaçamento.
- Espaçamento do texto:
Padding é o espaço que vai existir entre o fundo e o texto, e ele é definido em px (pixels). Para usar é só escrever isso no style e o quanto de pixels você quer que tenha no afastamento (lembre que ele vai levar em conta todos os lados, então se colocar muitos pixels o fundo vai ficar enorme!).teste
- Código:
<div style="background-color:#ff9900;padding:10px;">teste</div>
como é uma função nova, separamos da outra por um ponto-e-vírgula, mas tem que continuar dentro do style para funcionar.
Aqui alguns exemplos de paddings de tamanhos maiores e menores:5 pixels7 pixels12 pixels15 pixels20 pixels
Agora deu para notar a diferença, né? Podem ir testando até conseguir uma quantidade confortável, mas eu normalmente coloco entre 5 e 15 pixels, dependendo de onde o div vai ficar.
- Cor do texto:
E se você quiser usar um fundo escuro, e a fonte ficar ruim para ler? Então você pode mudar a cor com outra função, chamada color. Segue a mesma ideia do background-color que vimos antes, então só escolher uma cor e colocar!teste
- Código:
<div style="background-color:#ff9900;padding:15px;color:#009900;">teste</div>
Entretanto, a cor padrão de fonte no fundo não vai necessariamente impedir outras cores de serem usadas. Ele vai definir a cor para toda letra que não tem uma cor definida, mas se ela já tiver uma cor vai mantê-la. Por exemplo:teste teste
- Código:
<div style="background-color:#ff9900;padding:15px;color:#009900;">teste [color=#0033ff]teste[/color]</div>
a parte em azul tinha uma cor definida, então ficou azul mesmo com as letras do fundo sendo verdes. Caso mude uma cor, a outra não vai ser alterada. Com isso é bem mais fácil lidar com textos que tem palavras coloridas dentro de um texto em cor padrão já definida, sem ficar dando bugs
- Formatação de Texto:
Caso você vá digitar muito texto dentro do fundo e quiser modificar a formatação dele sem precisar mudar toda hora, pode mudar isso no div também, usando a função text-align. Ela é muito útil para adicionar uma formatação padrão, além de não ignorar formatações colocadas depois dela. Por exemplo:testetestetestetestetestetestetestetesteteste
testetestetestetestetestetestetestetesteteste
testetestetestetestetestetestetestetesteteste
testetestetestetestetestetestetestetestetestetestetestetestetestetestetestetestetesteteste
- Código:
<div style="background-color:#ff9900;padding:15px;text-align:right;">testetestetestetestetestetestetestetesteteste
testetestetestetestetestetestetestetesteteste
testetestetestetestetestetestetestetesteteste
testetestetestetestetestetestetestetesteteste
[left]testetestetestetestetestetestetestetesteteste[/left]
</div>
Para cada formatação fica um nome diferente, sendo assim:- Texto à direita = right
- texto à esquerda = left
- texto centralizado = center
- texto justificado = justify
Basta colocar um desses nomes após o text-align e o texto dentro daquele div ficará formatado corretamente.
- Bordas:
Essa é outra ferramenta interessante, já que nem sempre fundos retos ficam bonitos. Usando a função border-radius você define o quão arredondadas serão as bordas, em px (pixels), assim como com o padding. Um exemplo:teste
- Código:
<div style="background-color:#ff9900;padding:15px;border-radius:5px;">teste</div>
Quanto maior a quantidade de pixels no border-radius, mais arredondadas serão as bordas. Exemplos de tamanhos de arredondamentos:7 pixels10 pixels12 pixels15 pixels20 pixels
Só ir testando o tamanho que achar melhor antes de colocar
você pode definir qual borda apenas vai querer que fique curvada, definindo pela posição. Só ao invés de colocar apenas 1 número com o tamanho da curvatura, você vai colocar 4. Como assim? Olha o exemplo:teste
- Código:
<div style="background-color:#ff9900;padding:15px;border-radius:5px 0px 10px 20px;">teste</div>
o 5px definiu a curvatura da esquerda superior, o 0px definiu a curvatura da direita superior, o 10 definiu a da direita inferior, e o 20 da esquerda inferior. Ele roda em sentido horário
- Fundos com imagens:
para usar imagens no fundo você vai usar 2 comandos novos: ao invés de definir uma cor para o fundo, você vai definir uma imagem com background:url("url da imagem") e como ela vai ficar posicionada. Se for um padrão, você deve repetir a imagem várias vezes, usando background-repeat definindo o eixo em que ele vai se repetir (x, y ou ambos).
Eu usei no tópico a imagem acima como padrão para o fundo, sendo que a fiz no Photoshop. Caso queira um basta procurar no google (é melhor procurar por background pattern, aparecem muitas imagens boas) ou então tentar fazer por conta própria, mas preste atenção para ficar simétrico!
Usando em um fundo, então, ficaria assim:teste
- Código:
<div style="background:url(http://i.imgur.com/8PryM7l.jpg);background-repeat:repeat-xy;padding:15px;">teste</div>
- Fundos transparentes:
Esse na verdade é só uma variação do fundo colorido, mas deve utilizar o outro formato que tinha mostrado, de cor em rgb. A função é background-color:rgba(0, 0, 0, 0.0);, sendo os 3 primeiros 0 a escala de vermelho, verde e azul respectivamente, e o 0.0 é a transparência, que vai varia de 0.0 (que é invisível) a 1.0 (que é opaco). Para saber essa escala de cor você terá que ver em algum programa de edição de imagens, nas configurações da cor, mas até no paint dá para fazer isso.
No tópico usei um azul-cinzento que tem como código r=68, g=140 e b=203. Vou colocar em 0.5 a transparência, olhem como fica:teste
- Código:
<div style="background:url(http://i.imgur.com/8PryM7l.jpg);background-repeat:repeat-xy;padding:15px;"><div style="border-radius:10px;background-color:rgba(68, 140, 203, 0.5);padding:15px;">teste</div></div>
Notem que nesse eu coloquei um div dentro do outro, para poderem notar a transparência. O de fora é o fundo com imagem, e o de dentro é o fundo transparente, dando a impressão que é uma caixa de texto.
Você pode variar a opacidade do fundo alterando o 0.0, como no caso que coloquei aí ficando em 0.5. Teste as várias possibilidades de cores e opacidades para ficar como quiser o/
Algumas amostras de opacidade:10% de opacidade30% de opacidade70% de opacidade90% de opacidade100% de opacidade
- Imagens Flutuantes:
Por fim, as imagens flutuando no meio do texto. para fazer isso é bem simples: basta colocar a função float. Ela faz com que a imagem ocupe um espaço determinado, e realoque o que ficava lá para outro local sem bagunçar. Um exemplo:teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste
teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste
teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste
teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste
teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste
teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste
teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste
teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste
teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste
teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste
teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste
teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste
teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste
- Código:
<div style="background:url(http://i.imgur.com/8PryM7l.jpg);background-repeat:repeat-xy;padding:15px;">teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste
teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste
<div style="float:right;">[img(150px,128px)]http://i.imgur.com/Eji2SxB.png[/img]</div>teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste
teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste
teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste
teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste
teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste
teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste
teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste
teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste
teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste
teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste
teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste</div>
para determinar a posição da imagem, basta dizer onde ela tem que ficar no float: left ela vai para o canto esquerdo e right para o canto direito. Isso é bom para utilizar como uma espécie de diagramação do tópico, deixando as imagens juntas do texto de forma mais dinâmica.
Com isso foram todas as coisas que usei para fazer o tópico, além de prints e tipografias, além das tabelas para organizar as imagens. Espero que tenha ajudado, e quem tiver alguma dúvida, só falar!
Eu não conheço muito de HTML, então se tiver métodos mais fáceis que esses aí, ou outras coisas legais e souber, pode falar aqui que adiciono no tópico e coloco os créditos ^^
Lembrando que todas essa funções funcionam independente do fundo. Div são divisões, não precisa colorir necessariamente para usar uma dessas. Esse meu tópico inteiro está justificado usando essa função aí acima, mas sem criar um fundo colorido.
Sáb 20 Jan 2018, 17:41 por ExtremeZelda
» [TSADNB] Tópico sobre Assuntos Diversos no Blast
Sex 19 Jan 2018, 16:49 por ExtremeZelda
» [VENDO] NINTENDO WII U 32GB MARIO KART 8 DELUXE BUNDLE
Sáb 01 Abr 2017, 11:45 por jcvalerio
» Mario Kart 8 travou meu Wii U
Sáb 01 Abr 2017, 10:14 por quediz
» Troca Pokémon & Friend Codes - Sun/Moon & Gen 6
Sex 31 Mar 2017, 21:29 por Devilucky
» Lojinha do Tio Logan
Sex 31 Mar 2017, 09:33 por Logan
» Problema na tela de cima do 3DS.
Qui 30 Mar 2017, 13:45 por Afrojin
» Novos jogos para Wii U, Wii e DS
Ter 28 Mar 2017, 23:04 por SSBGames
» 9 jogos de Wii no arremate
Ter 28 Mar 2017, 22:30 por SSBGames
» [AJUDA] Nintendo Switch - Como comprar jogos?
Ter 28 Mar 2017, 18:07 por Fael BC
» Fan Game - Pokemon Hau Adventures
Ter 28 Mar 2017, 10:20 por wawagames
» Muro das lamentações, desabafe aqui o que lhe aflige.
Seg 27 Mar 2017, 23:47 por Shaya