poniedziałek, 22 kwietnia 2013

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

5 komentarzy:

  1. Oczywiście, że jesteśmy chętni do współpracy :)
    sk-spis.blogspot.com

    OdpowiedzUsuń
  2. Nie wiem od czego zacząć. Może tak po prostu od...od tego, że zakochałam się w aktualnym szablonie. Jest minimalistyczny, delikatny i...anime, och, czyli coś, co naprawdę kocham. Ale nie o sam motyw chodzi. Masz świetne wyczucie smaku / stylu. Połączenie kolorów jest świetne! Poprzedni szablon też był super. Bardzo lubię do Ciebie wracać. Cieszę się, że pojawiają się nowe posty. Życzę dużo weny i wytrwałości, bo czasem blogspot potrafi dać w kość.
    Pozdrawiam ! xo
    szablony1kierunkowe

    OdpowiedzUsuń
  3. Oczywiście jesteśmy zainteresowani współpracą. Adres już lada moment pojawi się u nas w odpowiedniej zakładce.
    Pozdrawiam, Shayen / krytyczna-biel

    OdpowiedzUsuń
  4. Jeju, nowy szablon jest obłędny! Taki dopracowany i profesjonalny! <3 Zazdroszczę talentu :) Hmm kody są dość trudne, trzeba sporo dopasowywać do wyglądu, a znając moje niezdecydowanie, zmieniałabym efekty co jakieś 10 sekund :) Ale w sumie można tworzyć tyle ciekawych kombinacji i poćwiczyć css:)

    Jeszcze chciałam skomentować darmowe szablony. Wszystkie są cudne, najbardziej jednak podoba mi się gutsy dwarf :) Czekam na kolejne szabloniki, muszę jakiegoś użyć do pamiętnika i pewnie będzie to jeden z twoich :) Oczywiście cię poinformuję jak już się zdecyduje. Pozdrawiam :*

    OdpowiedzUsuń
  5. Szablon - geniaaaalny! <3 Co do instrukcji, ja dalej tego wszystkiego nie ogarniam, także chyba nie powinnam się wypowiadać w tym temacie, chociaż nie wątpię, że jest bardzo przydatna. :D Wrócę do Twoich instrukcji jak już będę miała wolne i będę próbowała się czegoś nauczyć. ^^

    OdpowiedzUsuń

- +
Szablon wykonany przez Tyler