30 Ene

Galería de iconos

Gradientify es una Interesante galería de iconos que destaca por dos cosas: la primera es que ofrece un estilo personal y diferente, alejado de los típicos diseños que encontramos en galerías genéricas; lo segundo es que permite añadirles un efecto degradado, antes de descargar, para personalizarlo con tus propios colores. Recordaros -además- que es un proyecto de Iconshock, otra galería completísima con muchos más iconos. Ambas ofrecen la posibilidad de descargar en SVG (vectorial).

10 Dic

Contador social personalizado

Genera tu código para poner los contadores sociales de moda en tu Web: Facebook, Twitter y Google Plus.

– Abrir generador de código

9 Nov

Entradas personalizadas en WordPress

Todos sabemos que WordPress es uno de los mejores sistemas para tener nuestra propia página de Noticias y, desde no hace mucho, también para páginas corporativas o personales. Pero, qué ocurre si necesitamos una plataforma donde publicar vídeos, libros, citas, chistes o música (por poner sólo algunos ejemplos)?  Entonces nos encontramos con que los campos de «Fábrica» en las publicaciones de WordPress se nos quedan chicos.

Gracias a este excelente tutorial (en inglés, como no podía ser menos) aprenderemos a crear nuestros propios tipos de entradas con nuestros campos personalizados.

– Ver tutorial crear entradas personalizadas en WordPress

11 Sep

Desplegable con diseño custom

Habré probado decenas de códigos para customizar el aspecto de un listbox pero la verdad que no me ha convencido ninguno particularmente.

Este parece tener mejor pinta.

· Demo Ver Contenido‘

– Archivo Adjunto: selectBox.zip

Crea tus fondos mosáicos Web

Generalmente nos encontramos con la difícil tarea de crear fondos que se puedan repetir de manera homogénea en una Web. Para ello hay que hacer uso de mosaicos (tiles).

Los mosaicos nos permiten usar un pequeño JPG o GIF que repetido generan un diseño homogéneo. Con ello ahorramos espacio y la Web luce mucho mejor.

Para facilitarnos la tarea existen Webs como Tiled Backgrounds Designer que mediante un interface intuitivo y fácil nos permite crear fondos propios, a medida, usando una librería de iconos, motivos, texturas y colores.

Usable y rápida, no os la perdáis:
Ver Contenido‘

Rótulos con fuente custom

Un problema a la hora de diseñar Webs en HTML es que los rótulos de las columnas, textos de botoneras o citas, etc. debemos de insertarlos en JPG o GIF. La razón es sencilla, se suelen poner fuentes llamativas, fuentes que generalmente no tiene nadie, por lo tanto el explorador no las puede interpretar y deja la Arial por defecto. Esto conlleva que Google no las puntúe de forma óptima. Lo mejor es usar las etiquetas H1 o similar.

Así que… como podemos usar una fuente que nos guste, que todo el mundo la pueda ver, aunque no la tenga, y que google la capte como H1 por ejemplo?

La respuesta la tenéis mejor explicada aquí (Ver Contenido‘) de lo que yo sería capaz de hacerlo así que no os lo perdáis porque.

Mirar este ejemplo (Ver Contenido‘), el código fuente (que son H1) y las fuentes que son custom.

Una pasada para optimizar en buscadores desde luego con sIFR y JQuery.

Input File con diseño CSS

Un lastre que solemos llevar todos los diseñadores es el de los campos de formulario para subir archivos (fotos, PDF, etc.) Son muy feos! Y difíciles de modificar mediante CSS…

Con este método, usando CSS y DOM, podremos customizar la imagen y quitar el campo de texto. Echarle un ojo a la demo, la funcionalidad sigue siendo la misma pero con un look mucho más fácil de integrar.

· Demo Ver Contenido‘

– Archivo Adjunto: inputcss.rar