Jak zrobić stronę w stylu telegazety?

Jeśli pamiętasz czasy, kiedy pilot do telewizora miał więcej przycisków niż współczesny smartfon, to na pewno kojarzysz telegazetę. Ten dziwny, kolorowy, pikselowy świat, w którym litery wyglądały jakby ktoś rysował je w Paintcie, a strony ładowały się wolniej niż dzisiejsze aktualizacje Windowsa.

Dziś telegazeta to już bardziej ciekawostka niż narzędzie codziennego użytku, ale jej styl wraca jak bumerang – w projektach retro, stronach humorystycznych, a nawet w portfolio programistów, którzy chcą się wyróżnić. I wiesz co? Zrobienie strony w stylu telegazety jest prostsze, niż myślisz.

W tym artykule pokażę Ci:

jak odwzorować wygląd telegazety,
jak dobrać kolory i fonty,
jak stworzyć layout przypominający stare strony TV,
jak napisać kod HTML/CSS, który wygląda jak żywcem wyjęty z 1995 roku,
jak dodać animacje i efekty, które podkręcą klimat retro.

A wszystko w stylu luźnym, ludzkim i praktycznym.

Dlaczego styl telegazety jest tak popularny?

Może Ci się wydawać, że to tylko nostalgia, ale jest w tym coś więcej. Styl telegazety:

jest minimalistyczny, a minimalizm zawsze wraca do łask,
jest czytelny, bo opiera się na dużych blokach tekstu,
jest unikalny, więc Twoja strona od razu się wyróżnia,
jest lekki, więc działa nawet na lodówce z Wi-Fi,
jest łatwy do zrobienia, bo nie wymaga zaawansowanych grafik.

No i nie oszukujmy się – jest po prostu fajny. Ma klimat, którego nie da się podrobić żadnym nowoczesnym frameworkiem.

Jak wyglądała telegazeta?

Jeśli chcesz zrobić stronę w tym stylu, musisz najpierw zrozumieć, jak wyglądał oryginał. Telegazeta miała kilka charakterystycznych cech:

monospace font – wszystkie litery miały tę samą szerokość,
ograniczona paleta kolorów – głównie żółty, niebieski, czerwony, zielony, biały i czarny,
duże piksele – wszystko wyglądało jak powiększone 8-bitowe grafiki,
blokowy układ – tekst był ułożony w prostokątnych sekcjach,
numeracja stron – np. 100, 101, 102,
proste grafiki ASCII – strzałki, ramki, symbole.

To wszystko da się odwzorować w HTML i CSS bez większego wysiłku.

Jak zrobić stronę w stylu telegazety – krok po kroku

Poniżej przeprowadzę Cię przez cały proces. Nie musisz być programistą – wystarczy, że potrafisz otworzyć Notatnik i zapisać plik jako .html.

1. Wybór fontu – klucz do klimatu

Telegazeta używała fontów monospace, czyli takich, w których każda litera zajmuje tyle samo miejsca. Najbardziej zbliżone są:

VT323 (Google Fonts)
Press Start 2P
Courier New (klasyk)
IBM Plex Mono

Najlepiej wygląda VT323 – jest retro, ale czytelny.

W HTML dodasz go tak:

<link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet">

2. Kolory – ograniczona paleta retro

Telegazeta nie miała milionów kolorów. Najczęściej używano:

czarny: #000000
żółty: #FFFF00
niebieski: #0000FF
czerwony: #FF0000
zielony: #00FF00
biały: #FFFFFF
cyjan: #00FFFF
magenta: #FF00FF

W CSS możesz stworzyć własną paletę:

:root {
  --t-black: #000;
  --t-yellow: #ff0;
  --t-blue: #00f;
  --t-red: #f00;
  --t-green: #0f0;
  --t-white: #fff;
}

3. Tło i układ strony

Telegazeta była czarna jak noc, więc tło ustawiamy na czarne.

body {
  background: var(--t-black);
  color: var(--t-white);
  font-family: 'VT323', monospace;
  font-size: 28px;
  line-height: 1.2;
}

4. Ramki i sekcje jak w telegazecie

Telegazeta uwielbiała ramki złożone z prostych znaków. Możesz je zrobić w CSS, ale fajniej wygląda ASCII.

Przykład:

###############################################
#                                             #
#          WITAJ NA STRONIE TELETEKSTU        #
#                                             #
###############################################

Możesz to wrzucić do <pre>:

<pre class="frame">
###############################################
#                                             #
#          WITAJ NA STRONIE TELETEKSTU        #
#                                             #
###############################################
</pre>

5. Efekt pikseli – obowiązkowy

Żeby strona wyglądała jak z telewizora CRT, możesz dodać efekt „scanlines”:

.scanlines {
  position: relative;
}

.scanlines::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.03) 0px,
    rgba(255,255,255,0.03) 2px,
    transparent 2px,
    transparent 4px
  );
}

6. Animacje – żeby było jak w TV

Telegazeta często miała migające elementy. W CSS zrobisz to tak:

.blink {
  animation: blink 1s steps(2, start) infinite;
}

@keyframes blink {
  to {
    visibility: hidden;
  }
}

I użycie:

<div class="blink" style="color: var(--t-yellow);">NACIŚNIJ 101 ABY KONTYNUOWAĆ</div>

7. Przykładowa kompletna strona telegazety

Poniżej masz gotowy kod, który możesz wkleić do pliku index.html i zobaczyć efekt.

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Telegazeta 2.0</title>
<link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet">
<style>
  body {
    background: #000;
    color: #fff;
    font-family: 'VT323', monospace;
    font-size: 28px;
    padding: 20px;
  }
  .frame {
    color: #0f0;
  }
  .blink {
    animation: blink 1s steps(2, start) infinite;
  }
  @keyframes blink {
    to { visibility: hidden; }
  }
  .scanlines::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.03) 0px,
      rgba(255,255,255,0.03) 2px,
      transparent 2px,
      transparent 4px
    );
    pointer-events: none;
  }
</style>
</head>
<body class="scanlines">

<pre class="frame">
###############################################
#                                             #
#               TELEGZETA 2.0                 #
#                                             #
###############################################
</pre>

<p style="color:#ff0;">Witaj w nowoczesnej wersji telegazety!</p>

<p>Strona 100  |  101 Wiadomości  |  200 Sport  |  300 Pogoda</p>

<div class="blink" style="color:#0f0;">NACIŚNIJ 101 ABY PRZEJŚĆ DALEJ</div>

</body>
</html>

Jak jeszcze ulepszyć stronę?

Jeśli chcesz pójść krok dalej, możesz dodać:

1. Symulację ładowania stron

Tak jak kiedyś – strona ładująca się po kawałku.

2. Dźwięk startowy

Krótki „bip” przy zmianie strony.

3. Nawigację numeryczną

Wpisujesz numer strony → przenosi Cię do innej podstrony.

4. Tryb telewizora CRT

Efekt zakrzywionego ekranu, lekkie rozmycie, zniekształcenia.

Zrobienie strony w stylu telegazety to świetny sposób, żeby:

pobawić się kodem,
stworzyć coś unikalnego,
przyciągnąć uwagę użytkowników,
wrócić do klimatu lat 90.

Nie potrzebujesz żadnych frameworków, bibliotek ani zaawansowanej wiedzy. Wystarczy HTML, CSS i odrobina kreatywności.