Efectul apăsării unui buton

Orice buton trebuie să aibă 3 stări: implicit, cursorul și starea apăsării (activă). Uneori aveți nevoie de o a patra stare - inactivă.







Butoanele care nu pot fi repetate folosind ccs se fac prin sprite. Adesea îmi văd machetele cu un model curbat. Iată sprite:

Este de remarcat faptul că starea clicului este deplasată de mai mulți pixeli de-a lungul axei Y. Același sprite cu ghidajele:

Într-un fel totul bine, aproape toate web designeri, care în primul rând typeset machete mele, clicurile pe butoane ridica starea de mai sus, aliniind marginea de sus, în speranța de a face mai bine, sau pur și simplu repara „bug“ dupa designer. În final, obținem această animație:







Se pare că butonul trage umbra sub el. Cel mai adesea clientul nu-i pasă și nu va observa sau chiar va înțelege diferența, dar este adevărat, atstoy. Nu există nici un efect de apăsare a butonului împreună cu textul din pagina site-ului. Există doar un fel de răsucire, indicând faptul că butonul a funcționat. Nimic mai mult.

Observați în același mod în care o parte din aspectul este îndepărtat din sprite de text în timp ce uita (sau poate pur și simplu prea leneș) capabil să-l faceți clic pentru a comuta pe axa Y. Efectul apăsarea butonului acolo, dar textul este ceva pe teren rămâne. Acesta este un bug:

Vă rugăm să nu aliniați butonul din partea de sus a Y în stare de presare

Lăsați-o așa cum a făcut-o în sprite. Să fie o animație frumoasă a indentării:







Articole similare

Trimiteți-le prietenilor: