Efectos en Imagenes

Hoy voy a mostrar varios efectos que pueden poner a sus imagenes okei? son muy llamativos y muy faciles de usar..

TODOS los codigos se pegaran antes de ]]></b:skin>

empezemos con el primero:

EFECTO SEPIA

Codigo:

.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);}

*** si lo quieres invertido osea de imagen normal a efecto sepia estes es el codigo: ***

img{

-webkit-transition: all .7s linear;

-moz-transition: all .7s linear;

transition: all .7s linear

}

img:hover{-webkit-filter: sepia(100%);z-index: -99px;}

EFECTO GRAYSCALE

codigo:

.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);}

*** si lo quieres de imagen normal a efecto grayscale estes es el codigo: ***

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;}

EFECTO BLUR

codigo:

.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');}

*** si lo quieres de imagen normal a efecto blur estes es el codigo: ***

img{

-webkit-transition: all .7s linear;

-moz-transition: all .7s linear;

transition: all .7s linear

}

img:hover{-webkit-filter: blur(1px);z-index: -99px;}

INVERT EFFECT

codigo:

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

EFFECTO CAMERA SHOT

codigo:

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

que tengan bonito dia :)

Personalizar Fondo en el Inicio de Sesion en Facebook

Hola blogueras como han estado?? espero que super bien, yo por mi parte como que me desapareci un rato de aqui.. no he actualizado en dias.. sorry sorry >.< como siempre he andado algo ocupada.. pero bueno ya me hice un tiempito y aqui les pongo este tuto para que pongan lindo su inicio de sesion de su feis ok?

Esta extension es solo para los que usan Google Chrome

aqui una imagen para que vean a que me refiero

Pueden ponerle cualquier imagen de fondo que gusten =D

empezemos:

Da clic AQUI para ir a la pagina de la extension facebook refresh

1.- En la esquinita hay una opcion que dice "Anadir a Google Chrome" dale clic.

2.- Te saldra una pequena nota de confirmacion le pones "Add" y la extension empezara a descargar.

3.- Ahora en la esquina superior derecha estan las opciones de tu chrome... Busca "Settings"  das clic en el y si te abrira otra ventana ahi busca "Extensiones" das clic y se abrira esto:

Como mencione en la imagen.. al darle clic se te abrira tu ventana de personalizacion para el fondo de inicio de sesion de facebook.

Image/Url Upload: da clic en "Choose File" para buscar en tu pc la imagen del fondo

Box Color: Es el fondo del cuadro de inicio de sesión.

Label Color: es el color del texto

Repeat: Solo utilizala si tu imagen es muy chica y quieres que se repita varias veces el fondo ya sea a la horizontal o vertical.

Size: tamano de la imagen.. yo te recomiendo el 100%

Ahora ve a donde normalmente haces la sesion del tu facebook y mira el cambio ^^ Espero te haya gustado n.n

Cajitas de texto

Hace dias me puse hacer estas cajitas pero no habia tenido tiempo de postearlas ^^ para ponerlas en tu blog muy sencillo....

Anda a Diseno >> Añadir gadget html/javascript.. copiar el codigo y pegarlo en el gadget.. 

<center><!-- Start Cute Tabla - Annyz World --><table style="background-image:url('http://i1063.photobucket.com/albums/t514/Annyz-Kawaii/cajita4.png');margin-left:auto;margin-right:auto; border:0px" cellpadding="0" cellspacing="0" width="200"><tr>    <td height="306" align="center" valign="top"><table border="0" cellpadding="0" cellspacing="0" width="40%"><tr>    <td height="130"></td> </tr><tr>    <td style="text-align:center;font-family:verdana; font-size: 8pt; color: #666666" height="150">   <b>AQUII TU TITULO</b><div style="width:145px; height:100px; overflow-y: scroll;  scrollbar-3dlight-color:#FBF8F2;  scrollbar-arrow-color:#EBB7A8;  scrollbar-darkshadow-color :#FBF8F2;  scrollbar-face-color:#FBF8F2;  scrollbar-highlight-color:#FBF8F2;  scrollbar-shadow-color:#FBF8F2;  scrollbar-track-color:#FBF8F2">ESCRIBE AQUI..ESCRIBE AQUI..<br>ESCRIBE AQUI..ESCRIBE AQUI..<br>  ESCRIBE AQUI..ESCRIBE AQUI..<br>  ESCRIBE AQUI..ESCRIBE AQUI..<br>ESCRIBE AQUI..ESCRIBE AQUI..<br>ESCRIBE AQUI..ESCRIBE AQUI..<br>ESCRIBE AQUI..ESCRIBE AQUI..<br>ESCRIBE AQUI..ESCRIBE AQUI..<br> </div></td> </tr><tr>    <td><a target="_blank" href="http://annyz-kawaii.blogspot.com/">      </tr></table></td> </tr></table><!-- Fin Cute Tabla - Annyz World --></center>
 <center><!-- Start Cute Tabla - Annyz World --><table style="background-image:url('http://i1063.photobucket.com/albums/t514/Annyz-Kawaii/cajita3.gif');margin-left:auto;margin-right:auto; border:0px" cellpadding="0" cellspacing="0" width="200"><tr>    <td height="306" align="center" valign="top"><table border="0" cellpadding="0" cellspacing="0" width="40%"><tr>    <td height="150"></td> </tr><tr>    <td style="text-align:center;font-family:verdana; font-size: 8pt; color: #666666" height="150">   <b>**AQUI TU TITULO**</b><div style="width:145px; height:100px; overflow-y: scroll;  scrollbar-3dlight-color:#FBF8F2;  scrollbar-arrow-color:#EBB7A8;  scrollbar-darkshadow-color :#FBF8F2;  scrollbar-face-color:#FBF8F2;  scrollbar-highlight-color:#FBF8F2;  scrollbar-shadow-color:#FBF8F2;  scrollbar-track-color:#FBF8F2">ESCRIBE AQUI..ESCRIBE AQUI..<br>ESCRIBE AQUI..ESCRIBE AQUI..<br>  ESCRIBE AQUI..ESCRIBE AQUI..<br>  ESCRIBE AQUI..ESCRIBE AQUI..<br>ESCRIBE AQUI..ESCRIBE AQUI..<br>ESCRIBE AQUI..ESCRIBE AQUI..<br>ESCRIBE AQUI..ESCRIBE AQUI..<br>ESCRIBE AQUI..ESCRIBE AQUI..<br>  </div></td> </tr><tr>    <td><a target="_blank" href="http://annyz-kawaii.blogspot.com/">      </tr></table></td> </tr></table><!-- Fin Cute Tabla - Annyz World --></center>
 <center><!-- Start Cute Tabla - Annyz World --><table style="background-image:url('http://i1063.photobucket.com/albums/t514/Annyz-Kawaii/cajita2.gif');margin-left:auto;margin-right:auto; border:0px" cellpadding="0" cellspacing="0" width="200"><tr>    <td height="306" align="center" valign="top"><table border="0" cellpadding="0" cellspacing="0" width="40%"><tr>    <td height="150"></td> </tr><tr>    <td style="text-align:center;font-family:verdana; font-size: 8pt; color: #666666" height="150">   <b>**AQUI TU TIULO**</b><div style="width:145px; height:100px; overflow-y: scroll;  scrollbar-3dlight-color:#FBF8F2;  scrollbar-arrow-color:#EBB7A8;  scrollbar-darkshadow-color :#FBF8F2;  scrollbar-face-color:#FBF8F2;  scrollbar-highlight-color:#FBF8F2;  scrollbar-shadow-color:#FBF8F2;  scrollbar-track-color:#FBF8F2">ESCRIBE AQUI..ESCRIBE AQUI..<br>ESCRIBE AQUI..ESCRIBE AQUI..<br>  ESCRIBE AQUI..ESCRIBE AQUI..<br>  ESCRIBE AQUI..ESCRIBE AQUI..<br>ESCRIBE AQUI..ESCRIBE AQUI..<br>ESCRIBE AQUI..ESCRIBE AQUI..<br>ESCRIBE AQUI..ESCRIBE AQUI..<br>ESCRIBE AQUI..ESCRIBE AQUI..<br>  </div></td> </tr><tr>    <td><a target="_blank" href="http://annyz-kawaii.blogspot.com/">      </tr></table></td> </tr></table><!-- Fin Cute Tabla - Annyz World --></center>

Hermosas imagenes

Te gustan este tipo de imagenes??

siii??? bueno entonces yo te voy a recomendar una pagina que esta llena de estas imagenes tan cutes y tiernas >.< ameee esta pagina, te recomiendo la pongas en favoritos como yo n.n

Mi pink and Purple World

EnjOy

Efectos En Los Links de tu Blog

hola blogueraas hoy es lunes no se ustedes pero waaaaaahh yo  lo odio xD, se me hace eterno y super pesado el dia  x___X quisiera que fuera viernes otra vez hahahahhaa, y bueno ya dejare de quejarme xD les pondre este tuto que al pasar el cursor sobre los links les da unos lindos efectos.

** y chicas sorry esta vez no puse demos para que vean los efectos.. solo imagenes.


para poner algun efecto en tu blog anda a:

Plantilla >> Edicion de html >> Continuar 

TODOS los efectos se ponen arriba de  ]]></b:skin>

-- Efecto Extrude --

 Codigo:

a{
 position: relative;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease; }
 a:hover{
left: -6px;
      top: -6px;
      color: #5ACEFF;
      text-shadow: 1px 1px #FF79C3, 2px 2px #FF79C3, 3px 3px #FF79C3, 4px 4px #FF79C3, 5px 5px #FF79C3, 6px 6px #FF79C3;} 

Para editarlo:

Azul: color del texto al cambiar.

rosa: color del efecto 3D (sombra)

 

 

El segundo efecto me lo presto Melo-Chan

--Efecto Multiple en Links--

 

Codigo:

 a{
letter-spacing:2px;
-webkit-transition-duration: .50s;
text-shadow:1px #fff;
}
a:hover {
color:#000;
text-shadow: 2px 7px 1px #b8d935,
               -10px 1px 1px #fc5d77,
               4px -7px 1px #5dcdfc;
-webkit-transition-duration: .50s;
}

 

Para editar los colores:

text-shadow: 2px 7px 1px #b8d935, [COLOR SUPERIOR]

               -10px 1px 1px #fc5d77, [COLOR CENTRAL IZQUIERDA]

               4px -7px 1px #5dcdfc; [COLOR INFERIOR]

Mi mundo de creacion

Efecto 3D Hover

Codigo:

a{
   color: white;
   text-shadow: 1px 1px #D0A9F5,                 2px 2px #D0A9F5,                 3px 3px #D0A9F5;   -webkit-transition: all 0.12s ease-out;
   -moz-transition:    all 0.12s ease-out;
   -ms-transition:     all 0.12s ease-out;
   -o-transition:      all 0.12s ease-out;
}
 a:hover{
   position: relative;
   top: -3px;
   left: -3px;
   text-shadow: 1px 1px #F781F3,                 2px 2px #F781F3,                 3px 3px #F781F3,                 4px 4px #F781F3,                 5px 5px #F781F3,                 6px 6px #F781F3;}

Editar los colores:

 

Morado: Color 3D.

Rosa: Color 3D Hover.

Efecto Expando Ambos lados

aqui el efecto se divide en 2 con diferente color

Codigo:

a{
color:#fff;
text-left: 30px;
text-transform:lowercase;
letter-spacing: -1px;
}
 a:hover{
color:#000;
-webkit-transition: all 0.5s ease;-moz-transition: all 0.7s ease;-o-transition: all 0.7s ease;
text-shadow: 13px 0 .2px #57C8FF,
-13px 0 .2px #FF6EC8;
}

Morado: color texto izquierda

Rosa: Color texto derecha

Efecto Expando

Se separan las letras y cambia de color el texto

Codigo:

a{
 -webkit-transition: all 250ms ease-out;
    -moz-transition: all 250ms ease-out;
    -o-transition: all 250ms ease-out;
    transition: all 250ms ease-out;
}
 a:hover{
 color: #00adbc;
      letter-spacing: 0.25em;
}

Efecto GlOw

codigo:

a{
 -webkit-transition: all 250ms ease;
    -moz-transition: all 250ms ease;
    -o-transition: all 250ms ease;
    transition: all 250ms ease;
}
 a:hover{
 color: #00adbc;
      text-shadow: 0px 0px 12px #00adbc;
}

Como editarlo:

rosa: color del texto hover

azul: color de la sombra hover.0

No copy Cat -- No copiar tutorial :)

gifs halloween

Gifs Halloween
 

Separadores