Efekty CSS #2 - box shadow

(c) hanchesteria & martyna11105

Hejka! W dzisiejszej notce przedstawiam wam tajniki box-shadow, z wartością na zewnątrz(której się nie piszę przy kodzie, ponieważ jest ona domyślna) oraz z wartością inset, czyli wewnątrz. Te efekty, mogą wam się przydać przy pisaniu kodu :hover do stron, bądź do efektu kolumn, żeby jakoś się odznaczały. W każdym razie przejdźmy do efektów, jakie można uzyskać.

> Box shadow - przykłady i omówienie <

1. Pierwsze dwa przykłady to box-shadow z wartością na zewnątrz oraz box-shadow z wartością inset, czyli podstawowe i najprostsze.

Przykład a)

#element1 {
  box-shadow: 2px 3px 0px #000;
}

Widzicie tutaj  4 wartości:
2px - odpowiada za przesunięcie cienia w lini horyzontu (czyli w prawo - wartości dodatnie lub w lewo - wartości ujemne)
3px - odpowiada za przesunięcie cienia w pionie (czyli w górę - wartości ujemne lub w dół - wartości dodatnie)
0px - odpowiada za promień rozmycia (tylko wartości dodatnie)
#000 - kolor cienia
Jak widzicie cień zewnętrzny jest ostry, dlatego, że dałam w wartości rozmycia 0. Im większe liczby tym większe rozmycie osiągniecie.

Przykład b)

#element2 {
  box-shadow: inset 2px 3px 5px -1px #000;
}

Tutaj z kolei mamy przedstawione 6 wartości, jednak omówię tylko te nowe:
inset - oznacza, że cień będzie znajdował się w środku elementu
-1px - odpowiada za rozproszenie cienia (wartości ujemne oznaczają, że cień będzie mniejszy, a wpisując wartości dodatnie - logicznie - cień będzie większy)

Teraz kiedy podstawy mamy już za sobą, możemy przejść do nieco bardziej skomplikowanych, ale ładniej i fajniej wyglądających rzeczy.

I. Box-shadow i gadżet tekstu
Zacznijmy od czegoś prostego, jak wygląd gadżetu tekstu.

Skupiłam się w tym kodzie na .widget-content, dodając do niego ramkę i 'dwa' cienie wewnętrzne. Więc bez zbędnego gadania, omówmy sobie kod.

#Text1 .widget-content {
  padding: 10px 20px;
  text-transform: uppercase;
  font-family: arial;
  font-size: 10px;
  letter-spacing: 1px;
  line-height: 14px;
  text-align: center;
  /*ta część kodu interesuje nas najbardziej*/
  background: #A5D6A7; /*tło treści - czyli tło tylko pod tekstem*/
  border: 2px solid #1B5E20; /*ramka o szerokości 2px i lini ciągłej*/
  box-shadow: inset 3px 3px 0px #388E3C, inset -3px -3px 0px #388E3C, inset 6px 6px 0px #2E7D32, inset -6px -6px 0px #2E7D32;
}

#2E7D32 jest to ciemniejszy kolor, który umieściłam pod jaśniejszym, jak widzicie jego wartości są większe, a to dlatego, żeby było go widać zza jaśniejszego koloru.
#388E3C jaśniejszy kolor, który jest 'na górze', jest tą pierwszą z góry widoczną warstwą.
To jest w sumie tyle co do tego kodu.

Teraz zróbmy coś do stron, shall we?

II. Strony z box-shadow inset

1. Pierwszy krok przy tym sposobie to oczywiście 'ozdobienie' linków stron. Tym nie będziemy się zajmować, ponieważ to już podstawa, podstaw.
2. Przejdźmy do efektu dla #PageList1 li a:hover, czyli efektu po najechaniu na wybrany link do strony.

#PageList1 li a:hover {
  box-shadow: inset 0px 40px 0px #C62828, inset 0px -40px 0px #C62828;
  transition: all .50s ease-in-out;
}

Posługujemy się box-shadow z wartością inset, żeby cień pojawiał się w środku. Jak widzicie po najechaniu na przykład, przedstawiony wyżej, cienie wypływaj z góry i z dołu, napływają na siebie i tworzą nam jednolite tło. Aby uzyskać ten efekt to bardzo prosta sprawa. Kod przedstawiony jest powyżej, dodajemy tylko wartość dodatnią dla jednego cienia, a dla drugiego wartość ujemną i to jest cała magia.

To tylko dwa przykłady, ale napiszcie mi czy chcielibyście jakieś inne przykłady i ich wytłumacznie. W razie jakichkolwiek pytań piszcie w komentarzach lub w zakładce "Pytania" ;)