Tutorial: Criando sua própria Text Box

Gostaria de agradecer à todos que votaram e estão votando em meu bloguinho :3
(ainda não votou? Olhe ali na sidebar os links para votação :)
Sabe essas caixinhas de texto super fofas que são disponibilizadas em alguns blogs?
Estive observando os códigos de algumas delas e nesse código da Annyz deu para entender como funciona. Eu espero conseguir repassar para vcs o que entendi ^-^
A que fiz ficou assim:



Consegui!! Tente você também :3...



Bem, vamos lá então...
A primeira coisa a ser feita é ter uma imagem de fundo, ou seja, a caixinha mesmo. É necessário guardá-la em algum site, como no próprio Blogger por exemplo, para vc pegar a URL dela.
Vc pode salvar algumas que já deixei aqui no blog em gifs, ou essas abaixo e até mesmo criar a sua :3 Elas são legais também para molduras de fotos de perfil, banners... ^ ^



   

   

Clique na imagem acima para ver em tamanho real
     

   
   
   
   
Feito isso, observe o tamanho da imagem (width=largura e height=altura) porque isso influi muito no código. E por falar em código, olha ele aqui:






Consegui!! Tente você também :3...

<!-- Cute Text Box Start --> <div style="width: 130px; height: 168px; background-image: url(URL DA SUA IMAGEM AQUI); text-align: center;"> <center><div style="width: 100px; height: 20px;"> </div><div style="width: 100px; height: 150px; overflow: auto;"> <span style="color: rgb(253, 97, 242);font-family:verdana;font-size:110%;" > SEU TEXTO VAI AQUI :3... </span></div></center></div> <!--Cute Text Box Finish -->


É só modificá-lo à sua maneira; lembrando que:

Width e height se referem à largura e altura da imagem e também na posição do texto; o ideal é que vc coloque largura e altura do texto com tamanho bem menor do que o da imagem, para que ele se encaixe perfeitamente.

Background-image: url é onde vc colocará a URL da sua imagem.

Text-align é a posição do texto, que pode ser direita (right), esquerda (left), centralizado (center).

Color, font-family e font size se referem a cor da fonte, estilo e tamanho dela.

Espero que vcs consigam e qualquer dúvida podem perguntar; se eu souber, ajudarei ^^
Não sou expert nessas coisas ainda, mas pretendo ir melhorando! Isso já foi um avanço não é? rsrsrs...
beijinhus






Postar um comentário

6 Comentários

  1. Ai que leal esse tutorial, adorei, me ajudou muito!

    Seguindo seu blog amr, adoreei, uma gracinha (: Aceita parceria?

    Bom, Depois dá uma passadinha no meu blog? Será um prazer ter sua visitinha!

    Beijinhos!
    @sabrina_mp
    >> http://blog-mundo-da-moda.blogspot.com/

    ResponderExcluir
  2. Gracias por esto! voy a hacer mis propias cajitas en photoshop, es de mucha ayuda!

    Kisses!

    ResponderExcluir
  3. Amo esse bloguinho, adorei as dicas elas são mega fofinhas. Ahhhh vi que seu blog tem um efeito nos links tipo arco-íris, poderia me passar? Ele é super legal, adoro cores. Sempre vou passar aki! bjokinhas ^__^b

    ResponderExcluir
  4. Mas tenho uma dúvida (como sempre) rss
    Onde eu colo o código ??

    ResponderExcluir
    Respostas
    1. Em qualquer lugar que aceite HTML, tipo nos gadgets da sidebar ou nas postagens ^^
      Sinta-se a vontade para perguntar sempre!!! Adoro receber seus comentários fofa!
      Beijus e obrigada...

      Excluir

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Deviantart

up