Arquivo do Fórum Nintendo Blast

Olá visitante/usuário! Nós estamos em processo de migração e deixaremos este Fórum em breve.

A migração é para termos mais liberdade e para podermos ter um Fórum melhor! Se você ainda não é cadastrado neste Fórum e nem no novo, clique aqui e cadastre-se já no Novo Fórum!

Se você já possui uma conta aqui, clique aqui e saiba como migrar para o Novo Fórum Nintendo Blast!
Arquivo do Fórum Nintendo Blast

    [Tutorial] Faça tópicos usando o comando div!

    Compartilhe
    avatar
    Math_Geek
    Veterano Nv.MÁX
    Veterano Nv.MÁX

    Karma Karma : 3267
    Posts Posts : 8349

    [Tutorial] Faça tópicos usando o comando div!

    Mensagem por Math_Geek em Sab 05 Mar 2016, 23:55

    Faça tópicos usando o comando div!

    Olá! Very Happy

    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 Razz

    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 Razz

    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 Wink

    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 pixels

    7 pixels

    12 pixels

    15 pixels

    20 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 Wink

    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
    testetestetestetestetestetestetestetesteteste

    testetestetestetestetestetestetestetesteteste

    Código:
    <div style="background-color:#ff9900;padding:15px;text-align:right;">testetestetestetestetestetestetestetesteteste
    testetestetestetestetestetestetestetesteteste
    testetestetestetestetestetestetestetesteteste
    testetestetestetestetestetestetestetesteteste

    [left]testetestetestetestetestetestetestetesteteste[/left]
    </div>
    o texto ficou todo alinhado à direita, mas a parte dentro do div que eu escolhi para ficar formatada à esquerda ficou mesmo assim. Isso é muito útil quando queremos usar um texto justificado, porque o fórum normalmente buga e engole os espaços que damos, tendo que resolver com pontinhos ou linhas. Dessa forma, os espaços entre paragrafos ainda são mantidos, e não fica dando bug quando tenta colocar 2 ou mais formatações juntas.

    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 pixels

    10 pixels

    12 pixels

    15 pixels

    20 pixels


    Só ir testando o tamanho que achar melhor antes de colocar Wink

    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 Razz

    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 opacidade

    30% de opacidade

    70% de opacidade

    90% de opacidade

    100% 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! Very Happy
    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.
    avatar
    Sonic Salies
    Agent of Shadow
    Agent of Shadow

    Karma Karma : 910
    Posts Posts : 2264

    Re: [Tutorial] Faça tópicos usando o comando div!

    Mensagem por Sonic Salies em Dom 06 Mar 2016, 00:08

    Excelente tópico! Além de matar a curiosidade da galera, vai ajudar a deixar os tópicos mais bonitos =D

    Só acho que você deveria ser banido por desonrar o seu próprio tópico com Comic Sans.
    avatar
    Math_Geek
    Veterano Nv.MÁX
    Veterano Nv.MÁX

    Karma Karma : 3267
    Posts Posts : 8349

    Re: [Tutorial] Faça tópicos usando o comando div!

    Mensagem por Math_Geek em Dom 06 Mar 2016, 00:12

    @Sonic Salies escreveu:Excelente tópico! Além de matar a curiosidade da galera, vai ajudar a deixar os tópicos mais bonitos =D

    Só acho que você deveria ser banido por desonrar o seu próprio tópico com Comic Sans.
    Abomino usar essa fonte em tudo, mas também abomino a implicância com ela. Se eu tivesse feito o tópico todo com ela até até, mas foi só o título e algo que nem é realmente importante, então quem vai ser banido é você Very Happy -qqn

    ~esse povo que acha que tópico é TCC, agora eu vi mesmo >_>
    avatar
    Felipe Fabricio
    Great Revival
    Great Revival

    Karma Karma : 2182
    Posts Posts : 7565

    Re: [Tutorial] Faça tópicos usando o comando div!

    Mensagem por Felipe Fabricio em Dom 06 Mar 2016, 00:15

    E aqui um lindo rápido tutorial de HTML. 11/10,lindo tópico e mó informativo.

    Espero ver muitos tópicos bonitos saindo disso, hein EAHEAHUEAHUEA

    btw a função mais útil é a float
    avatar
    Math_Geek
    Veterano Nv.MÁX
    Veterano Nv.MÁX

    Karma Karma : 3267
    Posts Posts : 8349

    Re: [Tutorial] Faça tópicos usando o comando div!

    Mensagem por Math_Geek em Dom 06 Mar 2016, 00:18

    @Felipe Fabricio escreveu:E aqui um lindo rápido tutorial de HTML. 11/10,lindo tópico e mó informativo.

    Espero ver muitos tópicos bonitos saindo disso, hein EAHEAHUEAHUEA

    btw a função mais útil é a float
    vamos aumentar ainda mais os requisitos para ganhar tópico do mês agora


    Eu uso muito a text-align, porque acho a função de justificar por tags do fórum uma droga. Quando não buga o tópico a formatação fica errada em algum lugar (quando engole os espaços entre parágrafos).
    avatar
    Terto
    Membro Nv.8
    Membro Nv.8

    Karma Karma : 53
    Posts Posts : 100

    Re: [Tutorial] Faça tópicos usando o comando div!

    Mensagem por Terto em Dom 06 Mar 2016, 07:07

    Belo tópico, Math ; )
    Então, aqui vai uma dica rápida: no lugar de usar a forma extensa, como background-image: e background-repeat:, use apenas background: com os valores em questão.

    Por exemplo:
    background: url('imagem.png') no-repeat;
    é o mesmo que:
    background-image:url('imagem.png'); background-repeat:no-repeat;
    avatar
    FyeBR
    Membro Nv.21
    Membro Nv.21

    Karma Karma : 43
    Posts Posts : 235

    Re: [Tutorial] Faça tópicos usando o comando div!

    Mensagem por FyeBR em Dom 06 Mar 2016, 11:42

    Muito bom math.

    Aqui + comic sams já que os moderadores e adms curtem *-*
    avatar
    Gui Fx
    Veterano Nv.15
    Veterano Nv.15

    Karma Karma : 178
    Posts Posts : 756

    Re: [Tutorial] Faça tópicos usando o comando div!

    Mensagem por Gui Fx em Dom 06 Mar 2016, 13:45

    Parabéns Math, ficou ótimo o tutorial!
    Mas do jeito que eu sou preguiçoso, vou continuar criando tópicos feios.
    avatar
    Math_Geek
    Veterano Nv.MÁX
    Veterano Nv.MÁX

    Karma Karma : 3267
    Posts Posts : 8349

    Re: [Tutorial] Faça tópicos usando o comando div!

    Mensagem por Math_Geek em Dom 06 Mar 2016, 14:18

    @Terto escreveu:Belo tópico, Math ; )
    Então, aqui vai uma dica rápida: no lugar de usar a forma extensa, como background-image: e background-repeat:, use apenas background: com os valores em questão.

    Por exemplo:
    background: url('imagem.png') no-repeat;
    é o mesmo que:
    background-image:url('imagem.png'); background-repeat:no-repeat;
    Hu, dessa não sabia! Já havia reparado isso na função de arredondar as pontas, em que dava para colocar cada borda separada (como top-left) todas juntas no mesmo comando.
    avatar
    Alejandro_
    Veterano Nv.MÁX
    Veterano Nv.MÁX

    Karma Karma : 1404
    Posts Posts : 3901

    Re: [Tutorial] Faça tópicos usando o comando div!

    Mensagem por Alejandro_ em Seg 07 Mar 2016, 15:59

    Muito obrigado, Math! Esse é um recurso muito bom, estarei com certeza usando muito ele nos tópicos que farei! ^^
    avatar
    Ryo
    Glorious Evolution
    Glorious Evolution

    Karma Karma : 79
    Posts Posts : 279

    Re: [Tutorial] Faça tópicos usando o comando div!

    Mensagem por Ryo em Ter 08 Mar 2016, 01:17

    Boa, me economiza tempo fazendo layout no PS.
    avatar
    NateDamasca
    Membro Nv.31
    Membro Nv.31

    Karma Karma : 176
    Posts Posts : 332

    Re: [Tutorial] Faça tópicos usando o comando div!

    Mensagem por NateDamasca em Ter 23 Ago 2016, 12:07

    Testando

    Conteúdo patrocinado

    Re: [Tutorial] Faça tópicos usando o comando div!

    Mensagem por Conteúdo patrocinado


      Data/hora atual: Ter 12 Dez 2017, 21:57