Loading...
Blog 2017-06-07T02:25:45+00:00

¿Intercambiamos conocimientos?

Cinemagraphs: ¿Cómo se hacen?

Seguro que alguna vez los has visto. Los Cinemagraphs son fotografías en movimiento y, en realidad, su proceso de elaboración es muy sencillo.

Solo necesitas una cámara de vídeo, un trípode o soporte y Adobe Photoshop. 

PASO 1 Graba un vídeo:

Con la cámara fija sobre algún soporte o trípode, grava un vídeo. Claro está que en el vídeo ¡debe haber movimiento!

PASO 2 Abre Photoshop:

El proceso es muy simple. Arrastra el vídeo a Photoshop y en el menú Ventana selecciona la opción Línea de Tiempo.
Duplica el vídeo y, en la copia, haz click derecho y “Rasterizar Capa”. A continuación, solo debes crear una mascara haciendo click en este icono:

 

 

Utiliza la herramienta pincel (en color negro) para pintar la parte que no quieras fija. Et voilà!

Ahora solo te queda exportarlo haciendo click en el menú Archivo>Exportar> Guardar para Web y selecciona la opción Giff.¡Y ya tienes tu Cinemagraph!

Si deseas ver mas ejemplos visita ésta colección.

Efectos Hover para cajas en CSS

¿Has visto alguna vez un efecto hover en cajas y no sabes cómo se aplica?

Si eres programador o diseñador, seguramente alguna vez te ha pasado que tenías diferentes textos para poner en una página y no sabías que diseño ponerle.

Hoy os explicaremos un tipo de diseño para textos que queda muy bien y es muy fácil de crear, el efecto hover.

Se trata de un tipo de cajas con sombra al hacer hover con el ratón.

Al pasar por encima cambia el color, de modo que si tenemos un color corporativo siempre queda bien.

Debemos de introducir una clase a los textos, en mi ejemplo pondre box-texto. Una vez creada la clase pondremos en el siguiente código:

 

.box-texto{ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }

.box-texto:hover{ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 #COLOR; }

 

 

El primero código se trata de darle una sombra a la caja.

El segundo, es la acción de hover con el ratón, modificando el color según queramos en #COLOR.

Si deseas más información sobre éste uso de CSS visita éste enlace.

Las 5 mejores webs para descargar tipografías

Si queremos buscar una tipografía sin la necesidad de invertir dinero, hay muchos recursos web donde encontrar tipografías gratuitas.

Muchas veces es difícil encontrar una tipografía de nuestro gusto o de un estilo concreto, ya que existen una infinidad de estas. Por suerte en internet encontramos varios sitios web donde descargar estas fuentes. Muchos de ellos tienen miles de tipografías y las tienen muy bien clasificadas, ya sea por orden alfabético o por estilo.

La mayoría de los sitios web nos permiten obtener una vista previa de la fuente en concreto, incluso algunas páginas permiten al usuario escribir una frase o un texto para comprobar como se ve escrito con la letra seleccionada.

En esta entrada haremos una búsqueda de las que consideramos como las 5 mejores webs para buscar tipografías gratuitas.

Todas estas páginas permiten descargar de manera sencilla los tipos de fuente de los que disponen. Son páginas dónde las fuentes están perfectamente categorizadas y su búsqueda es muy sencilla e intuitiva.

Cómo página extra, nos gustaría mencionar otro recurso para todas aquellas personas que realizan desarrollo web:

Google Fonts

En esta web, el gigante Google ha creado un catálogo muy completo de tipografías dónde el usuario puede acceder a ellas de manera gratuita y una vez seleccionada la fuente, la página proporciona unos enlaces para adherir al sitio web en cuestión y utilizarla sin tener que descargar la tipografía.