Rpg Maker BRasil
RPG Maker Brasil - RMBR

Seja Bem vindo ao Forúm! Faça seu cadastro e desfrute sobre o mundo do RPG Maker!
P.S.: PARA MELHOR VIZUALIZAÇÃO DO FORUM SEM BUGS, RECOMENDO QUE USEM O MOZILLA FIREFOX OU O GOOGLE CHROME!
Rpg Maker BRasil

Evoluindo cada vez mais!


Você não está conectado. Conecte-se ou registre-se

Ver o tópico anterior Ver o tópico seguinte Ir em baixo  Mensagem [Página 1 de 1]

RMBR

avatar
Administrador
Caixa de texto expansível (efeito hover)



Com o CSS é possível realizar efeitos que pensamos que seja com jQuery e suas propriedades. Agora, você vai conhecer uma forte dica para personalizar seu fórum com um CSS "pra lá de especial".



--> Tutoriais <--
Efeito hover em caixa de texto com CSS




- Código CSS de personalização:
Não há segredos relacionados ao tutorial, porque vamos usar um CSS de fácil entendimento e que não custará o tempo do leitor. Acesse seu Painel de controle > Visualização > Imagens e Cores > Cores > Folha de estilo CSS > e vamos adicionar o código abaixo:

form#quick_reply #textarea_content textarea#text_editor_textarea {
height: 10px;
width: 100%!important;
-htm-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 5ms;
-webkit-transition-duration: 1s;
transition-duration: 1s;
background: whitesmoke;
border: 1px dashed red;
}

form#quick_reply:hover #textarea_content textarea#text_editor_textarea:hover {
height: 155px;
width: 100%!important;
background: white;
border:2px solid blue;
position: relative;
}
Vamos ver a tabela abaixo e compreender cada cor:

TABELA DE CORES
Cores do CSS
VermelhoTempo de duração em segundos da expansão da caixa de texto.
Laranja AdmineiroAltura da caixa quando o mouse não está sobre ela.
Verde ModeradeiroAltura da caixa quando o mouse está sobre ela.


Agora que sabe como funciona, basta modificar como você quiser e visualizar o resultado final nos tópicos do seu fórum.

Como mudo as cores de quando a caixa se abre ou se fecha?
Procure no CSS o termo border:2px solid blue;e troque o valor de "BLUE" pela cor desejada. Por exemplo, se quiser um preto, basta colocar o nome "BLACK" no lugar de BLUE. para quando a caixa for se abrir. Para quando a caixa estiver fechada, procure o termo border: 1px dashed red;, e troque o valor "RED" pela cor desejada. Por exemplo, "GREEN". [Você precisa estar registrado e conectado para ver esta imagem.]

  • Qual será o resultado?
    [Você precisa estar registrado e conectado para ver este link.][Você precisa estar registrado e conectado para ver este link.] [Você precisa estar registrado e conectado para ver este link.]
    [Você precisa estar registrado e conectado para ver esta imagem.]






  • © RMBR, ShiftActif & Niko!


    [Você precisa estar registrado e conectado para ver este link.] Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
    [Dúvida] Efeito hover em caixa de texto com CSS

    http://rmbr.forumeiros.com

    -Naruto

    avatar
    Administrador
    Publicitário
    Helper
    PHPBB2 nen funfa =/

    -Naruto

    avatar
    Administrador
    Publicitário
    Helper
    Movido Para Tutoriais Aceitos.

    Conteúdo patrocinado


    Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo  Mensagem [Página 1 de 1]

    Permissão deste fórum:
    Você não pode responder aos tópicos neste fórum