Inset CSS Box Shadow — gatavs kods
Veidojiet CSS lodziņa ēnu kodu vizuāli: slīdņi nobīdei, aizmiglošanai, izkliedēšanai, krāsai ar necaurredzamību, ielaiduma režīmu un līdz četriem slāņiem ar reāllaika priekšskatījumu.
Rezultāts
Šajā lapā tiek atvērts lodziņu ēnu ģenerators, kurā jau ir atzīmēta izvēles rūtiņa, tādējādi ēna tiek zīmēta elementa iekšpusē, nevis aiz tā. Priekšskatījuma kartīte uzreiz parāda nogrimušo efektu, un katrs slīdnis turpina atjaunināt CSS līniju.
Ieliktās ēnas ir veids, kā CSS viltojuma dziļums virzās uz iekšu: nospiesto pogu stāvokļi, meklēšanas lauki un ievades akas, norises joslas iedobes un iegravēti paneļi — tas viss ir atkarīgs no tiem. Tā kā ēna apskauj iekšējo malu, izplūst un izplatās nedaudz savādāk nekā parastā ēnā — šeit esošie slīdņi ļauj uzreiz sajust šo atšķirību.
Kad nogrimušais izskats ir pareizs, iekopējiet lodziņa ēnu līniju savā stila lapā. Varat arī apvienot ieliktņa slāni ar parastajiem ārējiem slāņiem — pievienojiet otru slāni un noņemiet atzīmi no ieliktņa, lai abus sajauktu vienā deklarācijā.