Inset CSS Box Shadow — Готов код
Създайте CSS код за сянка на кутия визуално: плъзгачи за отместване, замъгляване, разпространение, цвят с непрозрачност, режим на вмъкване и до четири слоя с преглед на живо.
Резултат
Тази страница отваря генератора на сянка на кутия с вече отметнато квадратче за вмъкване, така че сянката се рисува вътре в елемента, вместо зад него. Картата за предварителен преглед показва потъналия ефект наведнъж и всеки плъзгач продължава да актуализира CSS линията на живо.
Вмъкнатите сенки са начинът, по който CSS фалшифицира дълбочината навътре: състоянията на натиснат бутон, полетата за търсене и входните гнезда, коритата на лентата за напредъка и гравираните панели разчитат на тях. Тъй като сянката прегръща вътрешния ръб, замъгляването и разпръскването се държат малко по-различно, отколкото при нормална падаща сянка – плъзгачите тук ви позволяват да усетите тази разлика веднага.
Когато хлътналият вид е правилен, копирайте линията на кутията-сянка във вашия лист със стилове. Можете също така да комбинирате вложен слой с обикновени външни слоеве — добавете втори слой и махнете отметката от вмъкнатия върху него, за да смесите и двата в една декларация.