Si quieres, puedes, así que... ¿te atreves?

Crea una Libreta de Notas con CSS para tus Diseños

css

Aprende a crear el diseño de una libreta de notas con sólo HTML y CSS. Este artículo es la traducción del artículo How To Create a Notebook Design with CSS escrito en CSS Tricks por Allen Lawson, un chico de sólo 14 años. Debo reconocer que su edad me ha impresionado y hecho pensar que ya tardo en ponerme las pilas:-)

En este tutorial vamos a aprender a crear el diseño de una libreta de notas con CSS que podremos utilizar para el diseño de nuestros temas. El resultado final será éste:

Primero de todo vamos a empezar por crear un envoltorio básico especificando que el body deberá tener las siguientes propiedades CSS:

body {
     background-color: #eee;
     width: 650px;
     margin: 0 auto;
     padding: 0;
}

A continuación, vamos a crear una lista desordenada que llamaremos list:

.list {
     background-color: #f5f5f5;
     color: #555;
     font-size: 202x;
     padding: 0 !important;
     width: 500px;
     font-family: courier, monospace;
     border: 1px solid #dedede;
}

La razón por la que es importante añadir un padding de 0 es porque más adelante en este tutorial, cuando añadamos las líneas rojas de la libreta, las cosas empezarán a liarse. El ancho se puede especificar al que queramos, yo he escogido 650px porque es el mejor para mí. Otra propiedad fundamental es el borde, porque es el que hace que se vea limpio y agradable a la vista.

Seguidamente damos formato a las etiquetas li:

.list li {
     list-style: none;
     border-bottom: 1px dotted #ccc;
     text-indent: 25px;
     height: auto;
     padding: 10px;
     text-transform: capitalize;
}

Esta parte del código no necesita mucha explicación. Simplemente asegúrate de añadir border-bottom: 1px dotted #ccc;. Esto, para mí, es lo que hace que parezca de verdad una libreta de notas de papel.

Si lo deseas, puedes utilizar la pseudoclase :hover para hacer que aún se vea mejor.

.list li:hover {
     background-color: #f0f0f0;
    -webkit-transition: all 0.2s;
    -moz-transition:    all 0.2s;
    -ms-transition:     all 0.2s;
    -o-transition:      all 0.2s;
}

Ahora tenemos la libreta casi lista, sólo nos faltan las líneas rojas. El HTML hasta aquí es:

<!DOCTYPE HTML>
<html> 

<head>
   <meta charset="UTF-8">
   <title>CSS Theme: Notepad</title>
   <link rel="stylesheet" href="style.css">
</head>

<body>

  <h4>Notas</h4>
        <ul class="list">
         <li>Desayuna</li>
         <li>Da de comer a Pugsly, la vaca</li>
         <li>Si&eacute;ntate</li>
         <li>Almuerza</li>
         <li>Llama a mam&aacute;</li>
         <li>Env&iacute;a un tweet sobre la vaca, Pugsly</li>
         <li>&Uacute;nete a un c&iacute;rculo de Google+</li>
         <li>Prepara la cena</li>
         <li>Cena</li>
         <li>Pr&eacute;parate para ir a la cama</li>
         <li>Ve a la cama</li>
      </ul>
</body>
</html>

Para añadir las líneas rojas, simplemente añadimos esta línea de código encima de la etiqueta ul:

<!DOCTYPE HTML>
<html> 

<head>
   <meta charset="UTF-8">
   <title>CSS Theme: Notepad</title>
   <link rel="stylesheet" href="style.css">
</head>

<body>

  <h4>Notas</h4>
         div class="lines"></div>
        <ul class="list">
         <li>Desayuna</li>
         <li>Da de comer a Pugsly, la vaca</li>
         <li>Si&eacute;ntate</li>
         <li>Almuerza</li>
         <li>Llama a mam&aacute;</li>
         <li>Env&iacute;a un tweet sobre la vaca, Pugsly</li>
         <li>&Uacute;nete a un c&iacute;rculo de Google+</li>
         <li>Prepara la cena</li>
         <li>Cena</li>
         <li>Pr&eacute;parate para ir a la cama</li>
         <li>Ve a la cama</li>
      </ul>
</body>
</html>

Y aquí el código CSS para las líneas rojas:

.lines {
     border-left: 1px solid #ffaa9f;
     border-right: 1px solid #ffaa9f;
     width: 2px;
     float: left;
     height: 430px;
     margin-left: 40px;
}

Lo único malo es que cada vez que añades un término a la lista has de modificar la altura de las líneas rojas, lo que es un poco rollo. Otra cosa: no te olvides de poner un ancho de 2px, porque sino en lugar de dos líneas aparecerá una sola.

Lo último es que has de añadir un sangrado del texto de 25 píxeles a los elementos de la lista para que no salgan pegados justo al lado de las líneas rojas.

Thanks, Allen!

mi firma

Comentarios


¿Y tú qué opinas? Deja un comentario...