Box-shadow + Efekt dla kart z wykorzystaniem box-shadow cz.1

Element: Linki/Różne
Stopień trudności: xxxx
Czas wykonywania: 10-20 minut

Box-shadow w wykorzystaniu dla kart to nic innego jak ciekawy efekt po hoverze ( czyli po najechaniu myszką na kartę/link ). W tym poście znajdziecie trochę anatomii tej własności, jak i kilka przykładów jej użycia. 

Cecha ta bardzo przypomina text-shadow, o której była mowa w jednym z ostatnich postów. Także myślę, że nie powinno sprawić trudności opanowanie tej - jednak - przydatnej funkcji.

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

 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.

1. Poziom - określa poziomą pozycję cienia. Dodatnie wartości przesuwają cień w prawo, ujemne w lewo.
2. Pion  - pionowa pozycja cienia. Wartość dodatnia odpowiada za przesunięcie cienia w dół, natomiast dodatnia do góry.
3. Rozmycie, czyli wartość rozmazania. Jej użycie jest opcjonalne.
4. Rozprzestrzenienie - rozmiar cienia ( opcjonalne; nieczęsto przeze mnie używane, mam wrażenie, że trochę niepotrzebne )
5. Kolor

Przykłady:

selektor { box-shadow: inset 1px 1px 10px #e0f5dc;background:#fcfcfc;}

selektor { box-shadow: 1px 1px 0px #e0f5dc;background:#fcfcfc;}

Efekt 1

Teraz jak to wygląda w przypadku linków. Na sam początek zaczniemy z dwoma prostymi kodami. Ja będę pracować na linkach stworzonych przeze mnie na potrzeby tej instrukcji, ale Wy możecie dodać efekt dla każdego innego linku na Waszym blogu ( Strony, Etykiety, Starszy/Nowszy post itd.) w zależności od tego, gdzie chcecie, aby ten efekt się pojawiał.
Box Shadow dla kart
Napisane kody, których użyłam dla efektu linków powyżej:

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

Jeśli ktoś chciałby przeczytać krótkie wyjaśnienie, to teraz ma szanse to zrobić. Otóż dla podstawowego efektu dla linku zdecydowałam dodać cień wewnątrz elementu, który jest niewielki ( na co wskazują dwie pierwsze wartości po inset - 0px 0px ), jednak dzięki rozmyciu tworzy on dostrzegalny efekt. Dla hover dodałam cień, który przemieszcza się ku dołu ( wartość dodatnia ) o kolorze pasującym do bloga.

Określając cień dla "hoveru" w poziomie czy w pionie warto wziąć pod uwagę wysokość i długość linku. Zazwyczaj te wartości muszą się pokrywać lub - w przypadku użycia paddingu - należy dodać jeszcze jego podwojoną wartość.

Ciekawy efekt można też uzyskać odpowiednio dobierając tła do cienia. Czasem warto poświęcić temu chwilkę i stworzyć naprawdę ciekawy, niepowtarzalny efekt.
Żeby jeszcze lepiej opanować tę własność kilka przykładów z wyjaśnieniami.

Efekt 2

W tym przypadku dla linku ustawiłam cień ponownie wewnątrz, ale po najechaniu na myszką efekt ten efekt narasta aż w końcu tworzy on tak naprawdę tło naszego linku.
Box Shadow dla kart

a.boxshad1:link, a.boxshad1:visited, a.boxshad1:active {width:100px;display:inline-block;background:#fbfbfb;color:#aaa;padding:3px;margin-top:3px;text-transform:uppercase;font-family:oswald;font-size:9px;text-align:center;;box-shadow:inset 0px 0px 10px #e0f5dc;border:1px solid #eee;}

a.boxshad1:hover {box-shadow: inset 0px 0px 50px #87c7ae;background:#eee;color:#fff;}

Efekt 3

W kolejnym przypadku trochę się pobawimy. Po pierwsze nie będziemy dodawać cienia dla linku początkowego, ale dodamy aż dwa dla "hover". Jeśli się zastanawiacie jak połączyć dwa efekty w jeden to odpowiedź jest prosta. Połączcie je za pomocą przecinka. Dokładny kod znajdziecie poniżej. Mój efekt to przejście z lewej strony do połowy w kolor niebieski i z prawej strony w kolor czarny. Całość spotyka się na środku, tworząc niejako dwukolorowe tło. Jeśli ktoś nie do końca rozumie poetycką wersje efektu ( czemu się nie dziwie - poeta ze mnie żaden ), wystarczy najechać na jeden z linków niżej. :) Box Shadow dla kart

a.boxshad2:link, a.boxshad2:visited, a.boxshad2:active {width:100px;display:inline-block;background:#e0f5dc;color:#666;padding:3px;text-transform:uppercase;font-family:oswald;font-size:9px;text-align:center;margin-top:-5px;border:1px solid #eee;}

a.boxshad2:hover {box-shadow:inset 55px 0px 30px #87c7ae, inset -55px 0px 30px #222;background:#eee;color:#fff;}

Jestem dumna ze wszystkich, którzy czytają te słowa. Nie wierzę, że to przetrwaliście.
Jednak o box-shadow to nie wszystko; jak gdzieś wyżej pisało niedługo pojawi się druga część i ciut więcej namieszamy, aby było inaczej, ciekawiej i może  bardziej kolorowo.

źródło box-shadow 1 2