Transições com Css3 é algo que amamos pela variedade de efeitos que podemos obter e sem necessidade de utilizar nenhum script, tudo é Css. ...
Transições com Css3 é algo que amamos pela variedade de efeitos que podemos obter e sem necessidade de utilizar nenhum script, tudo é Css.
Um desses efeitos é fazer a imagem de cabeçalho (ou titulo do blog caso não tenha imagem) possa aumentar passando o mouse com este este efeito suave e deslizante.
Para começar tenha uma imagem num tamanho grande, isto é para que nenhum pixel seja acrescentado. Quero dizer que se por exemplo, a imagem do cabeçalho aumentará a 400px de largura, então, a largura original da imagem deve ser de 400px ou mais.Logo, tem que saber as medidas que terá a imagem quando pequena, com isso termos que tomar medidas proporcionais para que ao reduzi-lá não fique desproporcional.
Agora sim, entre no Editar HTML do template e coloque antes de ]]></b:skin> o seguinte código:
#header img {
width:200px; /* Largura da imagem no estado normal */
height:200px; /* Altura da imagem no estado normal */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#header img:hover {
width:400px; /* Largura da imagem ao passar o mouse */
height:400px; /* Altura da imagem ao passar o mouse */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
Altere os valores de width e height, width é largura da imagem, e height é altura, na cor verá a qual corresponde cada um.
Porem se não usa imagem como cabeçalho, você pode também aplicar este efeito ao titulo do blog.
Bloggermin
O procedimento é similar: coloque o seguinte código antes de ]]></b:kin>:
#header h1 {
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#header h1:hover {
font-size:80px; /* Tamanho do texto ao passar o mouse */
color:#FF00FF; /* Cor do texto ao passar o mouse*/
margin-left:-30px; /* Margem esquerda */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
Esse é mesmo complicado, pois não tem que saber as medidas, somente deve colocar o tamanho da fonte que o titulo terá ao passar o mouse. Embora, você pode adicionar outras propriedade como um cor diferente, e também pode usar as margens para que o texto aumente a partir do centro, porem se não quiser usar estás ultimas pode exclui-las sem problemas.
É tão simples, agora você pode ter o cabeçalho do seu blog com efeito zoom ao passar o mouse, agora, lamento decepcionar os usuários do Internet Explorer, pois eles não verão nenhum efeito.
Outra razão para usar um navegador moderno.
COMENTÁRIOS