Cómo funciona el CSS de mis-notas.html
Este documento complementa las lecciones de JavaScript. Mientras el otro manual explica la lógica del programa, este se concentra en la parte visual: cómo CSS transforma un HTML sencillo en una pequeña aplicación de escritorio.
Reset, variables y tema oscuro
El primer bloque del CSS elimina diferencias entre los estilos predeterminados de los navegadores.
*{
box-sizing:border-box;
margin:0;
padding:0;
}
Este procedimiento se conoce como un reset CSS.
La propiedad box-sizing:border-box
también simplifica los cálculos de tamaño, porque el ancho
y alto de un elemento incluyen su relleno y sus bordes.
Luego aparece una de las ideas más importantes del diseño: las variables CSS.
:root{
--bg:#1e1e1e;
--text:#e0e0e0;
--accent:#5b9bd5;
}
Las variables permiten centralizar colores y valores.
Si en el futuro se quisiera crear un tema claro,
bastaría con cambiar los valores del bloque :root.
Flexbox y estructura general
mis-notas.html no se comporta como un documento común. Ocupa toda la ventana del navegador y se organiza como una aplicación.
html,body{
height:100%;
overflow:hidden;
}
body{
display:flex;
flex-direction:column;
}
Flexbox divide la interfaz en tres zonas principales: la barra de pestañas arriba, el editor en el centro y la barra de botones en la parte inferior.
La barra de pestañas
La barra superior también usa Flexbox:
.tab-bar{
display:flex;
overflow-x:auto;
}
Esto permite crear una cantidad prácticamente ilimitada de pestañas. Si no entran en el ancho disponible, el usuario puede desplazarse horizontalmente.
Las clases .tab, .tab:hover
y .tab.on representan distintos estados
visuales de una pestaña: normal, cuando el mouse pasa por
encima y cuando la pestaña está activa.
El área de escritura
La zona donde el usuario escribe sus notas está formada por un
contenedor llamado .note-area y un elemento
textarea.
.note-area{
flex:1;
overflow:hidden;
display:flex;
flex-direction:column;
padding:6px;
}
textarea{
flex:1;
width:100%;
resize:none;
}
La propiedad flex:1 es una de las claves de esta
aplicación. Significa que el editor debe ocupar todo el espacio
libre entre la barra de pestañas y la barra inferior.
Gracias a esto, el usuario puede cambiar el tamaño de la ventana del navegador y el área de escritura se ajustará automáticamente.
La propiedad resize:none elimina el pequeño control
que los navegadores agregan normalmente en la esquina inferior de
un textarea. Como el tamaño ya está administrado por
Flexbox, ese control no es necesario.
El resto de las propiedades del editor se ocupa de la estética: colores, bordes redondeados, tipografía, separación entre líneas y cambios de color cuando recibe el foco.
textarea:focus{
border-color:var(--accent);
}
El selector :focus representa el momento en que el
usuario está escribiendo en el editor. Este pequeño cambio visual
ayuda a indicar qué elemento de la interfaz está activo.
La barra inferior y los botones
La barra inferior contiene los botones para guardar, importar y borrar las notas. Nuevamente se utiliza Flexbox para distribuir los elementos.
.bottom-bar{
display:flex;
gap:5px;
}
Una técnica interesante es el uso de un elemento vacío llamado
.spacer.
.spacer{
flex:1;
}
Aunque parece un elemento sin utilidad, su misión es ocupar todo el espacio disponible y empujar el botón "Borrar todo" hacia la derecha.
Este es un ejemplo de cómo Flexbox permite crear alineaciones que antes requerían trucos mucho más complicados.
Los botones tienen distintos estados visuales:
- El estado normal definido por
button. - El cambio de color al pasar el mouse mediante
:hover. - La clase especial
.db, usada para acciones destructivas.
El color rojizo del botón de borrado cumple una función de diseño: advierte al usuario de que se trata de una acción potencialmente peligrosa.
El editor temporal de nombres de pestañas
Cuando el usuario hace doble clic sobre una pestaña, JavaScript
reemplaza momentáneamente el texto por un campo de entrada
(input).
Para que ese nuevo elemento tenga la misma estética que el resto
de la aplicación se creó la clase .iei:
.iei{
background:var(--bg2);
border:1px solid var(--accent);
color:var(--text);
padding:1px 4px;
border-radius:4px;
}
Un detalle importante es que CSS no sabe cuándo debe aparecer este campo. Esa decisión corresponde a JavaScript, que crea el elemento dinámicamente.
Este es un excelente ejemplo de la cooperación entre ambos lenguajes:
- JavaScript decide crear o eliminar el input.
- CSS decide cómo se verá ese input.
Toast, capas flotantes y mensajes temporales
El pequeño mensaje que aparece al guardar, importar o borrar notas se conoce como toast.
#toast{
position:fixed;
bottom:50px;
left:50%;
transform:translateX(-50%);
}
La propiedad position:fixed hace que el mensaje se
ubique respecto a la ventana del navegador y no respecto al flujo
normal del documento.
El truco left:50% junto con
transform:translateX(-50%) permite centrar el
mensaje exactamente en la pantalla.
También se utilizan propiedades como opacity y
transition para que el mensaje aparezca y desaparezca
de forma gradual, logrando una sensación más profesional.
El modal de confirmación
La aplicación posee una ventana especial que aparece cuando el usuario intenta realizar una acción irreversible, como borrar todas las notas. Este tipo de ventana se conoce como modal.
El modal está construido como una capa que cubre toda la pantalla:
#confirm-modal{
position:fixed;
inset:0;
display:flex;
align-items:center;
justify-content:center;
}
La propiedad position:fixed hace que la ventana quede
anclada a la pantalla, independientemente del contenido que haya
detrás.
La propiedad inset:0 es una forma abreviada de escribir:
top:0; right:0; bottom:0; left:0;
De esta manera, el modal ocupa toda la superficie visible del navegador.
El uso de Flexbox dentro del modal permite centrar fácilmente la caja de diálogo mediante:
align-items:center; justify-content:center;
La aparición y desaparición de esta ventana se controla mediante
una clase como .open. JavaScript se encarga de agregar
o quitar esa clase, mientras que CSS define el efecto visual de
transición, opacidad y escala.
Este patrón es muy utilizado en aplicaciones modernas porque mantiene una separación clara de responsabilidades:
- JavaScript decide cuándo la ventana debe aparecer.
- CSS determina la apariencia y la animación.
Los pequeños detalles que hacen agradable la interfaz
Una buena interfaz no depende solamente de los elementos grandes. Los pequeños detalles tienen un enorme impacto en la sensación de calidad del programa.
Por ejemplo, se puede modificar el aspecto de la barra de desplazamiento:
::-webkit-scrollbar{
width:4px;
}
Aunque se trata de un detalle menor, ayuda a que todos los elementos visuales sigan la misma línea estética.
Otros recursos utilizados en mis-notas.html son:
- Colores definidos mediante variables CSS.
-
Bordes redondeados mediante
border-radius. -
Sombras suaves con
box-shadow. -
Cambios progresivos usando
transition. - Organización adaptable gracias a Flexbox.
Todos estos detalles, sumados, hacen que la aplicación se sienta más cercana a un programa de escritorio que a una simple página web.
CSS como herramienta de construcción de interfaces
El CSS de mis-notas.html demuestra que no es necesario utilizar grandes frameworks para crear una interfaz agradable y funcional.
Con conceptos relativamente simples como variables CSS,
Flexbox, estados :hover, transiciones y capas
superpuestas es posible construir una aplicación completa.
Comprender este CSS no solo permite modificar el aspecto de mis-notas.html, sino que también sirve como base para diseñar futuras aplicaciones web con una estructura clara y moderna.