Przejdź do treści

Obramowanie

Cień

(CSS 3 - interpretuje Internet Explorer 9, Firefox 4, Opera, Chrome)

  1. Cień na zewnątrz elementu:
    selektor { box-shadow: poziom pion rozmycie rozprzestrzenienie kolor,... }
  2. Cień wewnątrz elementu:
    selektor { box-shadow: inset poziom pion rozmycie rozprzestrzenienie kolor,... }
Wartości "poziom pion rozmycie rozprzestrzenienie kolor" określają własności cienia (wartości "rozmycie", "rozprzestrzenienie" oraz "kolor" nie są wymagane):
  • poziom - przesunięcie cienia w prawo (ujemne wartości przesuwają w lewo)
  • pion - przesunięcie cienia w dół (ujemne wartości przesuwają w górę)
  • rozmycie - promień efektu rozmycia (opcjonalnie)
  • rozprzestrzenienie - określa odległość na jaką cień wychodzi spod krawędzi elementu, a dla wartości ujemnych chowają cień pod elementem (opcjonalnie)
  • kolor - kolor bazowy efektu (opcjonalnie - jeśli go nie podamy, przyjmie kolor taki, jak sam element)
Wartości "poziom", "pion", "rozmycie" oraz "rozprzestrzenienie" należy podać, używając jednostek długości.

Możliwe jest podanie więcej niż jednego efektu - wtedy kolejne efekty należy rozdzielić przecinkami. Zostaną one zastosowane w kolejności podawania.

Aby zupełnie usunąć ustalony wcześniej cień, należy podać box-shadow: none [Zobacz także: Wstawianie stylów]

Powyższe polecenie pozwala wprowadzić efekt cienia pod dowolnym elementem. Możliwe jest również podanie serii efektów, rozdzielonych przecinkami, które będą się nawzajem nakładały.

Przykład:

box-shadow: 5px 5px 10px

box-shadow: inset 5px 5px 10px;

box-shadow: 0 0 20px 10px red

box-shadow: 3px 3px 10px red, yellow -3px 3px 10px, 3px -3px 10px

Komentarze

Zobacz więcej komentarzy