<h3><span>Efeito vintage</span> nas imagens</h3>

Oi amigas(o), hoje o tutorial é muito legal, vamos aprender a fazer efeito nas imagens estilo Vintage. Esse efeito não é permanente e pode ser usado apenas nas imagens que deseja destacar. Veja alguns exemplos

Descanse o mouse nas imagens

Modelo- 01

Modelo- 02

Modelo- 03

--------------------------------------------------------------------------------
Copie o código do modelo desejado, cole antes de ]]></b:skin> e salve.

Modelo- 01 /* Efeito Vintage nas imagens ----------------------------------------------- */ .efeito_cute img { padding:0; float:left; } .efeito_cute { border:2px dashed #FFE4E1; position: relative; float: left; margin-right: 20px; margin-bottom: 20px; } .efeito_cute:before { content: ""; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(); background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYgGUP3jMhkFlDyJcQT41bGv8IVErMMsMfECOOHYQkAwDonKyYsfmyCRWrIIHam7DvauN0dZhAVuJmLxc2oNUjvSXFBl_nxnTiO1GAL5PD2GUEsmP09SXUtPXecAusWMy4_cXpbLsC9KOt/s1600/uu.png); background-size: cover; box-shadow: inset 0 0 50px #ffffff, inset 0 0 50px #ffffff, inset 0 0 50px #ffffff; -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; transition: all .1s; } .efeito_cute:hover:before { background: none; box-shadow:none; -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; transition: all .1s; }

Modelo- 02 /* Efeito Vintage nas imagens ----------------------------------------------- */ .efeito_cute img { padding:0; float:left; } .efeito_cute { border:2px dashed #FFE4E1; position: relative; float: left; margin-right: 20px; margin-bottom: 20px; } .efeito_cute:before { content: ""; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(); background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDyhBrTzJH4zA9AsuwRqILKznLkiD1P9QNJISNzktj76ZE5LzvEsY1Mf0urwgQE4q_xDxhVEnlicVIP_UF8m7pzUVr5XKNNAaejnMX0fRFmLdzhnMFpQuUDx1k4t0w4V2KN4i3fIA6cJ_-/s1600/tt.png); background-size: cover; box-shadow: inset 0 0 50px #ffffff, inset 0 0 50px #ffffff, inset 0 0 50px #ffffff; -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; transition: all .1s; } .efeito_cute:hover:before { background: none; box-shadow:none; -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; transition: all .1s; }

Modelo- 03 /* Efeito Vintage nas imagens ----------------------------------------------- */ .efeito_cute img { padding:0; float:left; } .efeito_cute { border:2px dashed #FFE4E1; position: relative; float: left; margin-right: 20px; margin-bottom: 20px; } .efeito_cute:before { content: ""; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(); background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZSjAjEK-ASys_4E8ataohHLM5UZJnF5WZDDr78SzHPNNAGKb3TdS4uB25bqi7j8ez7Smkf6YPO7OUKM-icwTv-zkZmUy9frAL1jxLjcoSJX-p0zXrSTwO-dSnVMyBbRSgE8x1NiuoMHMd/s1600/back.png); background-size: cover; box-shadow: inset 0 0 50px #ffffff, inset 0 0 50px #ffffff, inset 0 0 50px #ffffff; -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; transition: all .1s; } .efeito_cute:hover:before { background: none; box-shadow:none; -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; transition: all .1s; }

Agora adicione o endereço da imagens na parte marcada de rosa no código abaixo e cole nas postagens.

<div class="efeito_cute">

<img border="0" src=" Endereço da Imagem" /></div>
<div style="clear: both;"/></div>

Para relembrar...
Antes de adicionar codigos nas postagens marque a opção HTML,
Veja o exemplo abaixo.


Não conseguiu usar? Clic aqui WWW