Skocz do zawartości

[Poradniki] Interaktywne przyciski


Akaexus

Rekomendowane odpowiedzi

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 li

Hmm.. 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 a

Odpowiada za przyciski, które sobiesiedzą" spokojnie, czyli gdy nic z nimi nie robimy.
 

.ipsVerticalTabbed_tabs li.active a

Ten 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:hover

I 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:hover

a odwrotnie jaśniejszy/ciemniejszy dla tego

.ipsVerticalTabbed_tabs li.active a

Kod 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 a

Dodać 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 nogami

Np. 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óg

Czyli 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

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ę
  • Ostatnio przeglądający   0 użytkowników

    • Brak zarejestrowanych użytkowników przeglądających tę stronę.
×
×
  • Dodaj nową pozycję...