Hoy os traemos un CSS de un tal Michael Hüneburg que os permite displayar cómodamente combos de teclados, idóneas para manuales o instrucciones en formato HTML, típicas de “Presione CTRL + S para grabar…”

Este CSS convertirá esos textos en auténticas teclas de teclado estilo Apple Mac con teclado de aluminio, un CSS que ocupa na y menos y que por tanto podrás incorporar en tu propio CSS.

A continuación el código del CSS:

/**
 * KEYS.css
 *
 * A simple stylesheet for rendering beautiful keyboard-style elements.
 *
 * Author:  Michael Hüneburg
 * Website: http://michaelhue.com/keyscss
 * License: MIT License (see LICENSE.txt)
 */

/* Base style, essential for every key. */
kbd, .key {
	display: inline;
	display: inline-block;
	min-width: 1em;
	padding: .2em .3em;
	font: normal .85em/1 "Lucida Grande", Lucida, Arial, sans-serif;
	text-align: center;
	text-decoration: none;
	-moz-border-radius: .3em;
	-webkit-border-radius: .3em;
	border-radius: .3em;
	border: none;
	cursor: default;
	-moz-user-select: none;
	-webkit-user-select: none;
	user-select: none;
}
kbd[title], .key[title] {
	cursor: help;
}

/* Dark style for display on light background. This is the default style. */
kbd, kbd.dark, .dark-keys kbd, .key, .key.dark, .dark-keys .key {
	background: rgb(80, 80, 80);
	background: -moz-linear-gradient(top, rgb(60, 60, 60), rgb(80, 80, 80));
	background: -webkit-gradient(linear, left top, left bottom, from(rgb(60, 60, 60)), to(rgb(80, 80, 80)));
	color: rgb(250, 250, 250);
	text-shadow: -1px -1px 0 rgb(70, 70, 70);
	-moz-box-shadow: inset 0 0 1px rgb(150, 150, 150), inset 0 -.05em .4em rgb(80, 80, 80), 0 .1em 0 rgb(30, 30, 30), 0 .1em .1em rgba(0, 0, 0, .3);
	-webkit-box-shadow: inset 0 0 1px rgb(150, 150, 150), inset 0 -.05em .4em rgb(80, 80, 80), 0 .1em 0 rgb(30, 30, 30), 0 .1em .1em rgba(0, 0, 0, .3);
	box-shadow: inset 0 0 1px rgb(150, 150, 150), inset 0 -.05em .4em rgb(80, 80, 80), 0 .1em 0 rgb(30, 30, 30), 0 .1em .1em rgba(0, 0, 0, .3);
}

/* Light style for display on dark background. */
kbd.light, .light-keys kbd, .key.light, .light-keys .key {
	background: rgb(250, 250, 250);
	background: -moz-linear-gradient(top, rgb(210, 210, 210), rgb(255, 255, 255));
	background: -webkit-gradient(linear, left top, left bottom, from(rgb(210, 210, 210)), to(rgb(255, 255, 255)));
	color:  rgb(50, 50, 50);
	text-shadow: 0 0 2px rgb(255, 255, 255);
	-moz-box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9);
	-webkit-box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9);
	box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9);
}

Te dejamos el enlace para la descarga: CSS teclas de teclado (74)

Excelente aplicación online para la rápida creación de Favicons sin tener que instalar nada, bookmarkéatela en tus favoritos, va de perillas y tiene un aroma a editor de Sprites de mi añorado Commodore Amiga que ni te cuento.

En menos de 5 minutos he creado el favicon que acompaña la imagen y que es candidato a ser el favicon de este blog, mi blog, favicon que no es lo que parece aunque mucho de eso tiene… en fin quizá en unos días lo suba.

Existe una opción bajo registro, pero la versión “sin historias” es fenomenal, subir ajustar y descargar. Tendrás tu el favicon para tu web en 0.5 segundos.

¡Queremos más aplicaciones web así!

Enlace: http://www.favicon.cc/

Bueno, Photoshoperos, or in spanish fotosoperos que hasta en la sopa os veo, por lo de soperos, ainss! ¿Pa cuando un transvase en masa hacia el gratuito, multiplataforma, abierto y eficaz Gimp?

Que ya esta bien de tanto parche, porque con los precios que gastan, cual broma pesada los chicos de Adobe y lo que nos pagan nuestros filibusteros clientes yo no me creo que tanto freelancer tenga billetes de sobra pa comprarlo…

Que sí, que Gimp es algo diferente, que es un poco raro, pero nada que quince días de margen no superen, a fin de cuentas es lo mismo, o al menos para el día a día va más que sobrado. Si bien este archivo al abrirlo bajo Gimp se desmonta un poquito se pueden aprovechar los botones y la iconería.

Bueno, que me voy del tema, que cuando veo tanta devoción a programas sin sentido me caliento, en fin este artículillo versa sobre una GUI para Android, es decir, un conjunto de archivos con los diferentes menús y componentes que usa el sistema operativo de Google, el Google Android, un sistema operativo para móviles y tablets que me tiene enamorado, porque no sólo de iPhone e iPad vive el hombre.

Con estos archivos podrás presentar maquetas collunutas a tus clientes pa que se les caiga los webs al suelo y digan…epa! coño! este es mi chico, este es mi frilander! pati la güeb!  Y a facturar chicos!

Enlace de descarga: http://www.webdesignshock.com/dl_social.php?WDS_Android_GUI_78593846739658431900102.zip