Akaexus Opublikowano 7 Sierpnia 2015 Zgłoś Udostępnij Opublikowano 7 Sierpnia 2015 Siema! Dużo osób prosiło mnie o pokazanie jak zrobićmoje" przyciski, chodźi tu o kształt oraz ich interakcja na kursor.A więc:Myślę, żee wiecie już, że za te przyciski, odpowiadają 4 kody tzn. .ipsVerticalTabbed_tabs li .ipsVerticalTabbed_tabs li a .ipsVerticalTabbed_tabs li.active a .ipsVerticalTabbed_tabs li a:hover Ale co wam to daje? No w sumie tylko może rozjaśnić u niektórych... .ipsVerticalTabbed_tabs liHmm.. Odpowiada za tło pod przyciskami, gdy najedziecie kursorem na któryś z moich przycisków, widzicie, że zostaje pod nim to pole (mi się to akurat podoba, bo daje to efektwyskoczenia" tego przycisku ze swojego miejsca) .ipsVerticalTabbed_tabs li aOdpowiada za przyciski, które sobiesiedzą" spokojnie, czyli gdy nic z nimi nie robimy. .ipsVerticalTabbed_tabs li.active aTen natomiast, to kod odpowiedzialny za przycisk na którym obecnie jesteśmy (?), czyli, gdy mamy otwartą zakładkęSA:MP" to właśnie za pomocą tego kodu, możemy zrobić, by ten przycisk był charakterystyczny. .ipsVerticalTabbed_tabs li a:hoverI ostatni, czyli coś do czego w sumie dą????ymy. Odpowiada za przycisk na który najedziemy kursorem, u mnie wygląda to tak, że on się obraca, przyciemnia, oraz rośnie.Więc gdy chcemy by po najechaniu kursorem nasz przycisk się przyciemnił stopniowo musimy mieć ciemniejszy/jaśniejszy odcień koloru dla kodu .ipsVerticalTabbed_tabs li a:hovera odwrotnie jaśniejszy/ciemniejszy dla tego .ipsVerticalTabbed_tabs li.active aKod taki: transition: all (X)s cubic-bezier((Y)) (Z)(X) to czas trwania całej akcji przyciemniania, powiększania, obrotu itd. itp.(Y) to hmm,gimnastyka" naszego przycisku, czyli, że np. z początku będzie on szybciej wykonywał daną akcję a zakończy to wolniej (oczywiście zmieści się w podanym przez nas czasie (X)) Możecie pobawić się tym symulatorem: http://cubic-bezier.com/(Z) to opóżnienie po którym nasz przycisk wykona tą akcjęTen kod zaś: transform: scale((X))(X) to skala powiększenia np. 1 to 100%, 1.5 to 150%, czy też 0.5 to 50% itd.A więc, by akcja naszego przycisku nastąpiła w czasie 0.5 sekundy, powiększył się do 150%, wykonał akcję z początku szybciej a potem wolniej, oraz by akcja została wywołana tu???? po najechaniu na niego kursorem należy: transition: all 0.5s cubic-bezier(0, 0, 0.3, 1) 0; transform: scale(1.5); No dobra... Działa on tak, gdy na niego najedziemy, a gdy wraca, to od razu do poprzedniego stanu.. Ale my chcemy, by wracał on tak samo stopniowo...Więc należy do tego kodu .ipsVerticalTabbed_tabs li.active aDodać już tylko akcję z przedstawieniem, jak długo ma trwać ta akcja, i z tymcubic'iem" transition: all 0.5s cubic-bezier(0, 0, 0.3, 1) 0;By był ten kod poprawnie wyświetlany na większości przeglądarek należy utworzyć 4x takie wartości-moz--o--webkit-Czyli po prostu transition: all 0.5s cubic-bezier(0, 0, 0.3, 1) 0; -o-transition: all 0.5s cubic-bezier(0, 0, 0.3, 1) 0; -moz-transition: all 0.5s cubic-bezier(0, 0, 0.3, 1) 0; -webkit-transition: all 0.5s cubic-bezier(0, 0, 0.3, 1) 0; Oraz transform: scale(1.5); -o-transform: scale(1.5); -moz-transform: scale(1.5); -webkit-transform: scale(1.5); Oraz by oprócz skali, był też obrót, należy dodać, lub zamienić do skali rotate((x)deg)(x) to wartość w stopniach, do 180 do góry nogami oraz do -180 również do góry nogamiNp. 30stopni to rotate(30deg)lub rotate(-30deg)A gdy dodajemy to, oddzielamy spacją transform: scale(1.5) rotate(-30deg);Za zaokrąglenia naszych przycisków odpowiedzialny jest kod: border-radius: (x)px;Gdzie (x) to wartość naszego zaokrąglenia w pixelach.Tak, tak, ale to zaokrągla wszystkie boki tak samo! A co zrobić, by przypisać dla każdego boku inną wartość?!Eh, należy wtedy rozwinąć ten kod do 4 wartości więc.. border-radius: (a)px (b)px (c)px (d)px;(a) odpowiada za lewy górny róg(b ) odpowiada za prawy górny róg(c ) odpowiada za prawy dolny róg(d) odpowiada za lewy dolny rógCzyli chcemy by był to przycisk z górą zaokrągloną, a dołem prostokątnym border-radius: 15px 15px 0 0;I już!Więc gdy chcemy zastosować to, by działało poprawnie, użyjemy np. takiego kodu: .ipsVerticalTabbed_tabs li { border-radius: 15px 15px 0 0; background: rgba(0, 0, 0, 0.3); } .ipsVerticalTabbed_tabs li a { background: rgba(0, 0, 0, 0.3); border-radius: 15px 15px 0 0; transition: all 0.5s cubic-bezier(0, 0, 0.3, 1) 0; -o-transition: all 0.5s cubic-bezier(0, 0, 0.3, 1) 0; -moz-transition: all 0.5s cubic-bezier(0, 0, 0.3, 1) 0; -webkit-transition: all 0.5s cubic-bezier(0, 0, 0.3, 1) 0; } .ipsVerticalTabbed_tabs li.active a { background: rgba(0, 0, 0, 0.6); border-radius: 15px 15px 0 0; } .ipsVerticalTabbed_tabs li a:hover { border-radius: 15px 15px 0 0; background: rgba(0, 0, 0, 1); transform: scale(1.5); -o-transform: scale(1.5); -moz-transform: scale(1.5); -webkit-transform: scale(1.5); transition: all 0.5s cubic-bezier(0, 0, 0.3, 1) 0; -o-transition: all 0.5s cubic-bezier(0, 0, 0.3, 1) 0; -moz-transition: all 0.5s cubic-bezier(0, 0, 0.3, 1) 0; -webkit-transition: all 0.5s cubic-bezier(0, 0, 0.3, 1) 0; } Oczywiście nie są to gotowe przyciski, lecz demonstracja //By Crason.Post autorstwa skopiowany ze starego forum. Odnośnik do komentarza
Rekomendowane odpowiedzi
Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto
Jedynie zarejestrowani użytkownicy mogą komentować zawartość tej strony.
Zarejestruj nowe konto
Załóż nowe konto. To bardzo proste!
Zarejestruj sięZaloguj się
Posiadasz już konto? Zaloguj się poniżej.
Zaloguj się