Annyz-BlOg : Lindo efecto vintage en imagenes css
para COPIAR los codigos usa la tecla Ctrl + C y para PEGAR usa la tecla Ctrl + V gracias :) El Blog Se visualiza mejor con Google Chrome..

18 noviembre 2014

Lindo efecto vintage en imagenes css


jO jo jO feliz casi caaaaaasi navidad xD aun falta bastantes dias, pero, ya se empieza a sentir el espiritu navideno por todas partes :D!! me encantan estas fechas!!


En esta ocasion mis blogueras les traigo un tuto que encontre en una pagina ya conocida (al final del post pongo la referencia) pero que le puse mi toque kawaii como siempre jajajja, la verdad le da un efecto bastante mono a sus imagenes ^^

Primer Efecto:
(pasar cursor)


.cute_vintage {padding:0;float:left;} .cute_vintage { border:3px solid #FFEAF0;position: relative;float: left; margin-right: 20px;margin-bottom: 20px;} .cute_vintage: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/AVvXsEiEo7Bwgmn9gEYRhH4P6wPxprnq7DyMIw_NrmV7kRnUUUUcCyDiJLnR59-o6JU6iIACnuQo8J6QpkMpv8yTQXYnKVnUu2F9NxOzytIkdbfuExVpyKizw677ipmR1btXUBBv-yzc00Mzgpk/s0/grunge.png);background-size: cover;box-shadow: inset 0 0 50px #FFEAF0, inset 0 0 50px #FFEAF0, inset 0 0 50px #FFEAF0;-moz-transition: all 1s;-webkit-transition: all 1s;-o-transition: all 1s;transition: all .1s;}.cute_vintage:hover:before {background: none;box-shadow:none;-moz-transition: all 1s; -webkit-transition: all 1s;-o-transition: all 1s;transition: all .1s;}

Segundo Efecto
(pasar cursor)

.efecto_vintage {padding:0;float:left;} .efecto_vintage {border:3px solid #FFEAF0; position: relative;float: left; margin-right: 20px; margin-bottom: 20px;} .efecto_vintage:before { content: "";display: block;position: absolute;top: 0; bottom: 0;left: 0;right: 0;background-color: rgba(); background-image:url(http://i1221.photobucket.com/albums/dd461/kawaii_annyz/star9.png); background-size: cover;box-shadow: inset 0 0 50px #FFEAF0, inset 0 0 50px #FFEAF0, inset 0 0 50px #FFEAF0; -moz-transition: all 1s;-webkit-transition: all 1s;-o-transition: all 1s; transition: all .1s;} .efecto_vintage:hover:before { background: none;box-shadow:none;-moz-transition: all 1s;-webkit-transition: all 1s; -o-transition: all 1s;transition: all .1s;}

Tercer Efecto: (pasar cursor)


.vintage_cute {padding:0;float:left;}
.vintage_cute {
border:3px solid #FFEAF0;position: relative;float: left; 
margin-right: 20px;margin-bottom: 20px;}
.vintage_cute:before {
content: "";display: block;position: absolute;
top: 0;bottom: 0;left: 0;right: 0;background-color: rgba();
background-image:url(http://i1221.photobucket.com/albums/dd461/kawaii_annyz/star1.png);
background-size: cover;box-shadow: inset 0 0 50px #FFEEF4, inset 0 0 50px #FFEEF4, inset 0 0 50px #FFEEF4;-moz-transition: all 1s;-webkit-transition: all 1s;-o-transition: all 1s;
transition: all .1s;}
.vintage_cute:hover:before {
background: none;box-shadow:none;-moz-transition: all 1s;-webkit-transition: all 1s;-o-transition: all 1s;transition: all .1s;}

Cuarto Efecto:
(pasar cursor)


.vintage_efect {
padding:0;float:left;}
.vintage_efect {
border:3px solid #FFEAF0;position: relative;float: left; margin-right: 20px;margin-bottom: 20px;}
.vintage_efect:before {
content: "";display: block;position: absolute;top: 0;bottom: 0;left: 0;right: 0;background-color: rgba();
background-image:url(http://i1221.photobucket.com/albums/dd461/kawaii_annyz/2-2.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;}
.vintage_efect:hover:before {
background: none;box-shadow:none;-moz-transition: all 1s;-webkit-transition: all 1s;-o-transition: all 1s;transition: all .1s;}
Quinto Efecto:
(pasar cursor)


.vintage_heart {padding:0;float:left;}
.vintage_heart {border:3px solid #FFEAF0;
position: relative;float: left; margin-right: 20px;
margin-bottom: 20px;}
.vintage_heart:before {content: "";display: block;
position: absolute;top: 0;bottom: 0;left: 0;right: 0;
background-color: rgba();background-image:url(http://i1221.photobucket.com/albums/dd461/kawaii_annyz/star7-1.png);
background-size: cover;box-shadow: inset 0 0 50px #FFEEF4, inset 0 0 50px #FFEEF4, inset 0 0 50px #FFEEF4;-moz-transition: all 1s;-webkit-transition: all 1s;-o-transition: all 1s;
transition: all .1s;}
.vintage_heart:hover:before {background: none;box-shadow:none;-moz-transition: all 1s;
-webkit-transition: all 1s;-o-transition: all 1s;transition: all .1s;}


 Para poner el efecto que mas te gusto ve a Plantilla >> Edicion HTML y pegar el codigo justo antes de  ]]></b:skin>  por ultimo das vista previa y guardas :)!

Notita: AL poner el codigo automaticamente el efecto se vera en TODAS tus imagenes que tienes en tu blog.. Si quieres que el efecto solo se vea en una imagen, osea, la que tu  prefieras (asi como lo hago yo en los ejemplos de arriba) copia y pega este codigo en la entrada donde quieras mostrar la imagen:
<div class="cute_vintage">
<img border="0" src="URL DE TU IMAGEN" /></div>
<div style="clear: both;"/>

Lo que esta señalado con rojo lo tienes que remplazar por el nombre del efecto que te gusto. Y te preguntaras..cual es el nombre de los efectos? jajaj bueno aqui abajito te pongo el nombre.

Primer efecto --- cute_vintage
Segundo efecto - efecto_vintage
Tercer Efecto --- vintage_cute
Cuarto Efecto --- vintage_efect
Quinto Efecto --- vintage_heart

Credito (x)

9 comentarios:

  1. Unos efectos muy muy buenos! gracias por compartirlo *-*

    ResponderEliminar
  2. Algunas fotos no se ven :/
    Pero de las que se pueden ver, tienen un efecto precioso *-*
    besitos

    ResponderEliminar
  3. hola annyz soy yo te acuerdas de mi jejeje creo que que no... hahaha en fin waah tu blog no deja de tener recursos maravillosos sabes adore estos efectos espero poder ponerlos porque ya no he actualizado nada de nada mi pobre blog yo también me ausente mucho tiempo y recibe insultos de chat creí que eras tu porque decía annyz pero después me di cuenta que era annyz kawaii que poco originalidad de estas chicas sacan de quicio deberían de madurar ...
    en fin basta de tonterías
    espero poder regresa
    sabes que tu blog es uno de los mejores de mejores best best
    nos vemos bye bye
    sayoanra

    ResponderEliminar
  4. Hola annyz perdon la gran tardanza por contestar... tengo picture windows y no se abrir artilugios ni me sale un solo tutorial con el nuevo estilo de blogger... :( Gracias por tu atencion... Nanny

    ResponderEliminar
    Respuestas
    1. hola nanny sabes desde que cambio la interfaz de blogger, ya no se abren artilugios.. mira te dejo esta imagen para que te des una idea de donde se pone >< b:skin:"

      http://i1221.photobucket.com/albums/dd461/kawaii_annyz/codigopicture.png

      saludos

      Eliminar
  5. Oye annyz ayudame porque no funciona lo pege justo antes del ]]> Y Siempre aparece error a guardar la plantilla Y Intente con otras diferentes y pasa lo mismo. Enserio annyz Plz ayudame es para mi blog y lo necesito urgente! Te agradecería mucho si me ayudadas

    ResponderEliminar