ShiftActif fórum

[TUTORIAL] Efeito hover em caixa de texto com CSS Homepg10

Participe da melhor comunidade sobre fóruns!

Bem vindo [TUTORIAL] Efeito hover em caixa de texto com CSS 405374159 ao fórum de suporte e de informações técnicas ShiftActif. Aqui, solucionamos suas dúvidas sobre os tutoriais exclusivos fornecidos pela nosso subfórum de tutoriais além de suporte opcional ao Forumeiros.com, Blogger e temas grátis do Criarumblog.com! Você encontrará FAQs, astúcias em códigos e efeitos especiais em CSS, Javascript e outros para complementar seu fórum ou Blog!
Venha participar desta grande comunidade!!! [TUTORIAL] Efeito hover em caixa de texto com CSS 1660898911
ShiftActif fórum

[TUTORIAL] Efeito hover em caixa de texto com CSS Homepg10

Participe da melhor comunidade sobre fóruns!

Bem vindo [TUTORIAL] Efeito hover em caixa de texto com CSS 405374159 ao fórum de suporte e de informações técnicas ShiftActif. Aqui, solucionamos suas dúvidas sobre os tutoriais exclusivos fornecidos pela nosso subfórum de tutoriais além de suporte opcional ao Forumeiros.com, Blogger e temas grátis do Criarumblog.com! Você encontrará FAQs, astúcias em códigos e efeitos especiais em CSS, Javascript e outros para complementar seu fórum ou Blog!
Venha participar desta grande comunidade!!! [TUTORIAL] Efeito hover em caixa de texto com CSS 1660898911

[TUTORIAL] Efeito hover em caixa de texto com CSS

Ver o tópico anterior Ver o tópico seguinte Ir para baixo

[TUTORIAL] Efeito hover em caixa de texto com CSS Empty [TUTORIAL] Efeito hover em caixa de texto com CSS

Mensagem por Sphartcus Qui 29 Nov - 13:41

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". Beleza!

  • Qual será o resultado?
    [TUTORIAL] Efeito hover em caixa de texto com CSS Gif10





© ShiftActif & Niko!


[TUTORIAL] Efeito hover em caixa de texto com CSS Act_bottom 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
Sphartcus

Sphartcus
Moderador

Masculino
Idade : 27
PointActif's : 4437
ReputActifs : 4
Mensagens : 47
Inscrição : 04/04/2012

100%

https://shift.forumactif.com/

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos