Efecto Hover

Hey babies! Tal como dije en el post anterior, me apetece mucho subir tutoriales, además de que tengo muchos por subir (al menos los que a mi me parecieron más interesantes), empezando por el de hoy, que es un mini tutorial sobre cómo hacer que una imagen, si ponemos el ratón encima, se transforme en otra.

Preview

1. Vamos a nuestro código y pegamos el siguiente código ANTES de ]]></b:skin>:

.imghover 
{background: url('urlfotoprincipal'); width:anchofotopx; height:alturafotopx; -webkit-transition:0.9s;}

.imghover:hover {background:url('urlfotohover'); width:anchofotopx; height:alturafotopx; -webkit-transition:0.9s;}

Cambiamos la url a las de nuestras imágenes, además de la altura y anchura.

2. Ahora colocamos el siguiente código donde queramos que aparezcan las imágenes:

<div class="imghover"></div>

⸻ are u curious? click here! ⸻

Efecto rotate

Hey babies! Llevo unos días (igual unas semanas) sintiéndome muy apática y yo sé porqué es, pero aún así odio sentirme así, porque tengo ganas de escribir entradas, hacer cosas en el blog (como modificar las etiquetas o hacer algunos pequeños cambios al diseño) pero en fin... espero que solo sea una pequeña racha de apatía por culpa del cambio de tiempo y se pase pronto.

Y hoy, como habéis podido ver en el título, traigo un nuevo efecto para el blog que me parece muy simple, pero queda bonito y se parece al que estoy usando en los afiliados y, aprovecho para decir que he tenido que cambiar de lugar (otra vez 🙄) las previews de los efectos/menús/etc porque tumblr me estaba dando problemas por usar javascript, así que hice de nuevo un blog solo para esa función y me gustó el resultado porque están individuales.

Preview

1. Vamos al HTML de nuestro blog y buscamos ]]></b:skin> y ANTES colocamos el siguiente código:

.afiliados {
box-shadow: 2px 1px 3px #909090;
border-radius: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
transition-duration: 3s;
-moz-transition-duration: 3s;
-webkit-transition-duration: 3s;
}

.afiliados:hover {
transform: rotate(-360deg) scale(1) skew(0deg);
-moz-transform: rotate(-360deg) scale(1) skew(0deg);
-webkit-transform: rotate(-360deg) scale(1) skew(0deg);
-o-transform: rotate(-360deg) scale(1) skew(0deg);
}

Todo lo que está en negrita se puede cambiar o quitar, como el caso de los border redondeados, podemos ponerlo en cero (0) para directamente quitar lo redondeado.

2. Ahora solo debemos crear un widget HTML/Javascript con el siguiente código:

<a href="LINK" title="TÍTULO"><img src="URL IMAGEN" class="afiliados"/></a>

Cambiamos lo que está en negrita y podemos pegarlo tantas veces queramos.

⸻ are u curious? click here! ⸻

Efecto Wishlist Beautiful Electric

Hey babies! Siento que hace como mil años que no traigo un efecto para el blog y acabo de ver que el último que subí fue en abril... ¿estamos en agosto? ¿hay algún agujero espacio-temporal por ahí y no me he dado cuenta? lol. Pues eso, que hoy traigo un nuevo efecto que se puede usar para las normas del blog, agenda o lo que más os guste.

preview

1. Vamos a Tema > Personalizar > Editar HTML y buscamos ]]></b:skin> y encima pegamos el siguiente código:

.norma {
display : block;
font-family: arial; /* fuente */
margin: 1px;
text-transform: uppercase;
font-size: 10px; /* tamaño fuente */
color:#fff; /* color fuente */
border-left:6px solid #a9d8e2; /* borde izquierdo */
background:#f7b8ce; /* color fondo */
text-shadow: 1px 1px 0px #e89db7; /* sombra fuente */
padding: 2px 2px 2px 2px;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px; /* borde redondeado */
}

.norma:hover{
padding-left: 3px;
border-left:80px solid #a9d8e2; /* borde izquierdo hover */
filter: hue-rotate(190deg);
-webkit-filter: hue-rotate(360deg);
-moz-filter: hue-rotate(360deg);
-o-filter: hue-rotate(360deg);
-ms-filter: hue-rotate(360deg);
-webkit-transition-duration: 0.20s;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
color:#dd96af; /* color fuente */
border-radius: 3px;
text-shadow: 1px 1px 0px #fff; /* sombra fuente */
}

Ya sabéis, todo lo que está en negrita es personalizable al gusto.

2. Ahora lo único que hay que hacer es añadir un nuevo gadget HTML/Javascript y añadir el siguiente código tantas veces como nos interese, cambiando lo que está en negrita:

<div class="norma">Aquí va tu texto</div>

⸻ are u curious? click here! ⸻

Cuatro efectos en imágenes

Hey babies! ¿Os hacéis una idea de lo difícil que me está resultando hacer entradas estas últimas semanas/meses? No sé si es que estoy pasando por un burnout, el calor que está haciendo estos días (y los que faltan ahora que llega el verano) o qué es, pero es una lucha constante en mi mente para hacer las entradas, no es que esté desanimada con el blog, de hecho tengo algunas ideas que me parecen interesantes, pero darle a Nueva Entrada últimamente es un suplicio, sobre todo porque terminan todas en borradores... ¿vosotros cómo superáis estas épocas extrañas? Igual es que estoy en un mood más procrastinador de lo normal, yo que sé yo. I hate it!. Igual hago una reestructuración del blog para ver si mi estado anímico sube, pero bueno... ya veré qué hago.

En fin, después de mi desahogo personal, vengo con un tutorial cuádruple porque son cuatro efectos que se les pueden aplicar a las imágenes de todo nuestro blog. Todos son personalizables a vuestro gusto.

Como siempre, vamos a Tema > Personalizar > Editar HTML y buscamos ]]></b:skin> y justo encima colocamos el código del efecto que nos interese:

Blanco y negro

.main img {
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-ms-filter: grayscale(0%);
-o-filter: grayscale(0%);
filter: grayscale(0%);
-webkit-transition-duration: .70s;
}

.main img:hover {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
-webkit-transition-duration: .70s;
}

Desenfoque

.main img { -webkit-filter: blur(0px);
-moz-filter: blur(0px);
-ms-filter: blur(0px);
-o-filter: blur(0px);
filter: blur(0px);
-webkit-transition-duration: .70s;
}

.main img:hover {
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-ms-filter: blur(5px);
-o-filter: blur(5px);
filter: blur(5px);
-webkit-transition-duration: .70s;
}

Sepia

.main img {
-webkit-filter: sepia(0%);
-moz-filter: sepia(0%);
-ms-filter: sepia(0%);
-o-filter: sepia(0%);
filter: sepia(0%);
-webkit-transition-duration: .70s;
}

.main img:hover {
-webkit-filter: sepia(100%);
-moz-filter: sepia(100%);
-ms-filter: sepia(100%);
-o-filter: sepia(100%);
filter: sepia(100%);
-webkit-transition-duration: .70s;
}

Invertido

.main img {
-webkit-filter: invert(0%);
-moz-filter: invert(0%);
-ms-filter: invert(0%);
-o-filter: invert(0%);
filter: invert(0%);
-webkit-transition-duration: .70s;
}

.main img:hover {
-webkit-filter: invert(100%);
-moz-filter: invert(100%);
-ms-filter: invert(100%);
-o-filter: invert(100%)
;filter: invert(100%);
-webkit-transition-duration: .70s;
}

⸻ are u curious? click here! ⸻

Efecto Blur

Hey babies! ¿Habéis tenido vacaciones de Semana Santa? ¿Qué tal volver a la rutina? Yo debo decir que me está costando un poquito, pero bueno... supongo que se vuelve un poco más ameno gracias al buen tiempo y a que ya empieza a hacer calorcito.

Hoy, como veis en el título, traigo otro efecto, para que se pueda usar en afiliados o en cualquier sitio donde os interese.

Preview

1. Vamos a Tema > Personalizar > Editar HTML y buscamos ]]></b:skin> y encima pegamos el siguiente código:

.blur {
width:50px; /* ancho */
padding:0px;
border-radius: 0px;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
-webkit-filter: saturate(100%) ;
}

.blur:hover {
padding:0px;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
-webkit-filter: saturate(0%) ;
-webkit-filter: blur(2px); color:#fff;
}

Ya sabéis, lo que está en negrita se puede cambiar, podéis ir jugando añadiendo y quitando cosas para que quede a vuestro gusto.

2. Ahora lo único que hay que hacer es añadir un nuevo gadget HTML/Javascript y añadir el siguiente código tantas veces como nos interese, cambiando lo que está en negrita:

<a href="LINK DEL BLOG" title="TÍTULO DEL BLOG" onmouseover="ddrivetip('havingthemes')" 
onmouseout="hideddrivetip()"><img src="LINK DE LA IMAGEN" width="ANCHOIMAGENpx" 
height="ALTURAIMAGENpx" class="blur" /></a>

⸻ are u curious? click here! ⸻

Efecto Lover

Hey babies! Madre mía, siento que hace como mil años que no subía un efecto al blog y eso no puede ser, porque la gran mayoría son muy bonitos para usar en afiliados o donde sea, pero bueno, hoy traigo uno llamado Lover que espero que os guste.

Nota personal: Estoy escribiendo esto con los guantes puestos... mis manos se ponen tan frías que a veces no hay otro modo de calentarlas si no es así ಥ_ಥ.

P R E V I E W

1. Vamos a Tema > Personalizar > Editar HTML y buscamos <head>. Tras encontrarlo, debajo, pegamos el siguiente código:

<link href='http://static.tumblr.com/q5xxpiq/odamqngfp/lover.css' media='screen' rel='stylesheet'/>

2. Ahora buscamos ]]></b:skin> y justo arriba pegamos lo siguiente:

.lover {
float:center;
padding:2px;
border:1px solid #f2f2f2; /* borde */
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
}

.lover:hover{
border-radius: 50px;
border:1px solid #dcded2; /* fuenteborde */
-webkit-animation: lover;
-moz-animation: lover;
-o-animation: lover;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
}

Lo que está señalado se puede modificar.

3. Ahora lo único que nos queda por hacer es añadir un nuevo gadget HTML/Javascript y añadir el siguiente código y repetirlo tantas veces como nos interese y cambiar lo que está en negrita:

<a href="LINK" title="TÍTULO"><img src="URL DE LA IMAGEN" class="lover" /></a>

Y listo, ya tenemos un bonito efecto para afiliados o imágenes en general.

⸻ are u curious? click here! ⸻

Efecto Glub

Hey babies! Últimamente no dejaba de darle vueltas a una estupidez, pero que me traía de cabeza y es cómo enseñar las previews de los menús y efectos... hoy (cuando estoy escribiendo esto) por fin hallé la solución y es que hace unos meses me cree un tumblr nuevo para promocionar el blog y a pesar de que lo tengo abandonado desde hace un tiempo, he decidido crear ahí las previews, así están individualizadas y me gusta más, a ver qué os parece. Para celebrarlo (lol, cualquier excusa es buena para celebrar), hoy traigo un efecto súper cute llama Glub, que hace mucho que no traigo ninguno.

P R E V I E W

1. Vamos a Tema > Personalizar > Editar HTML y buscamos ]]></b:skin> y encima pegamos el siguiente código:

.glub {
background: #C6D5FE; /* color fondo */
padding: 4px;
border: 1px solid #BDCFFF; /* borde */
box-shadow:inset 2px 2px 2px 2px #BDCFFF; /* sombra */
-webkit-border-radius: 60px;
-moz-border-radius: 60px;
border-radius: 60px;
-webkit-transition-duration: .80s;
}

.glub:hover {
background: #C6D5FE; /* color fondo */
border: 1px solid #BDCFFF; /* borde */
padding: 4px;
box-shadow:inset 2px 2px 2px 2px #BDCFFF; /* sombra */
-webkit-border-radius: 60px;
-webkit-border-bottom-right-radius: 0;
-moz-border-radius: 60px;
-moz-border-radius-bottomright: 0;
border-radius: 60px;
border-bottom-right-radius: 0;
-webkit-transition-duration: .80s;
}

Por supuesto, todo es personalizable, pero lo que está en negrita es lo que yo recomiendo cambiar.

2. Ahora lo único que hay que hacer es añadir un nuevo gadget HTML/Javascript y añadir el siguiente código tantas veces como nos interese, cambiando lo que está señalado:

<a href="LINK" title="Título"><img src="LINK IMAGEN" class="glub" /></a>
<a href="LINK" title="Título"><img src="LINK IMAGEN" class="glub" /></a>
<a href="LINK" title="Título"><img src="LINK IMAGEN" class="glub" /></a>

Y voilà, tenemos un efecto muy bonito para usar, por ejemplo, en nuestros afiliados. ¿Qué os parece?

⸻ are u curious? click here! ⸻

Efecto lateral

Hey babies! Espero que estéis bien. Yo hoy (cuando estoy escribiendo esto) sí que lo estoy, pero ayer... ay dios mío. El lunes me pusieron la segunda dosis de la vacuna (Pfizer) y ayer, después de dormir la siesta porque apenas había dormido nada por la noche, me empezó a subir la fiebre y uff... llegué a 38º, pero menos mal que se me pasó después de tomarme un paracetamol y mucho mejor 🙌. Y ahora, aunque me duele un poco el brazo del pinchazo y tengo la zona roja, no estoy nada mal 💪. Y vosotros, ¿ya os habéis vacunado?

En fin, como he visto que sólo había subido dos efectos al blog, he pensado traer otro que me parece muy bonito para usar en afiliados y es el Efecto lateral.

P R E V I EW

1. Vamos a Tema > Personalizar > Editar HTML y buscamos ]]></b:skin> y encima pegamos el siguiente código:

.lat {
border: 1px solid #ccc; /* borde */
background: #f8f8f8; /* color fondo */
padding: 2px;
}

.lat:hover {
transition:All 1s ease;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
-moz-transform: scale(1) rotate(90deg) translate(0px, 0px) skew(0deg, 0deg);
-webkit-transform: scale(1) rotate(90deg) translate(0px, 0px) skew(0deg, 0deg);
-o-transform: scale(1) rotate(90deg) translate(0px, 0px) skew(0deg, 0deg);
-ms-transform: scale(1) rotate(90deg) translate(0px, 0px) skew(0deg, 0deg);
transform: scale(1) rotate(90deg) translate(0px, 0px) skew(0deg, 0deg);
}

Todo lo que está en negrita, se puede modificar.

2.  Ahora lo único que hay que hacer es añadir un nuevo gadget HTML/Javascript y añadir el siguiente código tantas veces como nos interese:

<a href="LINK" title="TÍTULO"><img class="lat" src="LINK IMAGEN" /></a>
<a href="LINK" title="TÍTULO"><img class="lat" src="LINK IMAGEN" /></a>

Cambiamos lo que está señalado y listo!

⸻ are u curious? click here! ⸻

Efecto Swivel

Hey babies! Hoy, como habéis podido ver en el título, traigo otro efecto para vuestras imágenes en general o para los afiliados o, en resumen, para lo que queráis (si es que no hay nada escrito).

P R E V I EW

1. Vamos a Tema > Personalizar > Editar HTML y buscamos <head> y DEBAJO pegamos el siguiente código:

<link href='http://static.tumblr.com/74tqsur/WvZmoiiow/swivel.css' media='screen' rel='stylesheet'/>

2. Ahora buscamos ]]></b:skin> y justo encima pegamos lo siguiente: 

.swivel {
padding: 1px;
background: #f5f5f5; /* color de fondo */
border:1px solid #c7c7c7; /* borde */
margin:3px;
-webkit-transition-duration:.99s;
-webkit-animation: swivel 1s;
-moz-animation: swivel 1s;
}

.swivel:hover {
OPACITY: 0.6;
outline-style: transparent;
transform: rotateY(-360deg) scale(1) skew(0deg);
-moz-transform: rotateY(-360deg) scale(1) skew(0deg);
-webkit-transform: rotateY(-360deg) scale(1) skew(0deg);
-o-transform: rotateY(-360deg) scale(1) skew(0deg);
}

Lo que está en negrita se puede modificar, en este caso, el color y la anchura del borde, además del color del fondo.

3. Para terminar, añadimos un Gadget HTML/Javascript y ponemos el siguiente código:

<a href="Link" title="Texto"><img src="Imagen" class="swivel" /></a>

Y sólo hay que sustituir lo que está señalado. Además, también podemos quitarle el link si no es algo que nos interese.

⸻ are u curious? click here! ⸻

Efecto parpadeo

Hey babies! Creo que en este blog aún no había subido ningún efecto y me parece fatal, ya que los hay muy bonitos, sobre todo si os interesa ponerle algún efecto bonito a los afiliados (o a cualquier imagen del blog), así que hoy traigo el primero y es un efecto parpadeo muy cute.

P R E V I EW

1. Vamos a Tema > Personalizar > Editar HTML y buscamos <head> y DEBAJO pegamos el siguiente código:

<link href='http://static.tumblr.com/dlelfro/QJ2mh90b7/pisca2.css' media='screen' rel='stylesheet'/>

No hay que modificar nada, sino el efecto no funcionará.

2. Ahora buscamos ]]></b:skin> y justo encima pegamos lo siguiente: 

.efeitopisca1{
padding:2px;
border:1px solid #dcdbdb;
}

.efeitopisca1:hover{
-webkit-animation-name: pisca;
-moz-animation-name: pisca;
-o-animation-name: pisca;
animation-name: pisca;
-webkit-animation-duration: 1s;
}

Lo que está en negrita se puede modificar, en este caso, el color y la anchura del borde.

3. Para terminar, añadimos un Gadget HTML/Javascript y ponemos el siguiente código:

<a href="LINK DEL BLOG" title="NOMBRE DEL BLOG">
<img src="LINK DE LA IMAGEN" class="efeitopisca1" /></a>

Y sólo hay que sustituir lo que está en negrita. Además, también podemos quitarle el link si no es algo que nos interese.

⸻ are u curious? click here! ⸻