30 de nov de 2016

Mega post: Como mexer com transições no HTML

Nossa, eu enchi vocês com papo furado, né? Dois textos seguidos, deve ter sido complicado de aturar -q Como vão, criaturinhas? Eu vou bem, ouvindo muito OneRepublic e falando com a Mitty, nada fora do habitual :v
Eu estou muito ansiosa para o fim de dezembro por causa de umas coisas lá, incluindo as benditas e maravilhosas férias, porque sem férias não dá pra querer :v
Peguei meu boletim do primeiro e segundo trimestres e só digo uma coisa: ODEIO MATEMÁTICA! Sério, todas as minhas notas foram mais de trinta (valia trinta e cinco e a média era vinte e um), daí brotou matemática com FUCKING 24,3! Quis quebrar tudo? Quis. Quebrei? Mas é claro Não. Ao mesmo tempo, estou bem contente com meu desempenho em história: 85,5 no ano inteiro! Foi minha melhor média desde o sexto ano, considerando que não entendo nada de história. escrevi isso olhando pra cima, decorei as teclas do teclado já Português é outro que me surpreendeu, tornou-se minha disciplina favorita! Eu simplesmente estou apaixonada por tudo: Por escrever, pela gramática, pelo significado de cada coisa.
Anyway, hoje eu vim trazer um tutorial. Percebi que eu raramente atualizo essa categoria e que eu gosto de ensinar, então hoje vou tentar dar uma aulinha de transições :v

Uma "ajuda" com transições no HTML

Resultado de imagem para anime write gif tumblr

1. Pra começar, o que é isso?

A transição é uma parte dos códigos que muita gente utiliza sem sequer saber o que é, e que na minha opinião é fundamental. Encontra-se em todo o tipo de código: Desde hovers simples, como o do negrito até o de mais complexos, como efeitos de animação e esse tipo de coisa. Experimenta entrar no YouTube e passar o mouse por cima de um dos links, a cor mudará no mesmo instante, certo? Isso acontece pois o código do link não possui especificação da transição e ela está configurada para 0 mas isso não é assunto pra agora :v. Já quando tu descansa o mouse AQUI, o link demora para mudar de cor, certo? Isso acontece também devido às transições.

2. Por que eu mexeria com isso?

Pra mim, a melhor parte do código é que ele é sempre personalizado da mesma maneira, independente de onde utilizado. Há várias formas de utilizar o código, várias programações e "truques" pra deixar o layout mais bonito, mas não vou entrar em detalhes sobre isso aqui: Vou apenas ensinar o básico.
O código básico para fazer com que a transição fique direitinha é ajustar a duração da mesma, mas ainda assim dá pra mudar muita coisa, como a parte do código em que ela vai funcionar (exemplo: somente na cor da fonte ou na cor da borda), após quanto tempo com o mouse descansado sobre o local do blog que possui transição ele se "moverá", entre outros.

Imagem relacionada

3. A "base" do código:

Como já mencionei, o que eu sempre configuro primeiro é o tempo de duração da transição em segundos, pois fica mais fácil de entender a base do código.
transition-duration: .50s;
O código acima é o que eu utilizo como base pra editar as outras coisas.
Claro, os navegadores são tinhosos e exigem que sejam colocadas especificações para navegadores: daí entram em cena os clássicos webkit e moz, que são o motivo de muitos códigos funcionarem em um navegador mas não em outro claro, há exceções que não podem ser esquecidas, como a scrollbar no Firefox.
transition-duration: .50s;
-moz-transition-duration: .50s;
-webkit-transition-duration: .50s;
"Como faço para passar milésimos para segundos?" Pois então, o ponto final equivale à vírgula dos números decimais, ou seja, é como se estivesse escrito 0.50s, o que pela lógica equivale a cinquenta milésimos. Ou seja, 1s significa "um segundo", 1.5s significaria "um segundo e meio" e por aí vai.

4. Algumas pequenas edições:

  • Forma de transição:
Ease: É a forma de transição padrão, em que o "movimento" inicia lento, vai ficando mais rápido e depois mais lento ainda.
Linear: É a forma de transição que deixa a mesma regular, toda com a mesma velocidade.
Ease-in: A transição inicia lenta e vai ficando mais rápida.
Ease-out: É quando a transição termina lenta.
Ease-in-out: A transição inicia e acaba lenta.
transition-timing-function: linear;
-moz-transition-timing-function: linear;
-webkit-transition-timing-function: linear;

  • Especificação do "lugar" onde funcionará a transição
Esse aqui vai do lugar onde tu deseja colocar a transição, como por exemplo:
Color: A cor da fonte do texto.
Background-color: Na cor do fundo.
Border-color: Na cor da borda.
Text-shadow: Na sombra do texto.
All: Em tudo.
E por aí vai, depende de tu testar e ver se funciona.
transition-property: all;
-moz-transition-property:all;
-webkit-transition-property all;

  • "Demora pro efeito se tocar que tem que funcionar", como eu digo:
É o tempo que tu fica com o cursor em cima do negócio pra ele funcionar, e eu costumo deixar esse no padrão mas as vezes eu mudo pra ficar conceitual. Assim como o "transition-duration", é medido em segundos.
transition-delay: .2s;
-moz-transition-duration: .2s;
-webkit-transition-duration: .2s;
Imagem relacionada

5. Código simplificado:

"Ah, eu vou ter que demorar oitenta e quatro anos pra escrever todas essas coisas?" Não, há um código simplificado em que tu só precisa usar o "transition" e colocar os valores e configurações na devida ordem, por exemplo esse exemplo foi marotamente pego dos links do meu layout:
transition: all 0.50s linear .2s;
-moz-transition: all 0.50s linear .2s;
-webkit-transition: all 0.50s linear .2s;
Concluímos que a ordem é:
1. property;
2. duration;
3. timing-function;
4. delay.
A partir disso, pode-se criar infinitas transições, incluindo o cubic-bezier.

6. Cubic-bezier:

Nunca tentei usá-lo mesmo sabendo que existe, mas é uma ferramente que te dá a chance de estabelecer os valores das velocidades da transition-timing-function, ou seja: Ao invés de linear ou outro tipo de transição, basta inserir "cubic-bazier (*,*,*,*) trocando os asteriscos por números. Daí vai de testes, pesquisas na internet e insistência. Não tenho como ajudar vocês nisso porque nem eu tentei ainda :v
                                   
Muito obrigada a quem tentou entender esse tutorial! Caso algo não tenha ficado suficientemente bem explicado, minhas sinceras desculpas, estou tentando melhorar porque eu realmente não sei ensinar :v Olhem para os dois lados da rua antes de atravessar saudades de falar isso e sayonareide pra vocês, meu povinho sensual o/
Imagem relacionada

11 comentários:

  1. AAAAAAAH OBRIGADA POR ESSE TUTORIAL VAI SER EXTREMAMENTE ÚTIL PRA MIM SOCORRO
    AGORA DEIXA EU DAR UMA LIDA AQUI
    OBRIGADA DE NOVO!!!

    ResponderExcluir
    Respostas
    1. DE NADA, MENINA! EU FICO FELIZ QUE TU VÁ CONSEGUIR ENTENDER MELHOR POR CAUSA DISSO :>
      CLARO AUSHAUSHUA'
      DE NADA O/

      Excluir
  2. Oieee! o/

    Acho que todo estamos ansiosos para o fim de dezembro, ahsuahsuhasuhs
    Eu também amo português! <3 Matemática às vezes é fácil, às vezes é difícil, coisa de louco. História é muito amor. <3 Só passo longe de física, química e biologia mesmo ahsuahsuahsuha (isso porque eu nem estudo mais, mas ok)

    Sobre o tutorial: amei! Eu sempre uso transições, quer dizer, são as melhores coisas que já inventaram no CSS, fica tão bonitinho! *-* Sabe que antigamente (vulgo há uns 8, 10 anos) não existia esse código de transição no CSS, por isso tínhamos que fazer a maior gambiarra pra colocá-lo no blog, com javascript e tudo. Por isso eu digo, abençoado por Yato seja quem criou esse código e facilitou a vida da humanidade! E, aliás, eu não conhecia essa propriedade do Delay e sempre me enrolava no ease, in, out. Agora esclareceu bastante! <3

    Byee o/

    ResponderExcluir
    Respostas
    1. Oii o/
      Siim auhausha' o fim de dezembro é tipo, melhor parte do ano!
      High five de amantes do PT X3 Matemática é meio ??? porque a gente não entende em um momento mas em outro entendemos, fico tipo "hãn?"
      História é legal, mas prefiro a geografia! Eu não tenho aula de física, biologia e química ainda, mas as pessoas me assustam bastante quando falam disso!

      Que bom que gostou, sério. Eu raramente posto tutoriais por raramente encontrar algo que alguém ainda não tenha postado e que tenha popularizado, mas agora que tu falou que esse tutorial tá legal, eu fiquei bem feliz ^^ Não sabia disso, devia de ser bem complicado aushaus' VAMOS AGRADECER AOS CRIADORES DE UM MONTE DE CÓDIGOS QUE FACILITAM A NOSSA VIDA? *agradecendo* Eu já usei a propriedade do delay umas três ou quatro vezes e fica divertido! Ease in e out também me buga, por isso sempre uso o padrão mesmo c: Que bom que tá mais claro o/

      Sayonara *U*

      Excluir
  3. Yooo one-chan! Adorei e já conhecia o tutorial, super útil e prático ^^

    Obrigada pelo recadinho na C-BOX, aceito afiliação sim <3

    ResponderExcluir
    Respostas
    1. Ainda hj te colocarei como afiliada ^^
      Bjs <3

      Excluir
    2. Oii Micah o/ Siim, o código ajuda muito mesmo ;3
      De nada, já te coloquei ali do ladinho ^^
      Sayonara o/

      Excluir
  4. Sabe o que isso me lembra???? JAVASCRIPT E É HORRÍVEEELLLLLLLLLLLLLLLL DE APRENDER SAKDHSAKJDHSAKDJHAS

    Mas adorei o tutorial, foi muito mais fácil de entender do que javascript, certeza. Eu nunca entendi pq precisa ter um código pra cada navegador, deviam fazer tudo para o mesmo, mas okay né...
    Eu consegui entender tudinho, obrigado :3 Faz tutorial de photoshoppppppp plisss dsjakdhsdadsad

    Agora vou indoo, beijinhos :3
    ~ Powerful Alien Girl

    ResponderExcluir
    Respostas
    1. Oii o/
      DSKJHFSDKHFKS' É VERDADE MESMO :v
      Java é complicado, mas CSS é até que fácil -q Então, é muito mais fácil só deixar lá o "transition", mas a vida gosta de complicar :v Vou tentar fazer tutorial de photoshop, prometo!

      Sayonara o/

      Excluir

Sim, eu dei uma reformada marota nisso aqui ~
➹ Não saia ofendendo e nem fazendo comentário de quinta, porque idiotice eu já tenho de sobra
➹ Eu não faço troca de seguidores ou essas coisas ridículas, só sigo se eu quiser
➹ Qualquer comentário que não tiver conteúdo será deletado
➹ Não faço layout por encomenda
➹ Se leu e está ciente de tudo isso, parabains pra você!