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.