19 de jun de 2014

Borda arredondada nas imagens do blog + Opacidade Hover


♣ Olá meus doces ♣

Hoje trago a vocês mais um dos tutorais de HTML, faz tempo que não faço um post desse não é? Enfim, primeiramente, clique em "Leia Mais" se for usar os efeitos.



Explicarei como é o efeito (pois eu NÃO tenho blog de preview's e também porque não sei fazer .-.), a borda arredondada, é, obviamente, uma borda REDONDA -.-', (zuando pra animar você :D), Opacidade Hover, é isso aqui: A imagem, no "Opacidade." é a imagem normal e a gente passa o mouse por cima e fica um pouco mais clara, já, Opacidade hover, ela já estará clarinha, e então, quando você passar o mouse por cima dela, ela ficara no "modo normal" dela. E eu acabei de explicar detalhadamente o obvio para vocês, porque eu amo muito vocês viu? Tea Lu ama todo mundo :v (sqn), continuando a postagem, vou ensinar vocês a fazer o efeito um separado do outro, e também o dos dois juntos.


Ikuso!


1º Abra o Painel do Blogger, vá no seu blog em Modelo e depois Editar HTML, então, irá aparecer a nossa amada caixinha de códigos, cliquem dentro dela, e depois em Ctrl F ou se preferirem F3, e pesquisem por essa tag: 



]]>

2º Acima dessa tag, cole o seguinte código (para só o de borda arredondada):


.post img {
-moz-border-radius: 10px;
-webkit-boder-radius: 10px;
border-radius: 10px;
}

2º (tem dois porque você escolhe se quer os efeitos juntos ou não.), se não quiser só o borda arredondada e sim ele e o Opacidade hover, coloque esse código:


.main img {filter:alpha(opacity=82);-moz-opacity:0.82;opacity:0.82;}.main img:hover {filter:alpha(opacity=100);-moz-opacity:1.0;opacity:1.0;duration: 50s;}

3º Visualize o modelo, se estiver tudo certo, salve e aproveite seu efeito ^-^.



Bem gente, foi esse o post, espero ter ajudado vocês, beijos e bye ♥

Nenhum comentário:

Postar um comentário