Después de un periodo de descanso en semana santa, necesario para desconectar un poco y otro periodo de descanso forzoso debido al mal funcionamiento del hosting de Dreamhost, proseguimos con el blog, el cual había dejado un poco abandonado.
Escribiendo el articulo de MySQL se me ocurrió dar un estilo a los comandos que vaya insertando, creando un div que simule una consola de Microsoft, el típico CMD.
En un principio iba a usar una imagen capturada de la consola directamente, pero esta solución no me acababa de convencer, ya que no se podria copiar y pegar texto y ademas para Google, el texto de las imagenes es como si no existiese.
Realmente es una tontería, se me ocurrió una tarde que estaba aburrido y decidí escribir un articulo sobre esto.
La idea es usar un div con un pre dentro para introducir el texto preformateado.
Estas son las normas css que he usado :
.cmdWin {
background:url(images/cabecera.png) 2px 2px;
#background-position: 5px 5px; /* Solo para IE */
background-repeat: no-repeat;
background-color:#08246B;
color:#EFEFEF;
padding:0px;
padding-top:7px;
#padding-top:19px; /* Solo para IE */
border: 4px #CFCFCF ridge;
}
.cmdWin pre , code{
font:monospace, Andale Mono, Lucida Console, Monaco, fixed ;
font-weight:bold;
background:black;
margin-bottom:0px;
padding:1px;
overflow:scroll;
height:400px;
}
.cmdWin pre span.cursor {
text-decoration:blink;
}
He usado un hack css , usando el carácter #, dado que Internet explorar y firefox interpretan el padding de forma distinta.
Para la cabecera del div he usado esta imagen:
También he creado una clase con nombre cursor para hacer parpadear el cursor.
Este el código html necesario para mostrar la línea de comandos.
<div class="cmdWin"><pre> Microsoft Windows XP [Versión 5.1.2600] (C) Copyright 1985-2001 Microsoft Corp.C:\Documents and Settings\felisa><span class="cursor">_</span></pre></div>
Y este es el resultado:
Microsoft Windows XP [Versión 5.1.2600]
(C) Copyright 1985-2001 Microsoft Corp.
C:\Documents and Settings\felisa>_
Como ves, no es algo necesario, pero sirve para romper con la monotonía de la página a la hora de escribir código.
La entrada Dar estilo a comandos de Windows con Css se publicó primero en Nosolocodigo.
