CSS3 dał nam do dyspozycji ciekawą właściwość box-shadow. W nowym standardzie mamy również możliwość stosowania wielu cieni dla jednego obiektu. W niniejszym wpisie pokażę jak stworzyć estetyczną ramkę z rozmytymi cieniami.

Trudno opisać to słowami więc najpierw przykład tego co chcemy uzyskać:

Wielokrotne cienie

O ile wewnętrzny cień można łatwo przesunąć to już zrobienie jego rozmycia (a tym samym delikatnego zanikania) na jednym z końców do przezroczystości jest standardowo niemożliwe. Z pomocą przychodzą nam wielokrotne cienie, które będą udawać rozmywanie naszego bazowego cienia.

Kod CSS

W naszym przypadku nadamy rozmyte ramki dla każdego artykułu:

 
article{
    border-radius: 10px 0 0 0;
    box-shadow: inset -10px -10px 20px 5px #fff, inset 3px 3px 10px rgba(0,0,0,0.5);
    padding: 5px 15px 2px 10px;
}
 

Kolejność - rzecz ważna

Musimy zapamiętać jedną ważną zasadę dotyczącą cieni w CSS3 - pierwszy w kolejności cień jest ważniejszy i będzie pokrywał te dopisane później.

Tylko na gładkim tle!

Niestety sztuczka ta zadziała tylko w przypadku gładkiego tła - nie sposób wykonać to jeśli tłem będzie gradient lub obrazek. Myślę jednak, że dodawanie do naszej ramki tła to byłaby już rozrzutność :)

Do każdego elementu blokowego i nie tylko

Generalnie box-shadow przeznaczony jest do elementów blokowych (stąd jego nazwa), ale nic nie stoi na przeszkodzie, aby jakiemuś elementowi liniowemu. Z elementami liniowymi istnieje jednak niebezpieczeństwo wystąpienia rozmiarów, których nie spodziewaliśmy się projektując cień i czasem może się zdarzyć, że "nie zdążymy" go rozmyć nim "skończy się" element.

Przykład na żywo

Biorąc pod uwagę to, że jestem ostatnimi czasy zapracowany staram się robić tylko tyle ile muszę dlatego też przykładu "live" dla niniejszego wpisu nie będzie... Zamiast tego podaję link to witryny w której zastosowałem opisywany efekt: http://desi9n.pl/aktualnosci

Zachęcam do eksperymentów z wielokrotnymi cieniami – może ktoś wymyśli coś ciekawego dotyczącego cieni zewnętrznych :)

Procek