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

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

1º - 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 */

2º - 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