FREEBIE | LÁMINA PARA TU CASA
El mes que viene hará ya dos años que vivimos en el piso nuevo y como no, había que llenar ese espacio vacío que quedaba en la pared del comedor. Hicimos un mural dibujado a mano de una mezcla de ilustraciones de Rik Lee. Podéis ver la foto en mi Instagram aquí. La foto es "chunguísima", lo sé, así que pido disculpas de antemano ;) Nos liamos a comprar rotuladores UniPosca como si no hubiera mañana y la verdad es que el resultado fue muy bueno. Al menos a nosotros nos encantaba, el fallo, darle color. Enseguida nos cansamos de tanto colorido y cogimos pintura y rodillo y el mural desapareció hace unos meses. Ahora hemos decidido colocar un cuadro en su lugar, así que me puse a probar cosas con Photoshop para hacer una lámina y voilà, éste es el resultado. Quiero compartirla con vosotros, podéis descargarla haciendo click en la imagen si vosotros también queréis tenerla. El tamaño está pensado para un cuadro Ribba de Ikea de 70x100cm con un passepartout de 49x69cm. ¡Que lo disfrutéis! ¡Feliz fin de semana!
HTML/CSS | CÓMO CAMBIAR LA OPACIDAD DE LAS IMÁGENES
Una de mis "manías" al visitar blogs es ir pasando el ratón por cualquier parte para ver el color de los enlaces al pasar el ratón, por los iconos de redes sociales y ver si hay algún tipo de efecto. Lo mismo me pasa en las imágenes del sidebar, por ejemplo. No sé, pero creo que aplicar efectos al pasar el ratón por encima a los distintos elementos de una página hace que haya más interacción, o al menos esa es mi sensación, vaya. A mí me incita a clickar. ¿Vosotros también sois de esos?
Así que hoy voy a explicar en 3 sencillos pasos cómo aplicar el efecto de cambio de opacidad en imágenes. Lo mejor de todo es que como los iconos sociales son imágenes también sirve para ellos. Fijaos en mis iconos sociales, si pasáis el ratón sobre ellos se vuelven negros y esto es gracias al cambio de opacidad.
PASO 1
Necesitaréis la URL de la imagen o imágenes en cuestión y el link del enlace a la página que queráis que os lleve. Y añadid un nuevo gadget HTML/JAVASCRIPT.
PASO 2
Después copiad y pegad este código en el gadget, que como véis está encerrado dentro de una etiqueta div con una clase que se llamará cambio_opacidad y modificadlo con vuestros links.
<div class="cambio_opacidad"><a href="LINK-PÁGINA"><img src="URL-IMAGEN"></a></div>
NOTA: Podéis añadir tantos links con imágenes como queráis, como por ejemplo en el caso de los iconos sociales. No tiene porqué ser sólo una imagen. Pero eso si, todas las etiquetas <a> deberán estar encerradas dentro de la etiqueta <div>
EJEMPLO:
<div class="cambio_opacidad">
<a href="LINK-PÁGINA-FACEBOOK"><img src="URL-IMAGEN-FACEBOOK"></a>
<a href="LINK-PÁGINA-TWITTER"><img src="URL-IMAGEN-TWITTER"></a>
<a href="LINK-PÁGINA-INSTAGRAM"><img src="URL-IMAGEN-INSTAGRAM"></a>
<a href="LINK-PÁGINA-PINTEREST"><img src="URL-IMAGEN-PINTEREST"></a>
</div>
<div class="cambio_opacidad">
<a href="LINK-PÁGINA-FACEBOOK"><img src="URL-IMAGEN-FACEBOOK"></a>
<a href="LINK-PÁGINA-TWITTER"><img src="URL-IMAGEN-TWITTER"></a>
<a href="LINK-PÁGINA-INSTAGRAM"><img src="URL-IMAGEN-INSTAGRAM"></a>
<a href="LINK-PÁGINA-PINTEREST"><img src="URL-IMAGEN-PINTEREST"></a>
</div>
PASO 3
Ahora que ya tenemos el código vamos a aplicarle el estilo a la imagen con CSS. Id a PLANTILLA - PERSONALIZAR - AVANZADO - AÑADIR CSS y pegad el siguiente código, que podéis modificar a vuestro gusto en función de si queréis que la imagen sea más transparente desde un principio y después sea más opaca o al revés. ¡Y listo!
.cambio_opacidad img{
opacity:1;
filter:alpha(opacity=100);
}
.cambio_opacidad img:hover{
opacity:0.4;
filter:alpha(opacity=40);
}
opacity:1;
filter:alpha(opacity=100);
}
.cambio_opacidad img:hover{
opacity:0.4;
filter:alpha(opacity=40);
}
NOTA: El atributo opacity y filter indican lo mismo pero para diferentes navegadores. Si queremos que nuestra imagen sea totalmente opaca deberemos cambiar el atributo así: opacity:1; y en filter:alpha(opacity=100); en cambio si queremos que disminuya su opacidad deberemos hacer decrecer el valor, por ejemplo para que se viese transparente en un 50% deberíamos poner: opacity: 0.5; y en filter: alpha(opacity=50);. Lo que quiero decir es que no podemos darle un valor a opacity por ejemplo de 0.8 y a filter de 60.
EJEMPLOS (PASA EL RATÓN POR ENCIMA DE LAS IMÁGENES)
.cambio_opacidad img{
opacity:1;
filter:alpha(opacity=100);
}
.cambio_opacidad img:hover{
opacity:0.5;
filter:alpha(opacity=50);
}
<----
opacity:1;
filter:alpha(opacity=100);
}
.cambio_opacidad img:hover{
opacity:0.5;
filter:alpha(opacity=50);
}
<----
.cambio_opacidad img{
opacity:0.6;
filter:alpha(opacity=60);
}
.cambio_opacidad img:hover{
opacity:1;
filter:alpha(opacity=100);
}
<----
opacity:0.6;
filter:alpha(opacity=60);
}
.cambio_opacidad img:hover{
opacity:1;
filter:alpha(opacity=100);
}
<----
¿Qué os ha parecido el tutorial? ¿Pensáis ponerlo en práctica? ¡Que tengáis un buen fin de semana!
PLAYLIST #4 [CANDY]
 |
| ((foto: juan serlo)) |
¡Hola! Vuelta a empezar, esta última semana he estado un poco desaparecida del blog y es que estoy metida de lleno con el diseño de los ganadores del sorteo. De momento he comenzado el de Javi de Yonolotiraria (seguro que muchos y muchas le conocéis ya), que chico más majo ¡oye! me da vía libre para hacer y deshacer prácticamente a mi antojo y cada vez que recibo un mail suyo para saber que le va pareciendo lo único que me dice es: "¡cómo me gusta esto!".
Para los que le seguís, estad atentos, porque ya casi está terminado y en breve podreís ver el lavado de cara de su blog. Así que mientras yo ando liada os dejo esta Playlist con música que suelo escuchar mientras "trabajo". ¡Que tengáis un buen comienzo de semana!
01. All Night Long » Peter Murphy
02. Everybody Wants To Rule The World » Tears For Fears
03. Candy » Paolo Nutini
04. Little Numbers » BOY
05. It's My Life » Talk Talk
06. You've Got The Love » Florence + The Machine
07. Johnny And Mary » Robert Palmer
08. Such A Shame » Tal Talk
09. Can't Stand Losing You » The Police
ILUSTRACIÓN | KRIS TATE
Kris Tate nació en Guatemala, aunque actualmente reside en el Reino Unido, estudió Arte y Diseño Gráfico. Esta ilustradora amante del arte, de la pintura, de la ilustración, de la música, de la naturaleza, de la fotografía, de la moda vintage y de las películas independientes, se inspira en sus raíces y en la música que escucha para crear sus obras que ella misma define en una entrevista concedida para lamono magazine como un cocktail experimental y geomético, abstracto e independiente. ¿Y a vosotros qué os parece Kris Tate? Si queréis ver más visitad su portafolio aquí.
¡Que tengáis un buen Miércoles!
I HEART TYPE #2
Viernes otra vez, últimamente las semanas me pasan volando ¿a vosotros no? parece mentira que ya estemos en Octubre y más con este calorazo de la muerte. Que llegue ya el frío por favor, qué ganas tengo de ponerme un jersey y unas botas. Mientras lo espero impaciente he estado buscando nuevas tipografías y he dado con éstas dos que me han enamorado y lo mejor: son gratis para uso comercial.
La primera es Seasideresort y me encanta por la doble sombra que tiene, me gusta mucho este efecto, aunque también se puede conseguir con CSS o Photoshop pero así se aligera el trabajo.
La segunda tipografía es High Tide y ésta ya me requetencanta, no sé que me ha dado últimamente con este tipo de fuentes, pero a mí me parece brutal.
¿Y a vosotros qué os parecen estas tipografías? ¡Que tengáis un buen finde!
¿Y a vosotros qué os parecen estas tipografías? ¡Que tengáis un buen finde!
FREEBIE BLOGUERAS MOTIVADAS | ICONOS SOCIALES
¡Hola! ¿qué tal estáis? Hoy hay una nueva "entrega" de BLOGUERAS MOTIVADAS. Si nos seguís en Facebook seguro que ya lo sabiáis, si no lo hacéis aún ¿a qué esperáis para no perderos nada?
Pues bien, ésta vez llegamos con un pack no, sino un montón de iconos sociales para vuestros blogs. Además contamos con 3 colaboradoras de lujo: Organicus, Honi Mun y Flequilu en particular.
Pues bien, ésta vez llegamos con un pack no, sino un montón de iconos sociales para vuestros blogs. Además contamos con 3 colaboradoras de lujo: Organicus, Honi Mun y Flequilu en particular.
Os presento nuestros diseños. Elegid los que más os gusten, pasad a cotillear por los demás blogs y ¡a descargar como si no hubiera mañana! (Al final del post encontraréis el link para descargar mis iconos)
Aquí tenéis los enlaces para descargar los diseños de BLOGUERAS MOTIVADAS en sus respectivos blogs:
Aquí los links para descargar los diseños de las COLABORADORAS de Octubre:
Y aquí para descargar mis diseños
ICONOS SOCIALES DE SMUK THINGS BY BLOGUERAS MOTIVADAS
Iconos Sociales en 6 colores diferentes modelo banderín.
Iconos Sociales en 6 colores diferentes modelo texto.
DESCARGAR
Iconos Sociales en 6 colores diferentes modelo banderín.
Iconos Sociales en 6 colores diferentes modelo texto.
DESCARGAR
Por si lo necesitáis, aquí tenéis un tutorial súper bien explicado de Marta de 2nd Funniest Thing sobre cómo instalar los iconos en vuestros blogs.
¡Que tengáis un buen Miércoles y disfrutéis de los iconos!
¡Que tengáis un buen Miércoles y disfrutéis de los iconos!
RESULTADO SORTEO
¡Por fin llegó el día! No me quiero enrollar mucho, pero sí quiero agradeceros a todos y cada uno de los que habéis participado en el sorteo, significa mucho para mi, sobre todo leer vuestros comentarios y ver que os gusta lo que hago. De verdad, todo lo que pueda decir es poco para daros las gracias.
¡Y ahora a por el resultado!
¡Enhorabuena a los ganadores! Poneos en contacto conmigo escribiéndome un mail a hola@smukthings.com y comenzaremos con vuestros retratos y diseños de blogs!
Suscribirse a:
Entradas (Atom)