• Авторизация
Дневник Нина_Зобкова Лента друзей - Дневник - Полная версия


Изучаем тени 18-05-2026 16:03 к комментариям - к полной версии - понравилось!

Это цитата сообщения tomishka Оригинальное сообщение

Изучаем тени

Одна из самых простых рамочек, в которой фон задан через код цвета (008b8b) и есть три вертикальные тени: две внутри, одна снаружи. Тени заданы при помощи свойства box-shadow, внутренние те, где присутствует inset. Запись inset 0px -3px 3px rgba(0,0,0,0.6) создает внутреннюю мягкую тень черного цвета, которая находится строго у нижнего края блока (как бы над его границей), создавая эффект объема. Если вместо -3 взять, например, -9, то тень будет шире, но рамочка будет выглядеть хуже. Хотя, кому как нравится. Тень inset 0px 3px 3px rgba(252,255,255,0.7) будет внутренней, мягкой и светлой, создающей эффект легкого блика или объема внутри элемента. Она располагается только у верхнего края блока, плавно переходя вниз, и не выходит за его пределы по бокам. И, наконец, последняя тень 0px 7px 12px -2px rgba(0,0,0,0.8). Эта запись описывает классическую тень, которая используется для придания объема и глубины. Тень будет падать ровно вниз и слегка сжиматься по краям. Вот подробный разбор параметров в соответствии с синтаксисом CSS box-shadow: 0px — смещение по горизонтали (ось X). Тень не сдвинута ни влево, ни вправо. Расположена строго по центру элемента. 7px — смещение по вертикали (ось Y). Тень сдвинута на 7 пикселей вниз от нижнего края элемента.12px — радиус размытия. Край тени будет мягким, размытым на 12px. -2px — радиус растяжения. Отрицательное значение сжимает тень, делая ее немного меньше самого элемента. rgba(0,0,0,0.8) — цвет тени. Черный цвет с прозрачностью 80% (визуально смотрится как плотная, насыщенная, но не на 100% глухая тень).
Здесь будет ваш текст




Ниже я привела 20 различных цветов для ваших рамочек. Выбираете любой цвет и в коде рамочки заменяете аккуратно 008b8b на выбранный цвет, а все остальное оставляете без изменений. Если есть желание, можете заменить цвет текста или любую тень. А можете зайти по ссылке https://gradients.app/ru/color и выбрать любой другой цвет для своей рамочки.


вверх^ к полной версии понравилось! в evernote


Вы сейчас не можете прокомментировать это сообщение.

Дневник Изучаем тени | Нина_Зобкова - Дневник Нина_Зобкова | Лента друзей Нина_Зобкова / Полная версия Добавить в друзья Страницы: раньше»