De Chris: ¡Hey gente! Hoy es una publicación invitada del desarrollador de 14 años Allen Lawson. He notado mucha más participación y actividad en la comunidad web por parte de la gente más joven y creo que eso es increíble y quiero fomentarlo lo mejor que pueda.
Este tutorial le mostrará cómo crear un sitio web con temas de notebook usando solo CSS.
Primero, comenzaremos creando un contenedor básico especificando que la etiqueta del cuerpo debe tener las siguientes propiedades CSS:
body {
background-color: #f5f5f5;
width: 600px;
margin: 0 auto;
padding: 0;
}A continuación, vamos a hacer una lista desordenada, llamaré la mía. list:
.list {
color: #555;
font-size: 22px;
padding: 0 !important;
width: 500px;
font-family: courier, monospace;
border: 1px solid #dedede;
}La razón por la que es importante agregar relleno: 0; se debe a que más adelante en el tutorial, cuando agreguemos las líneas rojas del cuaderno, las cosas se estropearán. El ancho se puede especificar a lo que desee; Solo hice 600px porque encaja mejor. Otra propiedad clave aquí es la frontera. Esto lo mantiene limpio y con un aspecto agradable.
A continuación, le damos estilo a los li:
.list li {
list-style: none;
border-bottom: 1px dotted #ccc;
text-indent: 25px;
height: auto;
padding: 10px;
text-transform: capitalize;
}Esto se explica por sí mismo. Solo asegúrate de agregar el border-bottom: 1px dotted #ccc;. Esto, para mí, es lo que realmente le da todo el tema del “papel de cuaderno”.
Si lo desea, puede usar la pseudoclase: coloque el cursor sobre li para que se vea aún más limpio. ¿Quién no aprecia un buen efecto de desplazamiento?
.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;
}Aquí está nuestro HTML hasta ahora:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Theme: Notepad</title>
<link rel="stylesheet" href="https://css-tricks.com/how-to-create-a-notebook-design-with-css/style.css">
</head>
<body>
<h4>Notes</h4>
<ul id="List">
<li>Eat Breakfeast</li>
<li>Feed Pugsly, the cow</li>
<li>Sit Down</li>
<li>Eat lunch</li>
<li>Call mom</li>
<li>Tweet about feeding my cow, pugsly</li>
<li>Join a hangout in google+</li>
<li>Prepare Dinner</li>
<li>Eat Dinner</li>
<li>Get ready for bed</li>
<li>Go to bed</li>
</ul>
</body>
</html>Por último, agregaremos las líneas rojas verticales:
.lines {
border-left: 1px solid #ffaa9f;
border-right: 1px solid #ffaa9f;
width: 2px;
float: left;
height: 495px;
margin-left: 40px;
}Esto es probablemente lo más atractivo de este tutorial, pero es lo que más odio solo porque no había forma de que llegara a donde si agregaba un nuevo elemento de lista que cambia de tamaño por sí solo. Entonces, cada vez que agregas un nuevo li, debes aumentar la altura de las líneas rojas, lo cual es un gran dolor de cabeza. Aparte de eso, asegúrese de especificar un width de 2px o de lo contrario será una línea.
Una última cosa, debes agregar text-indent de 25px los elementos de la lista para que el texto no se muestre justo al lado de las líneas rojas.
Una vez que esté listo para agregar las líneas rojas, inserte este código antes de el <ul>.
<div class="lines"></div>Su CSS final se verá así:
body {
background-color: #f5f5f5;
width: 600px;
margin: 0 auto;
padding: 0;
}
h4 {
color: #cd0000;
font-size: 42px;
letter-spacing: -2px;
text-align: left;
}
.list {
color: #555;
font-size: 22px;
padding: 0 !important;
width: 500px;
font-family: courier, monospace;
border: 1px solid #dedede;
}
.list li {
list-style: none;
border-bottom: 1px dotted #ccc;
text-indent: 25px;
height: auto;
padding: 10px;
text-transform: capitalize;
}
.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;
}
.lines {
border-left: 1px solid #ffaa9f;
border-right: 1px solid #ffaa9f;
width: 2px;
float: left;
height: 495px;
margin-left: 40px;
}Aquí hay una demostración del tema completo:
Ver demostración
De Chris: ¡Gracias de nuevo a Allen Lawson! Puede haber algunas cosas en este artículo que podrían hacerse mejor o de manera diferente, así que seamos constructivos en los comentarios y hagámoslo mejor.