[TUTORIAL] Resposta rápida com efeito retrátil

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

  • 0

[TUTORIAL] Resposta rápida com efeito retrátil

Mensagem por seender em 28/04/13, 05:46 am



Efeito CSS3

Desde a atualização da linguagem css ganhamos novas maneiras de personalização para nossos fóruns, neste tutorial iremos tratar um efeito de transição do modo normal para o hover, a caixa de resposta rápida estará pequena e quando passar o mouse irá aparecer completamente.

--> Tutoriais, dicas e astúcias <--
Resposta rápida com efeito retrátil


- Código a ser utilizado:
Código:
/* Resposta rápida com efeito retratil */
form#quick_reply #textarea_content textarea#text_editor_textarea, form#quick_reply textarea#text_editor_textarea {
-htm-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 5ms;
-webkit-transition-duration: 1s;
transition-duration: 1s;
height: 10px;
width: 100%!important;
}
form#quick_reply:hover #textarea_content textarea#text_editor_textarea:hover, form#quick_reply textarea#text_editor_textarea:hover, form#quick_reply textarea#text_editor_textarea.post:hover {
position: relative;
height: 155px;
width: 100%!important;
}
/* Fim do código */

- Aplicando o código CSS:
Agora deverá seguir um esquema de onde o código deverá ser adicionado:
Painel de Controle -> Visualização -> Imagens e cores -> Cores -> Folha de estilo CSS


Resultados
Antes e depois da adição do código
Sem o mouse (normal):
Em modo hover:




© Fórum dos Fóruns


Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
[Dúvida] Resposta rápida com efeito retrátil
avatar

seender
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 07/04/2009
Mensagens : 9450
Pontos Ativos : 12457

Ver perfil do usuário http://www.divulgamaisweb.com https://www.facebook.com/Divulga-Mais-Web-874814432638426/

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo


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