# 123: Ako se pomakne kad kliknete, napravite nešto zalijepljeno - CSS-trikovi

Anonim

Gumbi na CSS-trikovima, u vrijeme ovog videozapisa, imaju umjetni 3D efekt. Izgledaju poput plave cigle koju gledate odozgo pod kutom. Kad ih pritisnete, aktivira se njihovo: aktivno stanje (poput svih veza / gumba / ulaza) i CSS ih pomiče prema dolje i udesno, izgleda kao da ciglu doslovno pomalo pritiskate na površinu.

U čemu je problem? Kada premjestite takav element (u ovom slučaju transformirajte translate(3px, 3px);:), mijenjate područje u kojem će taj pritisak pokrenuti DOM događaj "klik". Ako se slučajno nalazi mjesto tog tiska u području koje je sada izvan tog područja na koje je moguće kliknuti, to se neće aktivirati. Dakle, tipka izgleda pritisnuta, ali zapravo nikada nije pritisnuta. To je čudno i loše i neočekivano ponašanje.

Učinak je ipak cool, pa ga u ovom videozapisu popravljamo pomicanjem pseudo elementa kako bismo popunili preostali prostor, čineći područje na koje je moguće kliknuti uvijek isto.

Pogledajte demo olovku.