Skocz do zawartości


Zdjęcie

[Poradniki] Interaktywne przyciski


Brak odpowiedzi do tego tematu

#1 Akaexus

Akaexus

  • Gracz
  • 562 postów
  • Nick SA-MP:Krzysztof Golder

Napisano 07 sierpień 2015 - 13:29

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 Jake Nicholas skopiowany ze starego forum.






Użytkownicy przeglądający ten temat: 0

0 użytkowników, 0 gości, 0 anonimowych