CSS - Tworzenie tekstu z teksturą

Aby stworzyć tekst z teksturą w CSS, możemy wykorzystać kilka technik. Poniżej przedstawiam przykład kodu, który wykorzystuje obrazek jako teksturę dla tekstu. W tym przykładzie użyję obrazka w formacie PNG jako tekstury, ale możesz również użyć innych formatów obrazów, takich jak JPG lub SVG.

Przykład kodu

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tekstura na tekście</title>
    <style>
        body {
            background-color: #f0f0f0; /* Tło dla całej strony */
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh; /* Wysokość widoku */
            margin: 0;
        }

        .textured-text {
            font-size: 80px; /* Rozmiar czcionki */
            font-weight: bold; /* Grubość czcionki */
            color: transparent; /* Ustawienie koloru tekstu na przezroczysty */
            background-image: url('https://example.com/tekstura.png'); /* Ścieżka do tekstury */
            background-clip: text; /* Użycie tła jako wypełnienia tekstu */
            -webkit-background-clip: text; /* Obsługa dla WebKit (Safari) */
            text-fill-color: transparent; /* Ustawienie koloru wypełnienia na przezroczysty */
        }
    </style>
</head>
<body>
    <div class="textured-text">Tekstura na tekście</div>
</body>
</html>

Opis kodu

Struktura HTML:
- W kodzie HTML tworzymy prostą stronę, która zawiera jeden element div z klasą textured-text. Wewnątrz tego elementu umieszczamy tekst „Tekstura na tekście”.
Styl CSS:
- body:
  - background-color: #f0f0f0;: Ustawiamy jasne tło dla całej strony.
  - display: flex;: Używamy Flexbox do centrowania elementów w poziomie i w pionie.
  - justify-content: center;: Wyrównanie poziome na środku.
  - align-items: center;: Wyrównanie pionowe na środku.
  - height: 100vh;: Ustalamy wysokość na 100% wysokości widoku.
  - margin: 0;: Usuwamy domyślne marginesy.
- .textured-text:
  - font-size: 80px;: Ustalamy duży rozmiar czcionki.
  - font-weight: bold;: Ustalamy tekst na pogrubiony.
  - color: transparent;: Ustawiamy kolor tekstu na przezroczysty, aby wyświetlić tylko teksturę.
  - background-image: url('https://example.com/tekstura.png');: Wskazujemy ścieżkę do obrazu, który ma być użyty jako tekstura. (Zamień na rzeczywistą ścieżkę do obrazu). Teksturę można pobrać np. z tej strony- https://polyhaven.com/textures
  - background-clip: text;: Używamy tej właściwości, aby nałożyć tło tylko na tekst, a nie na cały element.
  - -webkit-background-clip: text;: Dodatkowa właściwość dla przeglądarek WebKit (np. Safari), aby uzyskać ten sam efekt.
  - text-fill-color: transparent;: Ustawiamy kolor wypełnienia na przezroczysty, co jest wymagane w niektórych przeglądarkach, aby efekt działał poprawnie.

Uwagi

Pamiętaj, aby zastąpić https://example.com/texture.png rzeczywistym adresem URL tekstury, której chcesz użyć.
Efekt ten może różnie działać w różnych przeglądarkach, dlatego zaleca się testowanie w wielu z nich, aby upewnić się, że działa poprawnie.
Możesz dostosować inne style, takie jak text-shadow czy letter-spacing, aby uzyskać różne efekty wizualne.