39. CSS3 - Cień tekstu oraz cień elementu HTML

W tej części kursu CSS przyjrzymy się bliżej dwóm właściwościom CSS, które służą do utworzenia cienia w tekście lub w elemencie HTML. Tymi właściwościami są właściwość text-shadow oraz właściwość box-shadow.

Za pomocą właściwości text-shadow możemy dodać cień do tekstu elementu HTML. Właściwość text-shadow oczekuje od nas podania czterech obowiązkowych wartości. Przykład:

div {
  font-size:3em;
  text-shadow:0 0 6px red;
}

Rezultat:

Wyjaśnienie poszczególnych wartości właściwości text-shadow znajduje się poniżej.

• 0 - przesunięcie cienia w poziomie, dodatnia wartość przesuwa w prawo, a ujemna w lewo

• 0 - przesunięcie cienia w pionie, dodatnia wartość przesuwa w dół, a ujemna w górę

• 6px - wartość rozmycia cienia

• red - kolor cienia

Nasz cień możemy przesunąć, np. w prawo o 2px oraz w dół o 3px, a więc dodajemy właściwość text-shadow wraz z wartościami 2px 3px 6px red do naszego przykładowego elementu div.

div {
  font-size:3em;
  text-shadow:2px 3px 6px red;
}

Rezultat:

Nasz cień posiada wartość rozmycia 6px, zobaczmy co się z nim stanie, gdy ta wartość będzie wynosić 0.

div {
  font-size:3em;
  text-shadow:2px 3px 0 red;
}

Rezultat:

Właściwość text-shadow może określać więcej cieni dla danego tekstu elementu HTML, wystarczy że kolejne wartości, opisujące jeden rodzaj cienia, oddzielimy od siebie przecinkiem.

div {
  font-size:3em;
  text-shadow:2px 3px 6px red, 4px 6px 6px green;
}

Rezultat:

Jednym z ciekawszych efektów, jaki możemy uzyskać określając kilka cieni jednocześnie, dla tekstu elementu HTML, jest efekt, który został zaprezentowany poniżej.

Kluczem do uzyskania efektu, który został zaprezentowany powyżej, jest to, aby pierwszy cień posiadał jasny kolor, a najlepiej biały kolor, dodatkowo pierwszy oraz drugi cień nie powinien być rozmyty. Kolejnym warunkiem jest to, aby drugi cień był odsunięty trochę bardziej od pierwszego cienia. Dodatkowo możemy dodać trzeci cień w tym samym miejscu, co drugi cień. Trzeci cień może być rozmyty dla polepszenia całego efektu.

div {
  font-size:3em;
  text-shadow:0 2px 0 #FFF,
              0 3px 0 #AAA,
              0 3px 4px #AAA;
  /*
    Pierwszy cień jest biały, dzięki czwartej wartości #FFF, nie jest on rozmyty dzięki trzeciej wartości 0, jest on przesunięty o 2 piksele w dół dzięki drugiej wartości 2px
    Drugi cień jest szary, dzięki czwartej wartości #AAA, nie jest on rozmyty dzięki trzeciej wartości 0, jest on przesunięty o 3 piksele w dół dzięki drugiej wartości 3px, tym samym jest on odsunięty o jeden piksel dalej niż pierwszy cień
    Trzeci cień ma taki sam kolor jak drugi cień, dzięki czwartej wartości #AAA, jest on rozmyty dzięki trzeciej wartości 4px, znajduje się on w tym samym miejscu co drugi cień, dzięki wartościom 0 3px
  */
}

Czas zająć się właściwością box-shadow. Jeżeli chodzi o wartości jakie możemy podawać wraz z nią, to są one podobne do wartości właściwości text-shadow. Dodatkowo mamy do dyspozycji dwie wartości, które nie są obowiązkowe. Wyjaśnienie poszczególnych wartości właściwości box-shadow znajduje się poniżej.

• 0 - przesunięcie cienia w poziomie, dodatnia wartość przesuwa w prawo, a ujemna w lewo

• 0 - przesunięcie cienia w pionie, dodatnia wartość przesuwa w dół, a ujemna w górę

• 6px - wartość rozmycia cienia

• 2px - powiększenie lub pomniejszenie cienia, dodatnia wartość powiększa, a ujemna pomniejsza - ta wartość nie jest obowiązkowa

• black - kolor cienia

• inset - cień wewnątrz elementu HTML - ta wartość nie jest obowiązkowa

Zobaczmy jak będzie wyglądał przykładowy element HTML, gdy dodamy do niego właściwość box-shadow wraz z wartościami 0 0 6px black.

div {
  margin:15px;
  padding:15px;
  text-align:center;
  box-shadow:0 0 6px black;
}

Rezultat:

Nasz cień możemy również przesunąć, np. nieco w prawo oraz w dół, dzięki pierwszej wartości 3px oraz drugiej wartości 3px.

div {
  margin:15px;
  padding:15px;
  text-align:center;
  box-shadow:3px 3px 6px black;
}

Rezultat:

Jeżeli jako czwartą wartość podamy liczbę wyrażoną w pikselach to zmienimy tym samym domyślny rozmiar cienia, np. możemy go powiększyć za pomocą wartości 4px.

div {
  margin:15px;
  padding:15px;
  text-align:center;
  box-shadow:3px 3px 6px 4px black;
}

Rezultat:

Gdy nasza czwarta wartość, która odpowiada za rozmiar cienia, będzie wartością ujemną, to zmniejszy ona cień, dzięki czemu możemy uzyskać ciekawy rezultat, który został zaprezentowany poniżej.

div {
  margin:15px;
  padding:15px;
  text-align:center;
  box-shadow:0 6px 6px -6px #666;
}

Rezultat:

Cień może znaleźć się również wewnątrz elementu HTML, jeżeli podamy dodatkową wartość inset.

div {
  margin:15px;
  padding:15px;
  text-align:center;
  box-shadow:0 0 6px 2px black inset;
}

Rezultat:

Właściwość box-shadow, podobnie jak właściwość text-shadow, umożliwia utworzenie kilku cieni jednocześnie. Kolejne grupy wartości, które opisują jeden rodzaj cienia, należy podawać po przecinku. Ciekawy efekt możemy uzyskać, gdy podamy kilka grup wartości opisujących cienie elementu HTML w taki sposób, aby każdy kolejny cień był odsunięty od elementu HTML o jedną, stałą, rosnącą wartość, np. 10px, przy równoczesnym podawaniu wartości rozmiaru cienia, które będą malały połowę tej wartości. Dodatkowo powinniśmy zmieniać kolor każdego kolejnego cienia, na nieco jaśniejszy.

div {
  margin:20px;
  padding:15px;
  text-align:center;
  border:1px solid black;
  box-shadow:0 -10px 0 -5px #000,
             0 -20px 0 -10px #555,
             0 -30px 0 -15px #AAA,
             0 -40px 0 -20px #EEE;
}

Rezultat:

Natomiast gdy będziemy zwiększać rozmiar naszego cienia i nie będziemy go zmniejszać, to uzyskamy następujący rezultat:

Reguła CSS:

div {
  margin:20px;
  padding:15px;
  text-align:center;
  border:1px solid black;
  box-shadow:0 0 0 5px #000,
             0 0 0 10px #555,
             0 0 0 15px #AAA,
             0 0 0 20px #EEE;
}

Nasze cienie mogą być również umieszczone, w ten sposób, wewnątrz elementu HTML.

div {
  margin:20px;
  padding:20px;
  text-align:center;
  border:1px solid black;
  box-shadow:0 0 0 5px #000 inset,
             0 0 0 10px #555 inset,
             0 0 0 15px #AAA inset,
             0 0 0 20px #EEE inset;
}

Rezultat:

Ta część kursu CSS miała na calu pokazanie Ci, że czasami możemy spotkać się z właściwościami CSS, które oferują nam nieco ukryte zdolności, dlatego naszym zadaniem jest dobór dla nich odpowiednich wartości, dzięki czemu możemy uzyskiwać dodatkowe rezultaty.

W następnej części kursu CSS poznamy czym są gradienty liniowe oraz promieniste.