[CSS] Jak dodać cień do elementu o nieregularnych kształtach?

W projektowaniu ciekawie wyglądających interfejsów bardzo często przydatne są cienie. Pozwalają na dodanie głębii stronom. Wszystko jest proste i w zasadzie bezproblemowe jeśli dodajemy cień do elementu o prostej krawędzi. Problem się jednak zaczyna gdy trzeba dodać cień do elementu o nieregularnej krawędzi.

Dodawanie cienia do elementu

Wyobraźmy sobie, że mamy wysuwany panel albo zakładkę. Na przykład, taki element jak na obrazku poniżej:

Jest to element strony, o nieregularnym kształcie i który posiada cień pod sobą. Wygląda to ciekawie i można zastosować to rozwiązanie w wielu przypadkach. Zanim jednak przejdziemy do kodu CSS odpowiedzialnego za wygenerowanie tego typu efektu, przygotujemy odpowiedni kod HTML, który będziemy potem stylować:

1
2
3
4

<div class="block">
  <p>Jakiś tekst.</p>
  <a href="#" class="tab">Zakładka</a>
</div>

Struktura jest banalna. Posiadamy kontener na wiadomość oraz paragraf i link. Kontener i link będą miały dodany cień, co możesz sprawdzić w kodzie CSS poniżej.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

.block {
  position: relative;
  z-index: 1;
  width: 600px;
  line-height: 1.5;
  margin: 1em auto;
  padding: 1em;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25);
}
.tab {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 2;
  width: 100px;
  line-height: 2;
  margin-left: -50px;
  text-align: center;
  background: #fff;
  color: green;
  box-shadow: 0 3px 3px 0px rgba(0, 0, 0, 0.25),
              3px 1px 3px -2px rgba(0, 0, 0, 0.25),
              -3px 1px 3px -2px rgba(0, 0, 0, 0.25);
}

Zasada działania tego rozwiązania jest bardzo prosta. W celu wygenerowania cienia pod zakładką wykorzystaliśmy możliwość nakładania się cienia elementu. Cień nie musi być jeden, może ich być wiele i każdy z nich może mieć inną pozycję względem elementu do którego dodajemy cień. W powyższym przykładzie, element z klasą tab wykorzystuje 3 kopie swojego cienia aby osiągnąć zamierzony efekt.

Temat tworzenia różnego rodzaju elementów strony za pomocą box-shadow był poruszany już wcześniej na tym blogu. Wtedy skupiliśmy się na tworzeniu figur geometrycznych za pomocą CSS.

Podsumowanie

Mam nadzieję, że zaprezentowana tutaj technika przyda Ci się w tworzeniu efektownych interfejsów strony. W tym przypadku, mając wiedzę z tego wpisu jak i wcześniej wspomnianego, można dokonać cudów. Jedynym ograniczeniem staje się nasza wyobraźnia oraz wsparcie przeglądarek. Na szczęście, jedyną liczącą się przeglądarką która może sprawiać problemy jest tylko Internet Explorer 8.
Dlatego jeśli nie musisz się martwić o wsparcie dla tej przeglądarki, to możesz bez przeszkód wykorzystać technikę wykorzystaną w tym wpisie.

źródło