04/07/2013

#SimpleHTML: Colocar hover com transição lenta

Postagem programada*

Oi oi gente! Feliz dia da Independência dos EUA! Como estão? Vou bem, obrigada. Meus primos estão passando alguns dias aqui em casa então vai ser meio difícil para postar. Mas em compensação, conheci alguns parques da minha cidade que eu nunca tinha visitado. Obrigada pelos 60 seguidores! Fiquei muito feliz!

Pretendo criar vários posts ensinando o básico do html. Esses posts serão identificados pois terão o #SimpleHTML. Hoje trouxe algo bem fácil e rápido: como colocar hover nos códigos de HTML. Pode ser muito bobo, mas tem pessoas que não sabem como fazer isso. É realmente fácil, não é nada de outro mundo. Hoje a introdução será bem curta porque estou sem criatividade -q

Hover é quando algo muda enquanto o mouse está sobre ele. Por exemplo, coloquem o mouse em cima do escrito hover. Viram? É isso que iremos aprender no nosso primeiro tópico da "série". 

Como se aplica o hover? 
Para se aplicar o hover, devemos copiar o nome da classe e colocar a palavra hover na frente.

.nomedaclasse { 
códigos como border, font, etc;
}
.nomedaclasse:hover {
códigos como border, font, etc;
}

E como faz para ficar com transição lenta?
Basta adicionar o -webkit-transition-duration: na frente do fechamento da classe }.

.nomedaclasse { 
códigos como border, font, etc;
-webkit-transition-duration: .90s;
}
.nomedaclasse:hover {
códigos como border, font, etc;
-webkit-transition-duration: .90s;
}


Prontinho! Feito isso, é só salvar. Beijos e até o próximo post. 

9 comentários:

  1. É bem simples, vivem perguntando isso, fico meio engasgada, sabe, mas irei indicar esse posta da próxima vez ^^
    Pequena Garota

    ResponderExcluir
    Respostas
    1. Obrigada :) é muito simples mesmo, até quem acabou de entrar na blogosfera consegue fazer

      Excluir
  2. Nossa, eu nem sabia que hoje era dia da Independência dos EUA T3T. Nunca tinha vindo aqui, o #simplehtml é bem útil, usarei no meu próximo layout.
    Kisses ~

    Flowers with Nostalgia

    ResponderExcluir
    Respostas
    1. Só guardei por causa de um livro >.< Que bom que vai dar para usar, obrigada :)

      Excluir
  3. ótimo tutorial, bem explicado e bom para quem não entende muito de HTML!

    Beijo> http://semprefuiestranha.blogspot.com.br/

    ResponderExcluir
  4. Muito bom, vou usar no meu proximo lay!
    amei, aqui. seguindo <3.

    http://paradiseof-html.blogspot.com.br/

    ResponderExcluir
  5. Parabéns pelos 60 seguidores!O tuto é muito fácil e útil
    segue lá para ajudar?
    http://eternityclouds.blogspot.com.br/

    ResponderExcluir
  6. Muito fácil esse tuto. E adorei sua iniciativa, tem muita gente mesmo que não sabe ainda, e está tão explicadinho, me senti na sala de aula com a professora explicando :O ahsuah'
    Beijuhs! || † Ieah

    ResponderExcluir

Ei, vai comentar? Obrigada! Mas antes..

Eu leio todos os comentários.
Tentarei responder todos eles, mas não tenho tempo para retribuí-los.
Respeito. Você tem o direito de criticar e expor sua opinião, mas respeito sempre.