W┼éasno┼Ť─ç CSS box-shadow

> Dodaj do ulubionych

W┼éasno┼Ť─ç CSS box-shadow dodaje efekt cienia wok├│┼é elementu na stronie internetowej. Za jej pomoc─ů mo┼╝na tworzy─ç atrakcyjne efekty wizualne, aby na przyk┼éad urozmaici─ç wygl─ůd ilustracji graficznych lub innych element├│w strony.

W┼éasno┼Ť─ç ta umo┼╝liwia okre┼Ťlenie, na jak─ů odleg┼éo┼Ť─ç cie┼ä ma by─ç wysuni─Öty poza ka┼╝d─ů z kraw─Ödzi elementu, sposobu jego rozmazania oraz jego rozmiaru.

Je┼Ťli element, do kt├│rego zastosowano w┼éasno┼Ť─ç box-shadow, ma zaokr─ůglone rogi, to cienie r├│wnie┼╝ zostaj─ů odpowiednio zaokr─ůglone.

Prosty przykład

Poni┼╝ej znajduje si─Ö przyk┼éadowa definicja cienia dla elementu div. Jest on wysuni─Öty o 10 pikseli poza praw─ů i doln─ů kraw─Öd┼║ elementu, ma 5-pikselowe rozmazanie oraz jest powi─Ökszony w stosunku do rozmiaru swojego elementu o 10 pikseli.

div {
  width: 350px;
  height: 150px;
  box-shadow: 10px 10px 5px 10px navy;
}

Efekt:

Prosty przyk┼éad u┼╝ycia w┼éasno┼Ťci CSS box-shadow

Warto┼Ťci i sk┼éadnia

Za pomoc─ů w┼éasno┼Ťci box-shadow mo┼╝na zdefiniowa─ç dowoln─ů liczb─Ö par cieni i dlatego przyjmuje ona dowoln─ů liczb─Ö grup warto┼Ťci rozdzielanych przecinkami (w specyfikacjach CSS taka grupa jest oznaczana symbolem <shadow>) albo warto┼Ť─ç none, oznaczaj─ůc─ů brak cieni.

Ka┼╝da grupa mo┼╝e zawiera─ç od dw├│ch do sze┼Ťciu warto┼Ťci, za pomoc─ů kt├│rych mo┼╝na okre┼Ťli─ç po┼éo┼╝enie, rozmazanie i rozmiar cienia, jego kolor oraz to, czy ma on by─ç renderowany wewn─ůtrz, czy na zewn─ůtrz elementu.

Aby wi─Öc zdefiniowa─ç pojedyncz─ů par─Ö cieni elementu, nale┼╝y zdefiniowa─ç od dw├│ch do czterech warto┼Ťci z jednostkami d┼éugo┼Ťci oraz opcjonalnie warto┼Ť─ç koloru i s┼éowo kluczowe inset.

  • Dwie liczby z jednostk─ů d┼éugo┼Ťci: najprostsza mo┼╝liwa definicja cienia zawiera tylko dwie liczby z jednostkami d┼éugo┼Ťci, kt├│re okre┼Ťlaj─ů jego po┼éo┼╝enie wzgl─Ödem elementu. Pierwsza okre┼Ťla jego przesuni─Öcie w poziomie, a druga ÔÇô w pionie, np.:
    div {
      border: 1px solid lightpink;
      box-shadow: 10px 10px;
    }

    Efekt:

    W┼éasno┼Ť─ç CSS box-shadow z dwiema liczbami

    Warto┼Ťci dodatnie powoduj─ů przesuni─Öcie w prawo i w d├│┼é. Natomiast warto┼Ťci ujemne powoduj─ů odpowiednio przesuni─Öcie w lewo i w g├│r─Ö. Gdyby┼Ťmy wi─Öc powy┼╝szy przyk┼éad zmodyfikowali nast─Öpuj─ůco:

    div {
      border: 1px solid lightpink;
      box-shadow: -10px -10px;
    }

    ÔÇŽto uzyskaliby┼Ťmy taki efekt:

    W┼éasno┼Ť─ç box-shadow z warto┼Ťciami ujemnymi

    Dwie pierwsze warto┼Ťci okre┼Ťlaj─ů przesuni─Öcie cienia w dw├│ch kierunkach. Gdyby┼Ťmy wi─Öc ustawili je na 0, to cie┼ä nie wysun─ů┼éby si─Ö spod elementu i by┼éby niewidoczny, chyba ┼╝e dodatkowo zdefiniowaliby┼Ťmy rozmazanie lub powi─Ökszenie, kt├│re spowodowa┼éyby, ┼╝e by si─Ö ujawni┼é.

  • Trzy liczby z jednostk─ů d┼éugo┼Ťci: je┼Ťli zostan─ů podane trzy liczby z jednostk─ů d┼éugo┼Ťci, to dwie pierwsze s─ů interpretowane jako warto┼Ť─ç przesuni─Öcia w poziomie i pionie, a trzecia jako warto┼Ť─ç rozmazania (ang. blur). Im wi─Öksza jest ta warto┼Ť─ç, tym rozmycie wi─Öksze i ja┼Ťniejsze. Je┼Ťli t─Ö warto┼Ť─ç ustawimy na 0 lub nie podamy jej w og├│le (co jest r├│wnoznaczne z ustawieniem na 0), to cie┼ä b─Ödzie mia┼é ostre kraw─Ödzie, jak wida─ç w powy┼╝szych przyk┼éadach. Ponadto ta warto┼Ť─ç nie mo┼╝e by─ç ujemna, np.:
    div {
      border: 1px solid lightpink;
      box-shadow: 10px 10px 12px;
    }

    Efekt:

    W┼éasno┼Ť─ç box-shadow z rozmazaniem
  • Cztery liczby z jednostk─ů d┼éugo┼Ťci: trzy pierwsze warto┼Ťci s─ů interpretowane w spos├│b opisany powy┼╝ej, a czwarta okre┼Ťla rozmiar cienia (ang. spread). Je┼Ťli jest wi─Öksza od zera, to cie┼ä si─Ö powi─Öksza, a je┼Ťli jest mniejsza od zera, to cie┼ä si─Ö kurczy, np.: box-shadow z rozmazaniem i spreadem

    Je┼Ťli t─Ö warto┼Ť─ç ustawimy na 0 lub nie podamy jej w og├│le (co jest r├│wnoznaczne z ustawieniem na 0), to cie┼ä b─Ödzie mia┼é taki sam rozmiar, jak element, dla kt├│rego zosta┼é zdefiniowany.

  • Warto┼Ť─ç koloru: warto┼Ť─ç koloru mo┼╝e znajdowa─ç si─Ö na pocz─ůtku lub na ko┼äcu grupy i okre┼Ťla barw─Ö cienia, np. obie poni┼╝sze regu┼éy CSS s─ů poprawne:
    div {
      border: 1px solid lightpink;
      box-shadow: maroon 10px 10px 12px 10px;
    }
    div {
      border: 1px solid lightpink;
      box-shadow: 10px 10px 12px 10px maroon;
    }

    W obu przypadkach efekt b─Ödzie taki sam, jak wida─ç na poni┼╝szym zrzucie ekranu.

    W┼éasno┼Ť─ç box-shadow z kolorem

    Oczywi┼Ťcie warto┼Ť─ç koloru mo┼╝na doda─ç tak┼╝e w grupie zawieraj─ůcej tylko dwie lub trzy warto┼Ťci liczbowe.

  • S┼éowo kluczowe inset: to s┼éowo kluczowe, podobnie jak warto┼Ť─ç koloru, mo┼╝e znajdowa─ç si─Ö na pocz─ůtku lub na ko┼äcu grupy i nie ma znaczenia, czy znajduje si─Ö przed, czy za warto┼Ťci─ů koloru. Jego dzia┼éanie polega na tym, ┼╝e cie┼ä zostaje wyrenderowany wewn─ůtrz zamiast na zewn─ůtrz elementu, np.:
    div {
      border: 1px solid lightpink;
      box-shadow: 10px 10px 12px 10px maroon inset;
    }

    Zdefiniowany w ten spos├│b cie┼ä zakrywa t┼éo elementu, ale znajduje si─Ö pod jego tre┼Ťci─ů oraz mie┼Ťci si─Ö w granicach obramowania.

Definiowanie kilku cieni elementu

Aby zdefiniowa─ç wi─Öcej ni┼╝ jedn─ů par─Ö cieni elementu, nale┼╝y przekaza─ç w┼éasno┼Ťci box-shadow dowoln─ů liczb─Ö grup warto┼Ťci rozdzielanych przecinkami. W ka┼╝dej grupie obowi─ůzuj─ů zasady opisane powy┼╝ej.

Je┼Ťli na przyk┼éad zdefiniujemy kilka grup z zerowymi warto┼Ťciami przesuni─Öcia i rozmazania oraz rosn─ůcymi warto┼Ťciami spreadu, to otrzymamy ciekawy efekt wizualny:

div {
  box-shadow: 0 0 0 30px lightpink,
              0 0 0 60px lightyellow,
              0 0 0 90px lightgreen;
}

Efekt:

W┼éasno┼Ť─ç box-shadow i kilka cieni

Innym ciekawym efektem, jaki mo┼╝na uzyska─ç dzi─Öki kreatywnemu wykorzystaniu cieni, jest stylowa ramka, np. taka, jak widoczna poni┼╝ej.

W┼éasno┼Ť─ç box-shadow i stylowa ramka

Do utworzenia tej ramki został wykorzystany poniższy kod CSS:

div {
  width: 350px;
  padding: 15px 0 40px 30px;
  font-style: italic;
  border-radius: 10px;
  box-shadow:
  10px -20px 20px lightblue inset,
  5px -5px 10px lightpink;
}

Zastosowanie

W┼éasno┼Ť─ç CSS box-shadow ma zastosowanie do wszystkich wszystkich element├│w HTML.

Podsumowanie

ZastosowanieWszystkie elementy HTML
Obs┼éugiwane warto┼Ťci
Warto┼Ť─ç pocz─ůtkowanone
DziedziczenieNie
SpecyfikacjaCSS Backgrounds and Borders Module Level 3

Zobacz r├│wnie┼╝