← Wszystkie wpisy

Poradniki

Sepiowe i kremowe tła dla łatwego czytania

Jasno białe tła są w porządku w wyniku wyszukiwania, ale wyczerpujące przy długim czytaniu. Ciepły ton papieru tnie odblask, uspokaja kontrast i pozwala czytać godzinę bez mrużenia. Oto jak zastosować go na dowolnej stronie z JustZix.

Dlaczego nie przejść po prostu na ciemne?

Tryb ciemny pomaga w przyciemnionym pomieszczeniu, ale przy czytaniu długich tekstów wielu ludziom odwrócony tekst wydaje się trudniejszy, a nie łatwiejszy — jasny tekst na czerni potrafi migotać i się rozmywać, efekt zwany halacją. Ciepła jasna powierzchnia utrzymuje tekst ostrym, usuwając jednocześnie ostrą krawędź czystej bieli. Pomyśl o papierze książki w miękkiej oprawie, a nie o papierze biurowym.

Klasyczny przepis sepii

Sepia łączy ciepłe beżowe tło z głębokim brązowym kolorem tekstu. Zastosuj ją do powłoki strony i artykułu:

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

Kombinacja brązu na beżu utrzymuje stosunek kontrastu wygodnie powyżej progu dostępności, pozostając jednocześnie miękką.

Lżejszy krem

Jeśli sepia wydaje się zbyt ciężka, krem pozostaje bliżej bieli, ale zabija odblask. Sprawdza się dobrze w normalnym świetle dziennym:

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

Nie zapomnij o powierzchniach pod spodem

Wiele stron nakłada karty, bloki kodu i cytaty blokowe z własnymi tłami. Jeśli przekolorujesz tylko body, te panele nadal świecą bielą. Zgarnij je też:

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

Złagodź obrazy filtrem

Zdjęcia przy pełnym nasyceniu mogą kłócić się z ciepłą stroną. Delikatny filtr wpisuje je w paletę bez ukrywania szczegółów:

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

Trzymaj wartość sepii niską — około 0,1 do 0,2 — aby fotografie pozostały naturalne, a zrzuty ekranu i diagramy się wtopiły.

Ton zależny od pory dnia

Do wieczornego czytania możesz przyciemnić powierzchnię nieco bardziej jednym cieplejszym blokiem. Skonfiguruj drugą regułę JustZix, którą włączasz po zachodzie słońca:

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

Zrób z tego regułę

Utwórz regułę JustZix, skieruj jej wzorzec URL na publikację, którą czytasz najczęściej, wklej bloki tła, powierzchni i obrazów do panelu CSS i zapisz. Strona wita cię teraz papierem zamiast żarówki. Trzymaj przełącznik pod ręką, aby móc przeskakiwać między dziennym kremem a wieczorną sepią.

Ciepłe tła pięknie działają obok ograniczonej kolumny i przestronnej wysokości wiersza. Zobacz towarzyszący wpis o prawidłowym ustawieniu szerokości kolumny, przejrzyj nasze gotowe przykłady, aby zdobyć pełne motywy czytania, i pobierz JustZix, by dać oczom odpocząć.

Oceń ten wpis

Brak ocen — oceń jako pierwszy.

Wypróbuj samodzielnie

Zainstaluj JustZix i wklej dowolny snippet z tego artykułu. Dwie minuty od zera do działającej reguły na wszystkich Twoich urządzeniach.

Pobierz JustZix

Funkcje · Jak to działa · Przykłady · Zastosowania