[TUTORIAL] Efeito hover em caixa de texto com CSS
ShiftActif fórum :: Central ShiftActif :: :: Tutoriais
Página 1 de 1 • Compartilhe
[TUTORIAL] Efeito hover em caixa de texto com CSS
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
Efeito hover em caixa de texto com CSS
1º - 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 | |
Vermelho | Tempo de duração em segundos da expansão da caixa de texto. |
Laranja Admineiro | Altura da caixa quando o mouse não está sobre ela. |
Verde Moderadeiro | Altura 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". - Qual será o resultado?
© ShiftActif & Niko!
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 |
Tópicos semelhantes
» [TUTORIAL] Efeito hover no Logo
» [TUTORIAL] Opacidade e Efeito Hover em Avatar
» [TUTORIAL] Efeito hover o menu do fórum
» [TUTORIAL] Aumentando o tamanho da logo com efeito Hover
» [TUTORIAL] Efeito hover nos números de mensagens e tópicos (Phpbb3)
» [TUTORIAL] Opacidade e Efeito Hover em Avatar
» [TUTORIAL] Efeito hover o menu do fórum
» [TUTORIAL] Aumentando o tamanho da logo com efeito Hover
» [TUTORIAL] Efeito hover nos números de mensagens e tópicos (Phpbb3)
ShiftActif fórum :: Central ShiftActif :: :: Tutoriais
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos
|
|