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

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

  • 0

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

Mensagem por seender 28.04.13 9:46


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

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

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

Resultados
Antes e depois da adição do código
Sem o mouse (normal):
[TUTORIAL] Resposta rápida com efeito retrátil Sem_ta17
Em modo hover:
[TUTORIAL] Resposta rápida com efeito retrátil Sem_ta18




© Fórum dos Fóruns


[TUTORIAL] Resposta rápida com efeito retrátil Act_bottom 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
seender

seender
Membro Entusiasta

Membro desde : 07/04/2009
Mensagens : 9449
Pontos : 12455

http://www.divulgamaisweb.com https://www.facebook.com/Divulga-Mais-Web-874814432638426/

Ir para o topo Ir para baixo

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