A videó készítésekor a CSS-Tricks gombjainak faux 3D hatása van. Úgy néznek ki, mint egy kék tégla, amelyet felülről néz szögben. Amikor lenyomja őket, aktiválódik: aktív állapotuk (mint minden link / gomb / bemenet), és a CSS lefelé és jobbra mozgatja őket, úgy tűnik, mintha szó szerint kissé lenyomná a téglát a felületbe.
Mi a baj? Amikor egy ilyen elemet áthelyez (ebben az esetben átalakítsa translate(3px, 3px);
:), akkor megváltoztatja azt a területet, amelyen az adott megnyomás elindítja a „click” DOM eseményt. Ha az adott sajtó helye véletlenül egy olyan területen van, amely meghaladja ezt a „kattintható” területet, akkor az nem vált ki. Tehát a gomb lenyomva látszik, de valójában soha nem lesz lenyomva. Ez furcsa, rossz és váratlan viselkedés.
A hatás azonban még mindig jó, ezért ebben a videóban egy álelem mozgatásával javítjuk azt, hogy kitöltsük a hátrahagyott helyet, így a „kattintható” terület mindig ugyanaz lesz.
Nézze meg a bemutató tollat.