Tym razem też krótka podpowiedź z zakresu CSS, będzie mowa o cieniu. Cień podąża za obiektem w słoneczny dzień i nie ma szans na jego pozbycie się. W przypadku CSS standardowo cienia nie ma. Zwykły napis bez cienia wygląda tak:

NAPIS BEZ CIENIA

jeśli dodamy styl CSS może wyglądać on tak:

NAPIS Z CIENIEM

Odpowiada za to kod:

box-shadow: 5px 5px 5px #b2b2b2;

Ze względu na różne wersje przeglądarek to tak właściwie powinno być tak jak poniżej ale dla czytelności w kolejnych przykładach posługiwać będę się wersją skróconą:

-webkit-box-shadow: 5px 5px 5px #b2b2b2;
-moz-box-shadow: 5px 5px 5px #b2b2b2;
box-shadow: 5px 5px 5px #b2b2b2;

jeśli chcemy cień tylko dla tekstu:

NAPIS Z CIENIEM

text-shadow: 5px 5px 5px #b2b2b2;

Jeśli zamkniemy tekst w ramce to standardowo wygląda on tak:

Jeśli do ramki dodamy cień to może wyglądać tak:

box-shadow: 0 0 15px #555;

No ale nic nie stoi na przeszkodzie by cień wył wewnątrz dając wrażenie treści umieszczonej w głębi ramki w taki sposób:

box-shadow: 0 0 15px #555 inset;

lub w taki sposób:

box-shadow: -5px -5px 5px #CCC inset;

Można też „na ostro”:

box-shadow: 15px 15px 0 10px #447042;

Cień z cieniem:

box-shadow: 0 0 10px #777 inset;
text-shadow: 0 0 5px #777;

Jak widać możliwości jest sporo a odpowiada za to w przypadku tekstu:

text-shadow

w przypadku elementów blokowych:

box-shadow

Uogólniony zapis dla box-shadow wygląda tak:

box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;

gdzie:
none – bez cienia
h-shadow – odległość cienia w poziomie (może być też wartość ujemna), wartość wymagana
v-shadow – odległość cienia w pionie (może być też wartość ujemna), wartość wymagana
blur – rozmycie, wartość opcjonalna
spread – rozmiar cienia (może być wartość ujemna), wartość opcjonalna
color – kolor, czy to w formacie #RRGGBB czy też np. rgba(R,G,B,alpha)
inset – cień wewnątrz – domyślnie cień na zewnątrz, wartość opcjonalna
initial – ustawia parametry cienia do ich domyślnych wartości
inherit – dziedziczy ustawienia cienia „po rodzicu”

dla text-shadow wygląda tak:

text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;

gdzie:
none – bez cienia
h-shadow – odległość cienia w poziomie (może być też wartość ujemna), wartość wymagana
v-shadow – odległość cienia w pionie (może być też wartość ujemna), wartość wymagana
blur-radius – rozmycie, wartość opcjonalna
color – kolor, czy to w formacie #RRGGBB czy też np. rgba(R,G,B,alpha)
initial – ustawia parametry cienia do ich domyślnych wartości
inherit – dziedziczy ustawienia cienia „po rodzicu”

W celu sprawdzenia jak cień wygląda można użyć generatorów dostępnych na stronach np. https://www.cssmatic.com/box-shadow lub posługiwać się narzędziami developerskimi dostępnymi w przeglądarkach – klawisz F12 i oglądanie co stanie się z danym obiektem po zmianach w jego stylu.