Tutorial CSS - podzielony tekst

Jak utworzyć efekt podzielonego tekstu za pomocą pseudoelementów CSS

W tym poradniku pokażę Ci sprytną technikę wykorzystującą pseudoelementy CSS (::before i ::after) do stworzenia stylowego, warstwowego efektu tekstu. Tekst zostaje podzielony na dwie kolorowe części, lekko przesunięte względem siebie, co daje fajny efekt wizualny — a przy tym pozostaje dostępny dla czytników ekranu.

Krok 1: Zacznij od podstawowego kodu HTML

Zaczniemy od prostego elementu <h1> ostylowanego za pomocą CSS.

  <h1>This is some text </h1>  

A oto CSS:

    
h1 {
    font-size: 10vw;
    color: white;
    font-weight: bold;
    position: relative;
}

    

Krok 2: Dodaj atrybut danych

Teraz dodamy atrybut `data-slug` do naszego elementu <h1>. Posłuży on jako źródło treści dla pseudoelementów.

  <h1 data-slug="This is some text">This is some text</h1>  

Tekst zawarty w `data-slug` zostanie dynamicznie wstawiony do ::before i ::after przy użyciu funkcji CSS `attr()`.

Krok 3: Dodaj pseudoelementy

Tutaj zaczyna się magia. Użyjemy ::before i ::after, aby sklonować oryginalny tekst, a następnie przytniemy i ostylujemy każdą część w inny sposób.

h1::before {
    content: attr(data-slug);appears here */
    position: absolute;
    color: orange;
    font-size: inherit;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 3;
    clip-path: inset(0 0 40% 0);
    pointer-events: none;
}

h1::after {
    content: attr(data-slug);
    position: absolute;
    color: olive;
    font-size: inherit;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 3;
    clip-path: inset(60% 0 0 0);
    pointer-events: none;
}

Przestrzeń między nimi tworzy naturalne rozdzielenie, które później przesuniemy, aby uzyskać efekt warstwowania.

Krok 4: Przesuń warstwy

Aby wzmocnić efekt warstw, lekko przesuniemy każdy pseudoelement.

h1::before {
    left: -2px;
}

h1::after {
    left: 2px;
    top: 2px;
}

Krok 5: Ukryj oryginalny kolor tekstu

Skoro pseudoelementy w pełni kopiują tekst, możemy ustawić kolor oryginalnego tekstu jako przezroczysty:

h1 {
    color: transparent;
}

Krok 6: Dostosuj końcowy wygląd

Chcesz czystszy, jednolity efekt? Po prostu zmień kolory pseudoelementów:

h1::before,
h1::after {
    color: #fff;
}

Efekt końcowy

Masz teraz atrakcyjny efekt tekstowy, który łączy dwie warstwy tej samej treści — świetnie sprawdza się w nowoczesnych interfejsach, tytułach typu hero czy nagłówkach promocyjnych. A ponieważ oryginalny tekst nadal znajduje się w DOM i nie został zmodyfikowany przez JS, pozostaje dostępny dla czytników ekranu.

To wszystko!

Właśnie stworzyłeś fajny, dostępny efekt wizualny przy użyciu czystego CSS. Baw się `clip-path`, kolorami i przesunięciami, aby dopasować projekt do siebie.

Miłej zabawy!