czwartek, 2 maja 2013

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!

12 komentarzy:

  1. Znowu nowy szablon jak widzę? :D Wszystkie wychodzą ci świetne, ten jest taki jasny, przejrzysty i czytelny. I te stópki <3 Hah. Wiesz, tak sobie pomyślałam, że założę bloga, na którym poćwiczę te wszystkie efekty, bo dodałaś już sporo instrukcji i czas wziąć się do roboty :) Zauważyłam, że chyba lubisz róż, hę? :D Pozdrawiam :)

    OdpowiedzUsuń
  2. Fajny ten nowy główny, jak zwykle czyściutki i przejrzysty :D
    Bardzo przydała mi się twoja instrukcja na "zakręcone karty". Możesz wpaść do mnie na bloga i zobaczyć mój efekt. Bardzo ci dziękuję, bo świetnie się to prezentuje, zwłaszcza po dodaniu "transition" :D Jesteś wielka !
    Pozdrawiam ^^

    OdpowiedzUsuń
  3. OMG, jakim cudem dopiero teraz znalazłam Twojego bloga?! XD jest absolutnie genialny, a ponieważ ostatnio cierpiałam na małą stagnację w zakresie efektów CSS, dzięki Tobie odzyskałam chęć zabawy tym wszystkim ;> Twoje instrukcje są genialne, oczywiście już je wykorzystałam, choć muszę przyznać, że akurat "zakręcanie" kart, czy to w bok, czy w górę, jest trochę uciążliwe, bo źle się potem na nie klika. Jeszcze wszystkiego nie ogarniam (box-shadow mi z jakichś przyczyn nie wychodzi do końca i nie mam pojęcia, dlaczego), ale ponieważ z natury jestem uparta jak osioł, zapewne będę nad tym siedzieć, dopóki wszystkiego nie rozgryzę. Także pozwolisz, że się u Ciebie rozgoszczę;) a button u siebie wkleiłam, bo na pewno coś z Twoich instrukcji pojawi się w moich szablonach:)

    Raz jeszcze dzięki:) całuję!

    OdpowiedzUsuń
  4. A mnie strasznie nurtuje jak zrobiłaś te pseudolinki, po których kliknięciu pojawia się informacja o tobie/zamówieniach itd. Gdybyś mogła zrobić o tym instrukcję, to byłabym strasznie wdzięczna.

    OdpowiedzUsuń
  5. Jak tylko nikt inny nie złoży innej propozycji( w ilościach większych niż 1 ) z miłą chęcią wyjaśnię. Przyznam szczerze, że człowiek szukał tego przez parę dobrych dni i różne instrukcje poznajdywał; niektóre nie działały, inne w ogóle cuda robiły na blogu, aż się w końcu udało. ;)

    OdpowiedzUsuń
  6. Tak szukałam instrukcji na dropmenu, które widnieje na wiosce, ale wreszcie się udało :D
    Mnie udało się zrobić coś podobnego w stylu tego, co masz na blogu, ale przy pomocy :hover (bez klikania), ale mnie to nie satysfakcjonowało.

    OdpowiedzUsuń
  7. Oczywiście w poście się to kiedyś na pewno pojawi, ale jak chciałabyś szybciej czy na własną rękę szukaj czegoś w rodzaju "Accordion headings"; tylko jest tego naprawdę cała masa i niektóre mogą nie działać ( albo ja jestem tak udana i nie umiem tego zrobić ). Ja zaraz poszukam u siebie w zakładkach czy gdzieś tego nie mam, to może Ci podrzucę :>

    OdpowiedzUsuń
  8. Byłabym bardzo wdzięczna, gdybyś znalazła te działające źródła (:

    OdpowiedzUsuń
  9. Przepraszam, że wczoraj tego nie podrzuciłam, ale nie dostałam się już na komputer. ;p Też nie wiedziałam za bardzo gdzie Ci odpisać, bo tak tutaj to nie wiem ;) Może zaglądasz :> http://tympanus.net/codrops/2012/02/21/accordion-with-css3/ - z tego korzystałam, wszystko ładnie opisane, więc nie sądzę, żebyś miała jakikolwiek problem.

    OdpowiedzUsuń
  10. Dziękuję serdecznie :*

    OdpowiedzUsuń
  11. Jejku, Twój blog zawsze zaskoczy mnie czymś miły. Bardzo lubię motyw desek, a ten w Twoim tle jest super ! Co do porad, skorzystam z nich na pewno ! Tylko po maturkach, po maturkach...po maturze zrobię wszystko ! Pozdrawiam ♥

    OdpowiedzUsuń

- +
Szablon wykonany przez Tyler