← Tutti gli articoli

Tutorial

Sfondi seppia e crema per una lettura facile

Gli sfondi bianchi brillanti vanno bene in un risultato di ricerca ma sono punitivi per una lunga lettura. Una calda tonalità carta taglia il riverbero, calma il contrasto e ti lascia leggere per un'ora senza strizzare gli occhi. Ecco come applicarne una a qualsiasi sito con JustZix.

Perché non passare semplicemente allo scuro?

La modalità scura aiuta in una stanza buia, ma per la lettura di testi lunghi molte persone trovano il testo invertito più difficile, non più facile — il testo chiaro su nero può sfarfallare e sfocarsi, un effetto chiamato halation. Una superficie chiara e calda mantiene il testo nitido eliminando il bordo duro del bianco puro. Pensa alla carta dei tascabili anziché a quella da ufficio.

La classica ricetta seppia

Il seppia abbina uno sfondo beige caldo a un colore di testo marrone profondo. Applicalo al guscio della pagina e all'articolo:

html, body,
article, main, .post {
  background-color: #f4ecd8 !important;
  color: #4a3b28 !important;
}
article a { color: #8a5a2b !important; }
article a:hover { color: #6b3f17 !important; }

La combinazione marrone su beige mantiene un rapporto di contrasto comodamente sopra il minimo di accessibilità pur restando morbida.

Un crema più chiaro

Se il seppia sembra troppo pesante, il crema resta più vicino al bianco ma elimina il riverbero. Funziona bene con la normale luce diurna:

html, body, article, main {
  background-color: #faf6ec !important;
  color: #33302a !important;
}

Non dimenticare le superfici sottostanti

Molti siti dispongono a strati schede, blocchi di codice e citazioni con i loro sfondi. Se ricolori solo il body, quei pannelli continuano a brillare di bianco. Spazzali via anche loro:

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;
}

Ammorbidisci le immagini con un filtro

Le foto a piena saturazione possono stridere con una pagina calda. Un filtro delicato le lega alla palette senza nascondere il dettaglio:

article img {
  filter: sepia(0.12) brightness(0.97) !important;
}

Mantieni basso il valore seppia — intorno a 0,1-0,2 — così le fotografie restano naturali mentre screenshot e diagrammi si fondono.

Tonalità in base all'ora del giorno

Per la lettura serale puoi attenuare un po' di più la superficie con un singolo blocco più caldo. Configura una seconda regola JustZix da attivare dopo il tramonto:

html, body, article, main {
  background-color: #e8ddc2 !important;
  color: #3a2f1f !important;
}

Rendila una regola

Crea una regola JustZix, punta il suo pattern URL alla pubblicazione che leggi di più, incolla i blocchi dello sfondo, delle superfici e delle immagini nel pannello CSS e salva. Il sito ora ti accoglie con la carta invece che con una lampadina. Tieni a portata l'interruttore così puoi alternare tra il crema diurno e il seppia serale.

Gli sfondi caldi funzionano magnificamente insieme a una colonna vincolata e a un'interlinea ampia. Vedi l'articolo complementare su come azzeccare la larghezza della colonna, sfoglia i nostri esempi pronti all'uso per temi di lettura completi, e scarica JustZix per dare riposo ai tuoi occhi.

Valuta questo articolo

Nessuna valutazione — sii il primo.

Provalo tu stesso

Installa JustZix e incolla qualsiasi snippet di questo articolo. Due minuti da zero a una regola funzionante su tutti i tuoi dispositivi.

Ottieni JustZix

Funzionalità · Come funziona · Esempi · Casi d'uso