.action:active { transform: translateY(1px); }Deplasarea de un pixel oferă un răspuns scurt la apăsare.
LECȚIA 82 DIN 100
Confirmă apăsarea cu :active
Deplasează discret butonul cât timp este activat.
PASUL 1 · ÎNVAȚĂ
Cum funcționează
:active corespunde stării în care elementul este activat, de obicei între apăsarea și eliberarea dispozitivului de intrare. Transformarea vizuală nu schimbă ordinea documentului.
.action { transform: translateY(1px); }Transformarea permanentă nu mai comunică momentul activării.
PASUL 2 · APLICĂ
Exercițiul tău
Aplică transform: translateY(1px) numai selectorului .action:active.
index.htmlCSS
Rezultat sigurizolat
Ciorna se păstrează doar în acest browser.HTML și CSS permise · scripturile și rețeaua sunt blocate
PASUL 4 · VERIFICĂ
Ce trebuie să treacă
0%neverificat
- ○Starea active deplasează butonul cu 1px.
- ○Elementul țintă este prezent în pagină.
Explică-mi logica rezolvării
Pseudo-clasa limitează transformarea la starea activă, fără JavaScript și fără mutarea structurii.