La ‘curiosidad’ del viernes – Hipervínculos, iconos con CSS y cómics

EL PODER DE LOS HIPERVÍNCULOS

Los hipervínculos son los que hacen que Internet sea Internet: una red de conexiones, de conocimiento. Aunque últimamente se ha diluido su importancia, y por eso, Murilo Mafra y Zeh Fernandes han decidido rendirle tributo con “La batalla del hiperlink”.

Las reglas del juego establecen que cada día dos hiperlinks (cada uno ha escogido uno) compiten por la victoria: ser el hipervínculo más votado. El tema al que dirige el vínculo tiene que estar relacionado con la letra del día y hay 27 rondas (una por letra).  La letra elegida es diseñada por un ilustrador diferente cada día.

letras

 

ICONOS SOLO CON CSS

¿Aburrido de tener siempre los mismos iconos en tu diseño? Si necesitas un pequeño cambio puedes empezar utilizando otro recurso: el propio CSS.

En la página de “Truth Labs” nos dan unas pautas, de cómo hacer algunos iconos siguiendo estos sencillos pasos.

iconos

 

MARIO vs WARIO

Para los amantes del cómic este enlace será una joya divertida. Y para los que no lo sean, pues la página al menos está hecha de una manera original y precisa.

Los héroes y villanos de los cómics son ahora presentados ¡con aspecto de Mario Bros! ( Por ejemplo: “Mario” como “Catwoman” no tiene desperdicio).

capi-skull

También tengo bajo la manga algunas novedades de Codepen… pero me voy a hacer de rogar hasta el próximo viernes.

La ‘curiosidad’ del viernes – Código limpio, herramientas y pixels

Todos lo sabemos, hay cosas que a la hora de maquetar NO tenemos que hacer… y las hacemos, las hacemos.
Hacks, trucos que sacamos de debajo de la manga, márgenes negativos, propiedades dudosas, “!important”.
Así que ahora tenemos a nuestra disposición una herramienta curiosa.

DIRTY MARKUP

“Dirty Markup” es una ayuda para ver esos pequeños errores que se te han podido pasar: reglas vacías o repetidas, error en el orden de las propiedades con “vendor-prefixes” y cosas por el estilo. Lo único que tienes que hacer es pegar tu código (HTML, CSS o Js) y te hará algunas sugerencias de cómo mejorarlo.

Algunas recomendaciones las podríamos obviar: si, todos sabemos que no hay que incluir “!important” pero… que me digan cómo se sobreescriben los estilos inline de un CMS sin usarlos.

Aún así, es útil.

dirty

Otra cosa más para un viernes cómo hoy ¿estás al día con las herramientas más utilizadas para diseñar?

THE TOOLS DESIGNERS ARE USING TODAY

¿Crees que sí? Bueno, pues cotillea un poco este test. Si no usas las que han sido más votadas, no pasa nada. Pero, si ni siquiera te suenan… es un buen momento para empezar a investigar.

tools

 

 

Y por último, algo curioso… aunque esta vez no os lo traigo de Codepen (hoy he sido infiel).

GLITCH TOP

¿Nunca has sentido deseos de llenar de pixels tu pantalla? Ahora si los vas a tener, aunque solo sea para darle al play y ver cómo funcionan las selecciones de color que has hecho.

glitchtop

 

 

Y con esto me despido hasta la próxima semana.

 

La ‘curiosidad’ del viernes – Parallax y otras historias

Septiembre nos ha traído el recuerdo de que se acaba el verano, la jornada intensiva (para los afortunados que la hayan disfrutado)… pero para evitar que la tristeza nos sobrecoja, aquí un poco de inspiración “viernera”.

PARALLAX – STORY TELLING

Primero, en “Line25” han creado esta recopilación de 15 webs que usando Parallax te cuentan una historia.
Estas página llevan años circulando por la web, pero nunca está de más refrescarnos la memoria. Si sólo tenéis tiempo para ver alguna, os recomiendo encarecidamente “The hybrid graphic novel”. La propuesta gráfica es… en una palabra, brutal. Y otra que es muy diferente :”How far is it to Mars“, también es muy divertida.

pantallas-parallax

CARTAS 

Cambiando el tercio y volviendo a HTML5 y CSS3 ¿jugamos una partida de cartas?
El código de esta baraja de cartas está en Github.
Si, ya sé que sacar cartas una de tras de otra, puede parecer poco emocionante pero ¿qué queréis que os diga? Es muy entretenido. También se puede barajar automáticamente, distribuir las cartas…

baraja-cartas

CÍRCULOS CSS

Y por último, pero no por ello menos importante, Codepen. Ya sabéis, un clásico:
Círculos hipnóticos, ¡sólo con CSS! 

circulos-hipnoticos

¿Algún ruego, petición, pregunta? ¿No?… ¿Seguro? Bueno, pues hasta el próximo viernes.