Tworzenie cieni elementów za pomocą własności CSS3

W jednym z poprzednich poradników, zająłem się cieniem tekstu. Tym razem rozszerzymy to pojęcie, tworząc cień (lub poświatę) dla każdego, dowolnego elementu na naszej witrynie. Standardowo używać będziemy własności box-shadow, natomiast dla przeglądarek Webkit (Chrome, Safari) i Mozilla będziemy musili dodać kolejno przyrostki -webkit- oraz -moz-.

Dodawanie cienia do elementu

Aby dodać cień dla wybranego przez nas elementu, wpiszmy do arkusza stylów poniższy kod CSS:

• Pierwszy parametr określa wartość przesunięcia cienia w poziomie.
• Drugi – przesunięcie w pionie. Wartości dodatnie przesuwają cień w prawo i w dół, natomiast ujemne – w lewo i w górę.
• Trzeci parametr ustawia stopień rozmazania cienia – im wyższy, tym cień, lub poświata, są większe i jaśniejsze. Nie musimy podawać tego elementu, jednak jeśli tego nie zrobimy, przyjęta zostanie wartość 0.
• Pozostaje czwarta wartość – rozproszenie – które służy do określenia położenia punktu przełamania cienia (czyli odległości od elementu, kiedy cień zaczyna znikać). Im większa jest wartość rozproszenia, tym większa część cienia jest ciemna.
• Na końcu wpisujemy kolor, który chcemy użyć – najlepiej w notacji RGBA (zawierającej kanał alfa – przezroczystość).

Jeżeli po definicji przesunięcia pionowego i poziomego podamy tylko jeden parametr, zostanie on potraktowany jako wartość rozmazania!

Cień wewnętrzny

Czasami zachodzi potrzeba wstawienia cienia, ale wewnątrz elementu. Nic prostszego. Do powyższego listingu musimy dodać tylko słowo kluczowe inset.

Kilka cieni w jednym elemencie

Dla każdego elementu na stronie możemy utworzyć dowolną liczbę cieni. Jedyne co musimy zrobić, to oddzielić kolejne deklaracje za pomocą przecinka, na końcu stawiając średnik.

Efekt poświaty

Jak stworzyć świecącą otoczkę? Wystarczy, że element umieścimy na czarnym (lub innym, ciemnym tle) i ustawimy kolor cienia (poświaty) na jasny kolor, na przykład biały.