Inset CSS Box Shadow — Kész kód
Készítsen CSS-doboz-árnyékkódot vizuálisan: csúszkák az eltoláshoz, elmosódáshoz, szóráshoz, színezéshez, átlátszósághoz, beillesztési módhoz és akár négy réteghez élő előnézettel.
Eredmény
Ez az oldal megnyitja a doboz-árnyékgenerátort a beillesztési jelölőnégyzet bejelölésével, így az árnyék az elem belsejébe, nem pedig mögé rajzolódik. Az előnézeti kártya egyszerre mutatja az elsüllyedt hatást, és minden csúszka folyamatosan frissíti a CSS-sort élőben.
A beépített árnyékok az, ahogyan a CSS befelé hamisítja a mélységet: a megnyomott gombállapotok, a keresőmezők és a beviteli lyukak, a folyamatjelző sávok és a gravírozott panelek mind rájuk támaszkodnak. Mivel az árnyék átöleli a belső szélét, az elmosódás és a szétterítés kissé másképp viselkedik, mint egy normál vetett árnyéknál – az itt található csúszkák segítségével azonnal érezhető a különbség.
Ha az elsüllyedt megjelenés megfelelő, másolja be a doboz-árnyék vonalat a stíluslapjába. Kombinálhat egy beillesztett réteget normál külső rétegekkel is – adjon hozzá egy második réteget, és törölje a beillesztés jelölését, hogy a kettőt egy deklarációban keverje össze.