Errores Javascript

Mejora visualmente tus kbd con CSS

Icono de Desarrollo webHace tiempo que no publico nada en el blog y hoy, tras volver a mejorar el estilo visual para contenidos que usan la etiqueta kbd (keyboard) en algunos de mis trabajos, he decidido publicar el estilo [...]

  • 25
  • feb
  • 2010

Publicado por J.A.Cobo. Guardado en Desarrollo web, Diseño web, Trabajos.
hace 5 mess No hay comentarios

Hace tiempo que no publico nada en el blog y hoy, tras volver a mejorar el estilo visual para contenidos que usan la etiqueta kbd (keyboard) en algunos de mis trabajos, he decidido publicar el estilo CSS que utilizo y que, personalmente, me gusta bastante como queda.
Parte de la regla principal está inspirada en el estilo por defecto que usa Wikipedia, pero ciertamente la adapté a mi gusto y añadí más efectos como el estado sobre, bordes redondeados, fuentes y colores… si sigo casi que es la regla entera :D

Ejemplo

En definitiva, el estilo para la etiqueta kbd y que se puede apreciar ampliamente en la sección Accesibilidad queda así:

Alt

Reglas CSS

Las reglas CSS son las siguientes:

En mi basic.css:
Una regla genérica y común anterior:

1
2
3
4
5
6

pre, code, tt, kbd {
	font-size:		0.87em;
	font-family:		Monaco, 'Andale Mono', 
				'Bitstream Vera Sans Mono', monospace !important;
	color:			#008000;
}

* Nota: Aunque Monaco me gusta mucho, antes usaba la nueva fuente monoespaciada de Windows Vista para edición de código Consolas, pero su tamaño varía mucho con el resto de fuentes alternativas. Creo que también hay que tener cuidado, aunque no recuerdo cierto, con Andale Mono.
…aunque siempre se puede recurrir a @font-face {} para usar una fuente propia o incluso a cufon.

Personalización para el estilo final:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

kbd {
	margin: 		0 0.5em 0.5em 0;
	padding: 		0 0.5em 0.1em 0.25em;
	width: 			4em;
	height: 		4em;
	line-height: 		4em;
 
	background:		#EEE none repeat scroll 0% 0%;
	border:			0.23em outset #DDD;
	border-bottom-color:	#BBB;
	border-right-color:	#BBB;
	border-radius: 		0.3em;
 
	color:			black;
	text-align: 		center;
	white-space:		nowrap;
}
kbd:hover {
	margin: 		0 0.75em 0.75em 0;
	padding: 		0 0.53em 0.13em 0.28em;
	border:			0.1em outset #DDD;
	border-bottom-color:	#EEE;
	border-right-color:	#EEE;
	cursor:			pointer;
}

Básicamente cambiamos los bordes inferior y derecho a otro color para el efecto de sombreado, además del tamaño para el efecto pulsada. Luego ajustamos los espaciados y márgenes para que, al reducir o aumentar el tamaño de los bordes, el del botón no varíe -al menos demasiado (nota siguiente)-.

Pueden existir problemas al usar medidas relativas… pero yo al menos ya me he acostumbrado a ellas y prácticamente no diseño nada en base a píxeles.
…es algo arriesgado, sobre todo con navegadores poco estándares, pero diseñando de un modo más flexible y aceptando las variaciones de estos últimos -que las tienen con o sin píxeles- al final el resultado es casi más gratificante. Los píxeles quedan casi en exclusiva para elementos que no redimensionen o que solo lo hagan dentro de unos límites conocidos. Por ejemplo un elemento que sepas solo se ampliará o reducirá por un lado y dejes un espacio para una imagen de tamaño fijo. No obstante, incluso en casos así se sigue pudiendo prescindir de ellos perfectamente.

Además ajustamos el texto, como en los teclados, un poco a la parte superior izquierda, un efecto sutil en teclas pequeñas y visible en las grandes.

Jugando un poco, más ejemplos

Aquí viene otra de las bondades de los tamaños relativos: aunque no sean medidas exactas de teclas, las teclas grandes -con más texto- se autoexpanden. Y permiten jugar un poco con su contenido aunque de forma menos semántica. En concreto, añadiendo texto y ajustando la autoexpansión, se le da sentido a las teclas cuando no se usa CSS. Por ejemplo:
Para Ctrl y Alt, el mismo tamaño del texto es suficiente, pero para mayúsculas simples (shift) podemos o añadir la palabra inglesa, u ocultarla mediante algo de CSS de presentación -del que no me gusta pero bueno- y conseguir el tamaño deseado.

⇑ Shift
Versión ocultando shift sin extras:
⇑ Shift
Una tecla más real, mayúsculas corta:
⇑ Shift
Mayúsculas larga:
⇑ Shift

Espacio:
Shift

Retroceso:
←return
:D

Bueno, ahí queda por si le gusta o interesa a alguien.

Acerca del autor

Avatar del autor J.A.Cobo, «Geek» apasionado por la tecnología, la historia y la aviación con especial interés en el Desarrollo Web basado en estándares, la aplicación semántica de la web y la accesibilidad en la misma. Hubo un tiempo en el que también escribía relatos, principal inspiración para iniciar un «blog».

No hay comentarios.
TrackBack URL
Compartir en:
Menéame
Del.icio.us
Google
Technorati

Aún no hay comentarios.

Dejar un comentario.no seas tímido

Campos personales


¿Qué opinas?

Licencia y acuerdo

Logo Creative Commons Los datos introducidos en este formulario se tratarán, en matería de seguridad, de acuerdo a la normativa española sobre protección de datos ( LOPD ) pese a no estar sujetos a ella. Los contenidos pasarán a ser liberados para Cultura Digital.org bajo las licencias Creative Commons BY-SA y GFDL1.3 como una obra derivada de la que el autor mantendrá el copyright.
Asegúrate de entender estos términos antes de enviar tu comentario.

Artículo 2: Ámbito de aplicación.
[...]
Punto 2. El régimen de protección de los datos de carácter personal que se establece en la presente Ley Orgánica no será de aplicación:
a) A los ficheros mantenidos por personas físicas en el ejercicio de actividades exclusivamente personales o domésticas.
[...]

El autor del blog, Juan Antonio Cobo, se reserva el derecho a decidir sobre la publicación de los comentarios de acuerdo a la lógica común, las buenas maneras y la relevancia de los mismos con la entrada.

Twitter

Avatar en TwitterJuan Antonio Cobo
JuanAntonioCobo

  • «Webdev freelance» Mejor aquí: http://blog.culturadigital.org/acerca-de - 20
  • @lusagad Yo solo lo he visto d rafilón, oyes las voces y dices: "q coño es eso?" Luego ya.. te partes la caja lo serios q se ponen y todo xD (vía web).
    - hace 1 día y 18 horas
  • Casualmente a lo de TeleCinco, en Italia hay una buena liada con el tema gitano. Ainsss... kasco de tele dios. (vía web).
    - hace 2 días y 20 horas
  • mm... dios, qué mentira más gorda los debates esos de Tele5, no? Qué casualidad una gitana pija en el público, vms, lo + normal del mundo xD (vía web).
    - hace 2 días y 20 horas
  • @Frambueso Lo acabo de ver en las noticias... que grandes las nuevas tecnologías: nosotros en vivo vía Twitter. Creo q todo bien, no? (vía web).
    - hace 1 semana y 2 días
  • Weno,va siendo hora.. joder!.. pro xq mcae tan mal Barceló!?, tan repipi, pdante, sos gestos, ojjj, ajjjjj.. ggg Nas noxs #puntopelota #zzzz (vía TweetDeck).
    - hace 1 semana y 3 días
  • @Rino6966 Pulido quiere lo que muchos, entre los qm incluyo, kizá pecando dantimadridsta: un Madrid humilde como la 8ª Champions. (vía TweetDeck).
    - hace 1 semana y 3 días
  • @ateneanike Roncero es..., bueno, lo que es, es bastante inbécil y #puntopelota, Diosss... lo q pasa q hasta da pena y todo gg (vía TweetDeck).
    - hace 1 semana y 3 días
  • ...ganas de liga... sinceramente, después de este verano... solo quiero... que llegue ya la Eurocopa! #ESP #puntopelota (vía TweetDeck).
    - hace 1 semana y 3 días
  • Ntre Xixarito ( @fcevallos ) y los #parabólicos ( @francescobu @plazacasals ) se están comiendo la sección de @pacorabadan -.- #puntopelota (vía TweetDeck).
    - hace 1 semana y 3 días
  • @ateneanike No sé... me da que es así ^^! Según él, los de las críticas somos lo peor de Twitter; imagino q le gustaría solo recibir elogios (vía TweetDeck).
    - hace 1 semana y 3 días
  • xD Ostais jugando 1 unfollow fijo RT @sergimaister: @ateneanike Lo dla cara d Borbón d @Pedrerol es d lo mejor ke leído jamás en Twitter xDD (vía TweetDeck).
    - hace 1 semana y 3 días
  • Para 1 año... deberían djar a Raúl retirarse nel Madrid, no sé si el problema son las condiciones o el orgullo, lícito, de Raúl #puntopelota (vía TweetDeck).
    - hace 1 semana y 3 días
  • @Pelotero100 Y a Chuck Norris ggg (vía TweetDeck).
    - hace 1 semana y 3 días
  • Hoy no hay 2online, que estamos ya de intermission, con las ganas que tenía :( #BattlegroundEurope #2online (vía web).
    - hace 1 semana y 3 días
  • @CarmeBarcelo tú crees q burlarte d di Maria es tnr algo didea d fútbol???, t lo dice @sirolopez Petón y medio Twitter, o ntero #puntopelota (vía web).
    - hace 1 semana y 3 días
  • Este perro viejo de PC (A8V-X + AMD64) ha muerto... estaremos por aquí mientras aguante el portátil ;) (vía web).
    - hace 1 semana y 6 días
  • @lalibreta +1000000 #246 zellfhirot: "Marca, cada día decís y haceis mayores tonterías." :) (vía web).
    - hace 2 semanas
  • [...]pero no es lo q nos enseña nuestra gramática dsd luego ;) ... bueno, más bien semántica :S (vía web).
    - hace 2 semanas
  • @elias_israel Para el lenguaje técnico, imagino q viene cojonudo... pero no es lo q nos enseña nuestra gramática dsd luego ;) (vía web).
    - hace 2 semanas
  • @elias_israel Hay artículos en la Wikipedia inglesa con más siglas que oraciones xD (vía web).
    - hace 2 semanas

Sígueme en Twitter Sígueme

Acerca de esta entrada

Estás leyendo «Mejora visualmente tus kbd con CSS», una entrada publicada el jueves 25 de febrero de 2010.

Etiquetas Etiquetas , , ,
Revisada Ok hace 5 mess
Imprimir Icono impresora

Entradas vecinas

← Recuperando el sentido de la web. Tim Berners-Lee
CSS Animations →

Quizá también te interese:

No hay entradas relacionadas