Estos botones utilizan muy inteligentemente nuevas propiedades de CSS3, como los bordes redondeados (border-radius), color en hsl, texto sombreado (text-shadow).

Sinceramente, estoy deseando que los desarrolladores y diseñadores web podamos empezar a usar sin miedo estas nuevas propiedades de CSS3.

Si te interesa ver un poco sobre el tema, puedes trastear con este generador de código CSS3, y echar un vistazo a CSS3 please!,  imprescinbibles.

Y si quieres ver algunas otras cosas interesantes hechas con CSS, mira estos artículos: fondos con gradientes con CSS3 y Animar texto con CSS3.

Sin duda, que llegue CSS3 ya, por favor

Dado este botón:

<input type=”submit” value=”Buscar” class=”button” />

Usamos un CSS parecido a este para que se muestre la imagen como botón y se esconda el texto “buscar”, que aparecería por defecto como texto del botón (por encima incluso de la imagen) si no hacemos nada:

input.button {
        width:64px;
        height:23px;
        border: none;
        background: transparent url(../images/bsearch.gif) no-repeat center;
        overflow: hidden;
        text-indent: -9999%;
        }

Pues bien, cualquier navegador decente nos devuelve una renderización correcta del código anterior, obteniendo un resultado parecido a este:

Pero para variar,el dichosos Internet Explorer (tanto ie6 como ie7) hace de las suyas y a pesar de las propiedades establecidas, sigue mostrando el texto del botón por encima de la imagen de fondo que hemos establecido como botón.

Para solucionar este error, suelo aplicar una solución que me ha ido genial siempre que la he aplicado, además de ser sencilla y no interferir con el correcto renderizado de Internet Explorer ni del resto de navegadores (no es un hack). Lo que hago es aplicar estas líneas de código al estilo CSS del botón:

font-size: 0;
display:block;
line-height: 0;

Lo que hacemos es darle un tamaño cero al texto del botón, lo cual funciona perfecto en ie7, pero en ie6 sigue viéndose una línea blanca en lugar del texto, así que le añadimos las otras dos declaraciones para arreglar el bug también en ie6.

Como resultado tenemos el CSS siguiente, que arregla tanto en ie6 como en ie7 el problema con text-indent en los inputs y botones de nuestros formularios:

input.button {
        width:64px;
        height:23px;
        border: none;
        background: transparent url(../images/bsearch.gif) no-repeat center;
        overflow: hidden;
        text-indent: -9999%;
        font-size: 0;
        display:block;
        line-height: 0;
        }

Hace unos días leí el artículo how to reduce the number of HTTP request, muy útil para acelerar la carga de nuestras webs. Además justo estos días atrás  en lawebera.es escribimos un artículo sobre el tema, y anteriormente hemos publicados otras cosas relacionadas que puedes leer aquí: Cómo hacer diseños web de carga rápida y como acelerar la carga de un sitio web.

Entre otras cosas, en el artículo explican la utilidad básica de CSS Sprites:

• CSS Sprites: es una técnica usada para combinar una serie de imágenes en una. A continuación, utilizando la propiedad background-position en el archivo CSS se controla qué parte de esa imagen será visible para un cierto elemento. De esta manera, en lugar de tener una petición HTTP para cada imagen individual, sólo habrá una para un archivo de imagen más grande que contiene a todas las demás. Muy recomendable.

Algunos recursos sobre CSS Sprites:

• CSS Sprites Generator: subes las imagenes a juntar en el sprite y la aplicación te crea la imagen padre junto con el background-position adecuado para cada imagen.
• Tutorial básico de CSS Sprites: un tutorial para iniciarse en el uso de esta técnica y empezar a ver sus ventajas, muy sencillo.
• Guía de CSS Sprites I y II: una guía mucho más completa de esta técnica. Muy recomendable su lectura.
• CSS Sprites de A List Apart: este artículo sobre el tema es casi una leyenda de las veces que ha sido nombrado y enlazado. Está en inglés, pero merece la pena leerlo.

¡A optimizar!

Leyendo Smashing Magazine me topé con este diseño, y francamente, me ha dejado asombrada.

Pocos diseñadores web están al alcance de crear diseños como este, sobre todo por la parte artística, o cuando menos pocos se atreven. No he visto cosas parecidas muchas veces, y siempre es de agradecer que a alguien se le ocurran este tipo de ideas y se exploten.

La parte gráfica es impecable para mi gusto, no puede llamar más la atención al visitante. Creo que en ese sentido logran muy bien los objetivos de la página puesto que es básicamente un portafolio de una empresa de diseño, y que mejor que impresionar al cliente con el diseño de tu propia web, es el mejor escaparate.

Por otro lado, la navegación resulta fácil, se han encargado de delimitar bien cada zona de la web con esa estructura de árbol tan original. Las diferentes ramas separan los post, las secciones…

Personalmente me gusta mucho el efecto de la rueda giratoria que hay en cabecera. Ya que te pones a hacer un diseño espectacular que menos que añadirle algo de flash… desde luego, tienen un excelente diseñador gráfico en su plantilla.

Como contra, tal vez la imagen de cabecera inutiliza un poco el resto de la página al ser tan grande y obligar a hacer scroll si quieres leer de que va el asunto. Yo habría aprovechado un poco más el diseño de lo que está, integrando más los botones que se ofrecen al principio de página. Por ejemplo para el botón de twitter habría usado la caseta que hay colgando en el sidebar.

Por otro lado, me da la sensación de que lanzan toda la artillería en el banner de cabecera con esa gran imagen y una vez llegas a los post, se vuelve un blog bastante corriente, que por un lado está muy bien para la usabilidad, pero por otro da la sensación de que falte algo.

Un dato, no dejéis de ver el pie de página, que no tiene nada que envidiar a la cabecera. Aunque como decía no hubiera estado de más añadirle alguna utilidad a tan fantástica gráfica. Otro ejemplo, hacer funcional ese buzón de correo que hay en la imagen del footer para ofrecer un medio de contacto.

¿qué opinas tú de este diseño web?

Por ejemplo,puedes encontrar trabajos reales de páginas de error 404, fondos de pantalla, botones, bordes y más

Como usuario, puedes crear tus propias galerías con los diseños que más te gusten, como esta galería de texturas de papel y seguir la pista a los usuarios que te gusten para encontrar las galerías que ellos mismos han creado.

Los diseños web que muestran en sus galerías son de mucha calidad, actuales y variados. Sólo falta que más usuarios contribuyan colgando sus diseños para que se convierta en una web de referencia como fuente de inspiración a diseñadores y maquetadores web.

Enlace: Pattern Tap.

Ejemplo de imagen con Pixel Button:

Navegando un poco más me he encontrado con otra herramienta que hace lo mismo, RSS Button. Esta te permite personalizar más los botones, ya que a parte de las opciones de la anterior herramienta online, puedes elegir el tipo de letra, su tamaño y el ancho de cada parte, así como el margen entre el texto y el borde de la imagen.

Ejemplo de imagen con RSS Button:

Anteriormente ya se comentó en este blog una herramienta gratis para crear botones web 2.0, tal vez también te interese.

Te dejan ajustar el tamaño, el color, el tipo de letra y poco más, pero es suficiente para hacer un botón sencillo si no sabes manejar programas de diseño o no tienes ganas de hacerlos tú mismo.

Otras herramientas web 2.0 comentadas en este blog:

• Fondos rayados.
• Encuestas gratis.

Cuando tengas el fondo que quieras lo único que tienes que hacer es descargar la imagen que genera el programa automáticamente e implementarlo en tu web añadiendo el siguiente código a tu hoja de estilos : background-image: url(“nombre-de-la-imagen.png”);

También puedes ver los últimos fondos que han hecho otros usuarios y descargártelos para usarlos en tu página web.

Nota: la imagen previa del fondo sólo se actualiza cuando pinchas encima de ella, por lo que para ver una previsualización de cada cambio hecho en las propiedades del fondo que estés haciendo tendrás que pinchar en la preview para que se refresque la imagen.

Otras herramientas web 2.0 comentadas en este blog:

• Botones web 2.0.
• Encuestas gratis.

No insertan publicidad en las encuestas ni te redireccionan a la página del programa, puedes personalizar el estilo de las encuestas y es compatible con los CSM de weblogs más famosos, como WordPress y Blogger.

Poner encuestas gratis en tu web o en tu blog puede ser una buena forma de interactuar con tus usuarios, algo que cada vez se está imponiendo más y más en las nuevas generaciones de webs, al mismo tiempo que sondeas sus opiniones sobre temas que te preocupen.

Otras herramientas web 2.0 comentadas en este blog:

• Fondos rayados.
• Botones web.

Actualización (10/09): En esta entrada puedes ver un plugin para integrar las encuestas de PollDaddy en WordPress.