Efekt dla kart z wykorzystaniem box-shadow cz.2

Dzisiaj druga część i ostatnia opowiadająca o tym jak ciekawie wykorzystać własność box-shadow dla naszego menu. Więcej myślę nie potrzeba, bo funkcja ta nie jest trudna i każdy mniej więcej już wie o co chodzi. Zresztą i tak uważam, że w tej właściwości bardziej liczy się wyobraźnia i pomysł!

Na sam początek warto zajrzeć do części pierwszej lub, gdy już wcześniej się z nią zapoznaliście, wystarczy spojrzeć na krótką ściągę poniżej.

 selektor { box-shadow: inset  poziom pion rozmycie rozprzestrzenienie kolor;}

• Inset używamy chcąc zrobić cień w środku elementu i właśnie na tym się skupimy.
• Poziom - określa poziomą pozycję cienia. Dodatnie wartości przesuwają cień w prawo, ujemne w lewo.
• Pion - pionowa pozycja cienia. Wartość dodatnia odpowiada za przesunięcie cienia w dół, natomiast dodatnia do góry.
• Rozmycie, czyli wartość rozmazania. Jej użycie jest opcjonalne.
• Rozprzestrzenienie - rozmiar cienia ( opcjonalne )
• Kolor

 Przypomniane? To fantastycznie.

Dzisiaj będziemy stosować 2 komendy na raz. Aby jednak działało nam to poprawnie i wszystko było widać jak należy, każdą komendę należy oddzielić przecinkiem! Myślę, że to raczej nie będzie trudne.

Efekt 1

Na początku spróbujemy połączyć dwa efekty w jeden:

• box-shadow:inset 0px 20px 0 #fff; - inaczej po prostu  efekt w pionie;
• box-shadow:inset 90px 0 0 #fff; - zwyczajnie efekt w poziomie;

Box Shadow dla kart Oto nasz skromny efekt. Jak możecie zauważyć jeden kolor nakłada się stopniowo na drugi. Poniżej kod jaki wpisałam dla stworzonej przez siebie klasy ( o tworzeniu tego typu menu dowiecie się tutaj )

a.boxshada:link, a.boxshada:visited, a.boxshada:active {width:102px;display:inline-block;background:#f5f5f5;color:#666;padding:3px;text-transform:uppercase;font-family:oswald;font-size:9px;text-align:center;border:1px solid #eee;margin-top:3px;margin-bottom:3px;}
a.boxshada:hover {box-shadow: inset 0px 30px 0px #87c7ae, inset 130px 0px 0px #696b73;background:#e0f5dc;color:#fff;}

U mnie cały efekt "kończy się" na kolorze turkusowym, bo kod warunkujący przekształcenie w tym kolorze jest wymieniony jako pierwszy. Dlatego warto pamiętać, że końcowy odcień linku to ten z pierwszej części kodu.

Efekt 2

Następny nasz cień będzie się zbiegał się w środku, a kolory będą "pokazywać się" z przeciwnych rogów linki. Uzyskanie takiego przejścia może być troszkę kłopotliwe, bo jest ono zależne od wymiarów naszego linku.
Box Shadow dla kart

a.boxshada1:link, a.boxshada1:visited, a.boxshada1:active {width:102px;display:inline-block;background:#f5f5f5;color:#666;padding:3px;text-transform:uppercase;font-family:oswald;font-size:9px;text-align:center;border:1px solid #eee;margin-top:3px;margin-bottom:3px;}
a.boxshada1:hover {box-shadow: inset -30px -20px 0px #87c7ae, inset 30px 20px 0px #696b73;background:#e0f5dc;color:#fff;}

Na początku może Was zainteresować fakt, że dla efektu w poziomie jest tylko 30px mimo, że długość linku to 102px. Otóż nie jest to konieczne. Efekt w pionie równy wysokości linku zagwarantuje nam, że przejście zakończy się na jednolitej barwie. Wartość w poziomie, w tym wypadku, jest tutaj czynnikiem, który odpowiada za walory wizualne naszego przejścia.
Pamiętajcie też, aby odpowiednio pozmieniać znaki. Jeśli w pierwszej części są minusy, to w drugiej dodajcie wartości dodatnie. 

Efekt 3

Teraz zrobimy "full combo", czyli połączymy efekty z góry, z dołu, z lewej strony i z prawej, a na dodatek dodamy też lekki cień we wnętrzu linku, który "ubarwi" nam nieco tło przejścia.
Box Shadow dla kart

a.boxshada2:link, a.boxshada2:visited, a.boxshada2:active {width:102px;display:inline-block;background:#f5f5f5;color:#666;padding:3px;text-transform:uppercase;font-family:oswald;font-size:9px;text-align:center;border:1px solid #eee;margin-top:3px;margin-bottom:3px;box-shadow:inset 0px 0px 10px #e0f5dc;}
a.boxshada2:hover {box-shadow:inset 0px 0px 40px #e0f5dc, inset 0px 30px 10px #87c7ae, inset 120px 0px 10px #696b73, inset -120px 0px 10px #696b73, inset 0px -30px 10px #87c7ae;background:#e0f5dc;color:#fff;}

Nie jestem pewna czy pisanie pięciu kodów dla jednego prostego menu to nie przesada, ale mi się efekt końcowy podoba. Na dodatek podczas najechania myszką robi nam się miks kolorów, najpierw stopniowo kolor zmienia się na ciemniejszy, aby ostatecznie stać się pięknym turkusem z lekkim, jasnym cieniem wokół. Wszystkie ruchy dozwolone.

 Jak uda Wam się wymyślić inne ciekawe przejścia, dajcie znać. Box-shadow jest pełen niespodzianek i na pewno jest kluczowym elementem naprawdę powalającego menu!