Descrição: Como todos nós já sabemos, o css3 é uma maravilha. Com ele podemos conseguir efeitos imprecionates,e cada vez mais bacanas. Hoje estarei ensinando a vocês, um
efeito bem legal, para você utilizar em suas imagems de seu blog.
O códigos é bem simples, e não utilizada nenhum javascript o jQUERy. è CSS puro!
O Código:
<style type="text/css">
/*Créditos: Smigou */
/*URL: http://www.bcreate.net */
.smigou img{
-webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/
-moz-transform:scale(0.8); /*Mozilla scale version*/
-o-transform:scale(0.8); /*Opera scale version*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
opacity: 0.7; /*initial opacity of images*/
margin: 0 10px 5px 0; /*margin between images*/
}
.smigou img:hover{
-webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(1.1); /*Mozilla scale version*/
-o-transform:scale(1.1); /*Opera scale version*/
box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/
-webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/
-moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/
opacity: 1;
}
</style>
efeito bem legal, para você utilizar em suas imagems de seu blog.
O códigos é bem simples, e não utilizada nenhum javascript o jQUERy. è CSS puro!
O Código:
<style type="text/css">
/*Créditos: Smigou */
/*URL: http://www.bcreate.net */
.smigou img{
-webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/
-moz-transform:scale(0.8); /*Mozilla scale version*/
-o-transform:scale(0.8); /*Opera scale version*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
opacity: 0.7; /*initial opacity of images*/
margin: 0 10px 5px 0; /*margin between images*/
}
.smigou img:hover{
-webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(1.1); /*Mozilla scale version*/
-o-transform:scale(1.1); /*Opera scale version*/
box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/
-webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/
-moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/
opacity: 1;
}
</style>
Como Utilizar:
Bem, para utilizar é bem simples, voçê pode simplesmente utilizar desse geito mesmo. Com isso todas as imagems das postagems do seu blog, ficaram com um efeito bem bacana.
Você pode tambem utilizar para qualquer outra imagem em seu blog, basta apenas mudar o seletor.
Dica: Esse efeito fica muito legal, em blogs no estilo "Gallery", tipo o da Bcreate.
Dúvidas ?..è só deixarem um comentário, que responderemos todas.
Exemplo:
Nossa Avaliação Do Conteúdo:
0 comentários:
Postar um comentário