Tutorial: efecto link 3D

>_<

Tutorial: Mensaje en la pestaña

owo

Tutorial: Efecto opacidad en imágenes #2

Tema - Personalizar (Editar HTML) - CTRL+F y buscas: ]]></b:skin>

Y arriba de ]]></b:skin> pegas: 

 img {
border: 1px solid #efefef;
padding: 10px;
background-color:#ffffff;
-webkit-transition-duration:.5s;
-moz-transition-duration:.5s;
}

img:hover {
opacity:0.6;
-webkit-transition-duration:.5s;
-moz-transition-duration:.5s;
} 

-Amary-

Tutorial: Efecto Img Rainbow 2 {faster}

Para ambos:

Tema - Personalizar (Editar HTML) - CTRL+F y buscas: ]]></b:skin>

Arriba de ]]></b:skin> pegas el código correspondiente.

El que acaba en blanco y negro

img {
filter: none;
-webkit-filter: none;
-moz-filter: none;
-webkit-filter;(0);
-webkit-transition: all 0.7s ease-in;
-moz-transition: all 0.7s ease-in;
transition: all 0.7s ease-in;}
img:hover {
filter: brightness(0.7) contrast(5) grayscale(1) hue-rotate(360deg) invert(0.1) saturate(7);
-webkit-filter: brightness(0.7) contrast(5) grayscale(1) hue-rotate(360deg) invert(0.1) saturate(7);
-moz-filter: brightness(0.7) contrast(5) grayscale(1) hue-rotate(360deg) invert(0.1) saturate(7);
-webkit-filter;(1);
-webkit-transition: all 0.7s ease-in;
-moz-transition: all 0.7s ease-in;
transition: all 0.7s ease-in;
}

Faster {normal}

img:hover {
-webkit-filter: hue-rotate(1000deg) ;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
transition: all 0.3s linear;
}
img {
-webkit-filter: hue-rotate(0deg) ;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
transition: all 0.3s linear;
}

Tutorial: Efecto imagen black

Tema - Personalizar (Editar HTML) - CTRL+F y buscas: ]]></b:skin>

Arriba de ]]></b:skin> pegas lo siguiente:

img{
-webkit-transition: all .7s linear;
-moz-transition: all .7s linear;
transition: all .7s linear;
}
img:hover{
-webkit-transition: all .7s linear;
-moz-transition: all .7s linear;
-webkit-filter: brightness(15%);
z-index: -100px;
}

Tutorial: Efecto imagen camera shot

Tema - Personalizar (Editar HTML) - CTRL+F y buscas: ]]></b:skin>

Arriba de ]]></b:skin> pegas lo siguiente:

img{
-webkit-transition: all .7s linear;
-moz-transition: all .7s linear;
transition: all .7s linear
}
img:hover{-webkit-filter: brightness(15%);z-index: -99px;}

vista previa:

Tutorial: Efecto imagen sepia

Tema - Personalizar (Editar HTML) - CTRL+F y buscas: ]]></b:skin>

Arriba de ]]></b:skin> pegas lo siguiente:

.post-body img {filter: sepia(100%);-webkit-filter: sepia(100%); -moz-filter: sepia(100%);-webkit-filter(1);-webkit-transition: all 0.4s linear;-moz-transition: all 0.4s linear;transition: all 0.4s linear;}.post-body img:hover{filter: sepia(0%);-webkit-filter: sepia(0%); -moz-filter: sepia(0%);-webkit-filter(0);}

De normal a sepia:

img{
-webkit-transition: all .7s linear;
-moz-transition: all .7s linear;
transition: all .7s linear
}
img:hover{-webkit-filter: sepia(100%);z-index: -99px;}

vista previa:

Tutorial: Efecto imagen Inverted

Tema - Personalizar (Editar HTML) - CTRL+F y buscas: ]]></b:skin>

Arriba de ]]></b:skin> pegas lo siguiente:

img{
-webkit-transition: all .7s linear;
-moz-transition: all .7s linear;
transition: all .7s linear
}
img:hover{-webkit-filter: invert(100%);z-index: -99px;}

vista previa:

Efecto seguidores #3 Blanco y negro

Tema - Personalizar (Editar HTML) - CTRL+F y buscas: ]]></b:skin>

Arriba de ]]></b:skin> pegas lo siguiente:

#Followers1-wrapper {
text-decoration: none !important;
-webkit-filter: grayscale(100%);
-webkit-transition-duration: .90s;
margin-bottom: 2px;
}
#Followers1-wrapper:hover {
text-decoration: none !important;
-webkit-filter: grayscale(0%);
-webkit-transition-duration: .90s;
margin-bottom: 2px;
}

Tutorial: Efecto imagen blanco y negro

Tema - Personalizar (Editar HTML) - CTRL+F y buscas: ]]></b:skin>

Arriba de ]]></b:skin> pegas lo siguiente:

De blanco y negro a normal:

.post img{-webkit-filter: grayscale(1);-webkit-filter: grayscale(100%); -moz-filter: grayscale(100%);filter: url(desaturate.svg#greyscale);filter: gray; filter: grayscale(100%);-webkit-transition: all 0.4s linear;-moz-transition: all 0.4s linear;transition: all 0.4s linear;} .post img:hover{-webkit-filter: grayscale(0);-webkit-filter: grayscale(0); -moz-filter: grayscale(0);filter: none; filter: grayscale(0);}

De normal a blanco y negro:

img{-webkit-transition: all 0.8s linear;-moz-transition: all 0.8s linear;transition: all 0.8s linear}
img:hover{-webkit-filter: grayscale(100%);z-index: -99px;}

vista previa:

Tutorial: Efecto imagen blurry

Tema - Personalizar (Editar HTML) - CTRL+F y buscas: ]]></b:skin>

Arriba de ]]></b:skin> pegas lo siguiente:

De normal a blurry

img{
-webkit-transition: all .7s linear;
-moz-transition: all .7s linear;
transition: all .7s linear
}
img:hover{-webkit-filter: blur(1px);z-index: -99px;}

De blurry a normal

.post-body img{-webkit-transition: all 0.4s linear;-moz-transition: all 0.4s linear;transition: all 0.4s linear;filter: blur(2px); -webkit-filter: blur(2px); -moz-filter: blur(2px);} .post-body img:hover{filter: none; -webkit-filter: blur(0px);-moz-filter: blur(0px);filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0');}

vista previa:

Tutorial: Efecto imagen giratoria (360°)

{vista previa}

Tema - Personalizar (Editar HTML) - CTRL+F y buscas: ]]></b:skin>

Arriba de ]]></b:skin> pegas lo siguiente:

.post img:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-webkit-transition-duration: 2s; }

+ pixels

+ pixels

backgrounds/fondos ! ♡

backgrounds

cursores ! ♡

cursores

texturas ! ♡

texturas