Cienie

CSS3 wprowadził wiele nowych możliwości stylizacji, w tym efekty cieniowania, które pozwalają projektantom dodawać głębię i realizm do elementów interfejsu użytkownika. Dzięki właściwościom box-shadow i text-shadow, można tworzyć cienie dla bloków tekstowych i innych elementów strony. W tej lekcji przyjrzymy się różnym sposobom użycia tych właściwości, wraz z przykładami kodu ilustrującymi ich zastosowanie.

Przykład użycia box-shadow

box-shadow pozwala dodać cień do dowolnego elementu blokowego. Można kontrolować rozmiar, kolor, rozmycie, a nawet kierunek cienia.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Przykłady cieni w CSS3</title>
    <style>
        .box-shadow-example {
            margin: 20px;
            padding: 20px;
            border: 1px solid #ccc;
            /* Dodanie cienia do elementu: 
               przesunięcie poziome, przesunięcie pionowe, rozmycie, 
               rozprzestrzenienie, kolor */
            box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.3);
        }
    </style>
</head>
<body>
    <div class="box-shadow-example">Przykład box-shadow</div>
</body>
</html>

Przykład użycia text-shadow

text-shadow dodaje cień do tekstu, umożliwiając tworzenie interesujących efektów typograficznych.

<style>
    .text-shadow-example {
        /* Dodanie cienia do tekstu: 
           przesunięcie poziome, przesunięcie pionowe, rozmycie, kolor */
        text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    }
</style>
<div class="text-shadow-example">Przykład text-shadow</div>

Możliwe wartości dla box-shadow i text-shadow

Wartości, które można użyć w obu właściwościach, obejmują:

  • Przesunięcie poziome i pionowe: Określają, jak daleko od elementu (w poziomie i pionie) powinien pojawić się cień.
  • Rozmycie: Określa, jak bardzo cień powinien być rozmyty.
  • Rozprzestrzenienie (tylko box-shadow): Określa, jak bardzo cień powinien się rozprzestrzeniać.
  • Kolor: Określa kolor cienia. Może to być wartość hex, RGB(A), HSL(A).

Podsumowanie

Cienie w CSS3 oferują potężne narzędzie do poprawy estetyki strony internetowej, pozwalając na dodanie głębi i wyróżnienie kluczowych elementów interfejsu użytkownika. Dzięki box-shadow i text-shadow, projektanci mają pełną kontrolę nad efektem cieniowania, co umożliwia tworzenie bardziej dynamicznych i atrakcyjnych projektów webowych.

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

Poprzedni
Następny
Scroll to Top