• - ChapStique -

    - ChapStique -

  • - Crouton -

    - Crouton -

  • - Nadaddy -

    - Nadaddy -

  • - Fatty -

    - Fatty -

  • - Hollywood -

    - Hollywood -

11 de novembro de 2014

Caixa de Texto - CSS

- Saudades desses layouts aqui do blog:   
bzrk, bz, bzrk, bzrk, bz, bzrk: GO BZRK! GO BESEARK!
Olá gente boa ⑅
Espero que estejam bem, porque eu estou, o dia hoje está tão quente mas nada que dois potes de sorvete não resolvam não?!
Só estou um pouco chateada pois a promoção do site que eu ia fazer as compras começa hoje e termina hoje mesmo, então eu não sei se, caso eu pague amanhã mas compre hoje, terei o favorecimento da promoção ou terei de pagar o preço original dos produtos :c

Mas saindo desse papo super triste, vamos indo para um super feliz de alegre de perfeito - awn! - O antigo vocalista da minha banda favorita (www) que era o Soul Glow Activatur, aceitou meu pedido no facebook. Eu tipo que surtei só de saber que ele tinha aceitado minha irmã, daí fui conferir o meu e lá estava: Solomon Olds aceitou seu pedido de amizade. Pooooxa! Surtei demais, a Hannah G3 tem o baixista da banda adicionado e já tive também o produtor de clipes da banda, mas o antigo vocalista, o meu preferido?! cara, é pra vomitar arco-íris pa sempi q-
Indo para o post de hoje, queria agradecer pelos comentários no post anterior, uma das leitoras me chamou de rainha ~ ain fiquei encabulada aqui. UHAUAH' 
Mas falando sobre o efeito que trarei...não existe coisa mais simples. Sim, ensinarei à vocês como fazer uma caixa de texto super bonitinha mas super simples. Ela é super fácil de se aplicar e você poderá ousar, colocando uma imagem ao lado dela como eu fiz no teste ou colocá-la no banner para escrever as boas vindas. Já vi em alguns blogs algumas caixinhas no banner e sempre achei super lindo, então tentei desenvolver essa. Preview ♡

Para começar, basta colar o código abaixo acima de ]]></b:skin>:
.caixa {
margin: 2px;
width: 60px;
height: 40px;
text-align: center;
margin-left: 2px;
color: #fff;
margin-bottom: 2px;
display: inline-block;
overflow: scroll;
background: #f6e7eb;
border: #e7bcc7 solid 1px; /* borda da caixa */
outline: solid 1px #f6e7eb;
outline-offset: -2px;
padding: 3px;
box-shadow: inset 2px 2px 0 #faf9fb;
text-shadow: 1px 1px 0 #e2adbb;
}
Para terminar, basta colar o código abaixo em um HTML / Javascript:
<div class="caixa">AQUI SEU TEXTO</div>
* negrito: Escreva sua mensagem - nem deu pra perceber HAUAHAHLAK'

Espero que tenham gostado do tutorial de hoje, e para o próximo post eu queria saber se vocês preferem um layout free, goodies ou mais tutoriais de HTML. Comentem suas opiniões ><'
 Ah, e vale lembrar que a barra de rolagem da caixa será sempre do mesmo estilo da do seu blog. Se quiserem deixar a barra de rolagem que nem da caixa, aqui {www} está o tutorial.

16 comentários:

  1. Yoo ~
    Realmente está muito quente hoje DDD:
    Nyan, eu comentei acho que no post anterior (?) mas não sei se foi, vê se tá no spam? :/
    Enfim, adorei o tutu ♥♥ vcs smp fazem tutus ótimos, hehe
    Chu
    ~ mutant-paradise.blogspot.com

    ResponderExcluir
    Respostas
    1. é, o sorvete tá acabando rápido :b
      Vish, irei ver sim, está havendo algum bug quando eu respondo os comentários também. :s ñ aparece.

      Excluir
  2. Que caixinha mais linda essa! Adorei, mesmo ♥ Super fofo, mas acho que não vou usar dessa vez!

    Beijos http://valentinices.blogspot.com

    ResponderExcluir
  3. Amei o tutorial rainha~
    Eu não conhecia mesmo, achei bem legal. Abraços♥

    www.s-freeze.blogspot.com

    ResponderExcluir
  4. Oiii Megan >3< Aqui também está muito quente! Vi a hora derreter hoje pela manhã... sério! hahah // Sério que ele te aceitou? Que ahazoooooooo!

    Que caixinha linda! Nunca tinha visto uma parecida com essa, e achei muito fofinha! Adorei >3< // Adoro os goodies, layouts e tutoriais aqui postados, mas prefiro tutoriais, pois é útil para várias pessoas!

    Beijãaaaao, rainha hahah <3
    http://gave-wrong.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Né, ele me aceitou aaaaaaaawwwwwwwwwwwwwwwwwn toda vez que toco no assunto me dá vontade de gritar histericamente õ///////////////////////

      Valeu linda. Obg pela opinião.

      Excluir
  5. Oii Megan -3- aqui não está tão calor, mas tomei sorvete também \o/
    Awn,q ue caixinha fofa, um amorzinho! Amei mesmo.

    { At Morning }

    ResponderExcluir
  6. Essa caixinha é bem fofa e me lembra muito o tumblr! Vou favoritar o post aqui porque vou usá-la no meu próximo layout. Falando em layout, os layouts daqui eram bem Kawaii *u*
    ━━━━━━━ •✺• Like a Rock Like a Roll •✺• ━━━━━━━

    ResponderExcluir
    Respostas
    1. ^^ obg, os layout's free's ou os themes do blog msm? ^^

      Excluir
    2. Os linkados nos coraçõezinhos!

      Excluir
    3. Ah sim, sou lerda ._. HAUAHAU'
      Obg linda! Eu estou cheia de saudades deles.

      Excluir
  7. Que amor, adorei e talvez use em um layout.

    sugar-purry.blogspot.com

    ResponderExcluir