Проведем небольшой эксперимент с нашей вчерашней рамочкой. Радиус скругления 20 уменьшим до 3, выберем другой цвет фона, например, 030060, добавим бордюр типа dashed белого цвета шириной в 2px, изменим тени. Первая тень 0 0 0 5px #030060 создаст нам четкую сплошную обводку в 5px вокруг элемента, а не мягкую размытую тень. По цвету обводка может отличаться от цвета нашего фона, а может и совпадать. Для простоты сделаем ее совпадающей с цветом фона нашей рамочки. Вторая тень 3px 3px 7px 4px rgba(10,10,0,.5) будет выступать из-за элемента на 3px вправо и на 3px вниз. За счет положительного растяжения в 4px и размытия в 7px она будет равномерно видна (как ореол) сверху и слева от элемента, а снизу и справа ее видимый размер составит около 14px (сумма смещения, размытия и растяжения). Цвет rgba(10,10,0,.5) — это полупрозрачный темно-оливковый (или темно-желто-зеленый) цвет. Шаблон готов. Подставляем нужный цвет, при необходимости меняем цвет бордюра и цвет текста, и рамочка готова.
|
|