Tutorial [Efeito Hover de Bordas Arredondadas Para Imagens]

Saudações Unicórnios! Sabem o que mais me irritava antes de eu começar a aprender HTML e CSS? Ir à procura de códigos para personalizar o blogue e depois ter de experimentar uns 10 até algum funcionar (foi uma das razões pela qual eu resolvi conhecer mais essa área). Assim eu resolvi ir trazendo esses códigos (e explicar), para vocês poderem personalizar o vosso blogue e ao mesmo tempo saber o que estão a fazer certo? (Lembrando que sou só uma aprendiz iniciante, não sou profissional nisto ok? XD).
Caso não queiram saber da explicação ignorem o que estiver a itálico.
Cliquem em "Ler mais..." para ver o tutorial.



1. No Painel do Blogger vão a Modelo > Editar HTML e vai aparecer montes de códigos (não se assustem se errarem, o Blogger avisa quando há um erro no código e diz onde ele está).

2. Andem para cima até chegarem ao topo (caso não estejam lá já) e vão ver a verde algo assim:
<b:skin>...</b:skin>
Estas duas tags (específicas do Blogger) dizem ao computador que ali começa o CSS, ou seja, tudo o que está entre estas duas tags não está escrito em HTML mas sim em CSS, que por sua vez tem como objetivo dar um estilo específico à página, quando eu faço um template mexo maioritariamente no CSS.

3. Cliquem nos três pontinhos "..." e vão aparecer montes de códigos escritos em azul, isso é o CSS e é o que constitui a aparência do blogue.

4. Façam Ctrl + F e vai aparecer uma barra no canto superior direito da janela do editor, lá têm de escrever o seguinte código (para que sejam levados para o sítio desejado):
]]></b:skin>
Este código é o fim do CSS, tudo o que está em baixo dele refere-se aos elementos da página e não à personalização do blogue então tentem não mexer muito lá ok? Para este tutorial vocês não precisam de ir para além desta tag.

5. E coloquem acima desse código o seguinte (caso o efeito seja apenas para imagens de posts):
 .post-body img {
  transition:all 500ms linear;
}
.post-body img:hover {
  border-radius:30px;
  transition:all 500ms linear;
}
O ".post-body img" está a fazer referência a todas as imagens de todos os posts (ou seja, este código não terá efeito nas imagens dos widgets), e o ":hover" está a dizer ao computador que o efeito "border-radius" (que são as bordas arredondadas) só se aplica quando se passa o ponteiro do rato/mouse por cima. Se quiserem os cantos mais arredondados aumentam o valor que está em "px", se os quiserem menos arredondados diminuem, o "30" é apenas um exemplo/sugestão. O "transition" é a animação, não vale a pena explicar isso agora.

6. Se quiserem aplicar em widgets simultaneamente apliquem também o seguinte código, se quiserem este efeito só nos widgets ignorem o código do ponto 5 e apenas apliquem este (é possível fazer os dois num só código mas assim é mais simples para vocês):
div.widget img:hover {
border-radius:30px;
transition:all 500ms linear;
}
O "div.widget" está a fazer referência a todas as secções com widgets, o "img" a todas as imagens dentro dessas secções, o ":hover" já sabem, é o mesmo que acima.

7. Então no fim, se utilizarem aplicarem os efeitos nos posts e nos widgets o código irá ficar mais ou menos assim:
.post-body img: hover {
border-radius:30px;
transition:all 500ms linear;
}
.div.widget img:hover {
border-radius:30px;
transition:all 500ms linear;
}

E é isso! Espero que tenham gostado do tutorial, podem dar sugestões nos comentários de coisas que querem que vos ensine a fazer e eu talvez faça (se souber também não é? xP).

Sem comentários:

Enviar um comentário