Ostatnio edytowany:

box-shadow

Autor: Virtual Patriot

Opis właściwości box-shadow

Za pomocą właściwości box-shadow możemy określić dodatkowy efekt cienia dla interesującego nas elementu HTML.

Dodatkowe techniczne informacje o właściwości box-shadow

przeznaczenie

element HTML każdego typu

pozycja

dowolna

dziedziczenie

nie

wartość initial

none

wyjątki initial

brak

animowanie

tak

Interpretacja właściwości box-shadow

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak, lecz od wersji 9

Edge

tak

Zobacz więcej informacji o interpretacji właściwości .

Opis wartości właściwości box-shadow

none

Opis

Wartość none jest domyślną wartością właściwości box-shadow.

Domyślnie element HTML nie posiada żadnego dodatkowego efektu cienia.

Przykład

  box-shadow:none;
ten element "div" nie posiada żadnego dodatkowego efektu cienia

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    <div>
      ten element "div" nie posiada żadnego dodatkowego efektu cienia
    </div>

  </body>
</html>

wzorzec wartości

Opis

Za pomocą właściwości box-shadow oraz z góry zdefiniowanego wzorca wartości możemy określić dodatkowy efekt cienia dla interesującego nas elementu HTML.

Składniki wzorca wartości właściwości box-shadow

Przykładowe zapisy

5px 10px

5px 10px 2px

5px 10px 2px 3px

5px 10px -2px 3px red

5px 10px 2px 3px red inset

-10px -5px black inset

-5px 10px 2px blue

x

Składnik x jest wymaganym składnikiem wzorca wartości właściwości box-shadow. Składnik x określa przesunięcie w poziomie cienia interesującego nas elementu HTML.

Dostępne wartości

dowolna liczba wraz z wybraną jednostką absolutną lub jednostką relatywną

Wartości dodatnie

wartości dodatnie przesuwają cień w prawo względem rozmiaru elementu HTML

Wartości ujemne

wartości ujemne przesuwają cień w lewo względem rozmiaru elementu HTML

Wartość domyślna

0

y

Składnik y jest wymaganym składnikiem wzorca wartości właściwości box-shadow. Składnik y określa przesunięcie w pionie cienia interesującego nas elementu HTML.

Dostępne wartości

dowolna liczba wraz z wybraną jednostką absolutną lub jednostką relatywną

Wartości dodatnie

wartości dodatnie przesuwają cień w dół względem rozmiaru elementu HTML

Wartości ujemne

wartości ujemne przesuwają cień w górę względem rozmiaru elementu HTML

Wartość domyślna

0

blur

Składnik blur nie jest wymaganym składnikiem wzorca wartości właściwości box-shadow. Składnik blur określa stopień rozmycia cienia interesującego nas elementu HTML. Im większa wartość składnika blur tym stopień rozmycia cienia będzie większy.

Dostępne wartości

dowolna nieujemna liczba wraz z wybraną jednostką absolutną lub jednostką relatywną

Wartość domyślna

0

spread

Składnik spread nie jest wymaganym składnikiem wzorca wartości właściwości box-shadow. Składnik spread określa rozmiar rozpiętości cienia interesującego nas elementu HTML.

Dostępne wartości

dowolna liczba wraz z wybraną jednostką absolutną lub jednostką relatywną

Wartości dodatnie

wartości dodatnie zwiększają rozmiar rozpiętości cienia elementu HTML

Wartości ujemne

wartości ujemne zmniejszają rozmiar rozpiętości cienia elementu HTML

Wartość domyślna

0

color

Składnik color nie jest wymaganym składnikiem wzorca wartości właściwości box-shadow. Składnik color określa kolor cienia interesującego nas elementu HTML.

Dostępne wartości

wybrany sposób definiowania wartości koloru w języku CSS

Wartość domyślna

currentColor

inset

Składnik inset nie jest wymaganym składnikiem wzorca wartości właściwości box-shadow. Składnik inset określa czy cień interesującego nas elementu HTML powinien zostać utworzony wewnątrz obszaru wyznaczonego przez zewnętrzne krawędzie marginesów wewnętrznych tego elementu HTML.

Dostępne wartości

słowo kluczowe inset

Sposób podawania

należy podać słowo kluczowe inset, jeżeli chcemy, aby cień elementu HTML został utworzony wewnątrz obszaru wyznaczonego przez zewnętrzne krawędzie marginesów wewnętrznych tego elementu HTML

Wartość domyślna

brak

Przykład

  box-shadow:8px 10px 2px -3px blue;
ten element "div" posiada efekt cienia (przesunięty w prawo o 8 pikseli, przesunięty w dół o 10 pikseli, posiadający stopień rozmycia równy 2 piksele, posiadający zmniejszony o 3 piksele rozmiar rozpiętości oraz posiadający kolor niebieski), ponieważ do tego elementu "div" została dodana właściwość "box-shadow" wraz z następującymi wartościami: "8px 10px 2px -3px blue"

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        box-shadow:8px 10px 2px -3px blue;
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    <div>
      ten element "div" posiada efekt cienia (przesunięty w prawo o 8 pikseli, przesunięty w dół o 10 pikseli, posiadający stopień rozmycia równy 2 piksele, posiadający zmniejszony o 3 piksele rozmiar rozpiętości oraz posiadający kolor niebieski), ponieważ do tego elementu "div" została dodana właściwość "box-shadow" wraz z następującymi wartościami: "8px 10px 2px -3px blue"
    </div>

  </body>
</html>

sekwencja wartości

Opis

Za pomocą sekwencji kilku oddzielonych od siebie znakiem przecinka wzorców wartości właściwości box-shadow możemy sprawić, że interesujący nas element HTML będzie posiadał kilka dodatkowych efektów cienia jednocześnie. Najbardziej na wierzchu będzie ten cień, który podamy jako pierwszy w naszym zapisie.

Przykład

  box-shadow:4px 4px 2px 1px black, 8px 8px 2px 1px red;
ten element "div" posiada dwa różne efekty cienia jednocześnie, ponieważ do tego elementu "div" została dodana właściwość "box-shadow" wraz z następującą sekwencją wartości: "4px 4px 2px 1px black, 8px 8px 2px 1px red"

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        box-shadow:4px 4px 2px 1px black, 8px 8px 2px 1px red;
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    <div>
      ten element "div" posiada dwa różne efekty cienia jednocześnie, ponieważ do tego elementu "div" została dodana właściwość "box-shadow" wraz z następującą sekwencją wartości: "4px 4px 2px 1px black, 8px 8px 2px 1px red"
    </div>

  </body>
</html>