Text-shadow w CSS3

By /

CSS

W CSS3 właściwość text-shadow pozwala na dodanie cienia do tekstu, co jest potężnym narzędziem do tworzenia efektów tekstowych w projektowaniu stron internetowych. Dzięki tej właściwości można dodać głębi, trójwymiarowości, a nawet stworzyć iluzję oświetlenia tekstu. text-shadow umożliwia definiowanie wielu cieni przez oddzielenie ich przecinkami, co pozwala na tworzenie złożonych i subtelnych efektów wizualnych.

Przykład zastosowania text-shadow

Poniżej znajduje się prosty przykład, który ilustruje, jak można wykorzystać text-shadow w HTML i CSS do stworzenia tekstu z cieniem.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Przykład wykorzystania text-shadow w CSS3</title>
    <style>
        .shadow-text {
            color: #000; /* Kolor tekstu */
            font-size: 24px; /* Rozmiar czcionki */
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Cień tekstu */
        }
    </style>
</head>
<body>

<div class="shadow-text">Cieniowany tekst w CSS3</div>

</body>
</html>

W powyższym przykładzie, właściwość text-shadow jest zastosowana do diva z klasą .shadow-text, tworząc cień, który wygląda jak delikatna mgiełka wokół tekstu. Składnia text-shadow obejmuje cztery wartości:

  • Pierwsze dwie wartości określają przesunięcie cienia względem tekstu (poziomo i pionowo).
  • Trzecia wartość określa rozmycie cienia.
  • Czwarta wartość definiuje kolor cienia, który może być zdefiniowany w różnych formatach (np. hex, rgb, rgba).

Tworzenie wielowarstwowych cieni

CSS3 pozwala na definiowanie wielu cieni dla pojedynczego elementu tekstu, rozdzielając poszczególne cienie przecinkami. Poniżej znajduje się przykład zastosowania wielowarstwowych cieni:

.multiple-shadows {
    text-shadow: 1px 1px 2px #e3e3e3, 
                 2px 2px 4px rgba(0, 0, 0, 0.2),
                 -1px -1px 2px rgba(255, 255, 255, 0.4);
}

W tym przykładzie zastosowano trzy cienie do tekstu: dwa cienie zewnętrzne (jeden jaśniejszy i jeden ciemniejszy) oraz jeden cień wewnętrzny, co tworzy efekt głębi i złożoności wizualnej.

Podsumowanie

Właściwość text-shadow w CSS3 jest potężnym narzędziem do tworzenia efektów tekstowych, pozwalającym na dodanie głębi, trójwymiarowości i subtelnych efektów wizualnych do tekstu na stronach internetowych. Dzięki możliwości definiowania wielu cieni, programiści i projektanci mogą eksperymentować z różnymi kombinacjami, aby stworzyć unikalne i atrakcyjne teksty. Używanie text-shadow jest prostym, ale skutecznym sposobem na wyróżnienie ważnych elementów na stronie i dodanie im artystycznego charakteru.

Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs video WebDeveloper w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.

Powiązane artykuły

Scroll to Top