Fondos sepia y crema para una lectura fácil
Los fondos blancos brillantes están bien en un resultado de búsqueda, pero son castigadores a lo largo de una lectura larga. Un tono cálido de papel reduce el deslumbramiento, calma el contraste y te permite leer durante una hora sin entornar los ojos. Así puedes aplicar uno a cualquier sitio con JustZix.
¿Por qué no ir directamente al oscuro?
El modo oscuro ayuda en una sala tenue, pero para la lectura de formato largo muchas personas encuentran el texto invertido más difícil, no más fácil — el texto claro sobre negro puede temblar y emborronarse, un efecto llamado halación. Una superficie clara y cálida mantiene el texto nítido eliminando el borde duro del blanco puro. Piensa en el papel de un libro de bolsillo en lugar del papel de oficina.
La receta sepia clásica
El sepia empareja un fondo beige cálido con un color de texto marrón oscuro. Aplícalo a la estructura de la página y al artículo:
html, body,
article, main, .post {
background-color: #f4ecd8 !important;
color: #4a3b28 !important;
}
article a { color: #8a5a2b !important; }
article a:hover { color: #6b3f17 !important; }La combinación marrón sobre beige mantiene una proporción de contraste cómodamente por encima del mínimo de accesibilidad sin dejar de ser suave.
Un crema más claro
Si el sepia se siente demasiado pesado, el crema se mantiene más cerca del blanco pero elimina el deslumbramiento. Funciona bien con luz diurna normal:
html, body, article, main {
background-color: #faf6ec !important;
color: #33302a !important;
}No olvides las superficies de debajo
Muchos sitios superponen tarjetas, bloques de código y citas con sus propios fondos. Si solo recoloreas el cuerpo, esos paneles siguen brillando en blanco. Barrelos también:
article pre,
article blockquote,
.card, .panel, figure {
background-color: #efe7d2 !important;
color: #4a3b28 !important;
border-color: #d8cba8 !important;
}
input, textarea {
background-color: #fbf8ef !important;
color: #33302a !important;
}Suaviza las imágenes con un filtro
Las fotos a plena saturación pueden chocar con una página cálida. Un filtro suave las integra en la paleta sin ocultar el detalle:
article img {
filter: sepia(0.12) brightness(0.97) !important;
}Mantén bajo el valor de sepia — alrededor de 0,1 a 0,2 — para que las fotografías se mantengan naturales mientras las capturas de pantalla y los diagramas se integran.
Tono según la hora del día
Para la lectura nocturna puedes atenuar la superficie un poco más con un único bloque más cálido. Configura una segunda regla de JustZix que actives después del atardecer:
html, body, article, main {
background-color: #e8ddc2 !important;
color: #3a2f1f !important;
}Conviértelo en una regla
Crea una regla de JustZix, apunta su patrón de URL a la publicación que más lees, pega los bloques de fondo, superficies e imágenes en el panel CSS y guarda. El sitio ahora te recibe con papel en lugar de con una bombilla. Mantén el interruptor a mano para poder alternar entre el crema diurno y el sepia nocturno.
Los fondos cálidos funcionan de maravilla junto a una columna restringida y una altura de línea amplia. Consulta el artículo complementario sobre acertar con el ancho de columna, explora nuestros ejemplos listos para usar para temas de lectura completos, y descarga JustZix para dar descanso a tus ojos.
Valora este artículo
Sin valoraciones — sé el primero.