Как создать вырезанный дизайн границ с помощью CSS
С дизайн бордюра мы можем показать пользователям, что можно найти под границей элемента HTML. Эта задача обычно решается укладка двух или более элементов блока (в большинстве случаев дивы) разных размеров друг на друга Во-первых, это кажется легким решением, но становится все труднее, когда вы хотите многократно использовать макет, перемещаться по элементам, оптимизировать дизайн для мобильных устройств или поддерживать код.
В этом посте я собираюсь показать вам элегантное решение только для CSS, которое использует только один элемент HTML добиться того же эффекта. Эта техника также отлично подходит для доступности, так как загружает фоновое изображение в CSS, отделен от HTML.
К концу этого поста вы узнаете, как отображать фоновое изображение в области границы для того, чтобы создать дизайн бордюра вы можете увидеть ниже. Я также покажу, как вы можете сделать дизайн отзывчивым используя единицы просмотра.
Исходный код
Единственным требованием в области HTML является блочный элемент:
Нам нужно будет повторное использование размеры (ширина и высота) и значения ширины границы ДИВ, поэтому я представляю их как переменные CSS. Переменная --вес обозначает ширина из .центибар блочный элемент, --час указывает на его рост, --б идет на ширина рамки, а также --Би 2 для ширины границы, умноженной на 2. Позже мы увидим использование последней переменной.
Я оцениваю Единица Давайте улучшим код выше, добавив фон и установив границу, высоту и ширину используя наши предопределенные переменные CSS. Вот как демоверсия должна выглядеть прямо сейчас: Нам нужно фоновое изображение для покрыть всю площадь Если вы хотите придать фоновому изображению фиксированный размер, просто убедитесь, что размер, который вы даете, позволяет ему покрыть границу области ширина фонового изображения [ Точно так же высота фонового изображения [ Таким образом, мы установили размер фонового изображения в область, которая равна размеру Замечания: Если вы добавляете отступы к Вот что мы имеем сейчас: Теперь, когда мы покрыли область, включающую границы, фоновым изображением, остается только покрыть центральную область внутри границы (граница исключительной области) со сплошным цветом, для которого мы достигаем Горизонтальная тень со значением В демонстрации Codepen вы могли видеть белую рамку вокруг изображения. Есть знаменитый трюк использование теней для создания нескольких границ-мы можем использовать ту же технику, чтобы добавить одну или несколько сплошных цветных границ к нашему дизайну. Обновленный В моей последней демонстрации Codepen я поместил код для фонового изображения и цвет тени блока в отдельный класс. Это необязательный, но может быть чрезвычайно полезным, если вы хотите повторно использовать макет вырезанной границы дизайна в нескольких элементах и добавьте эстетику (фоновое изображение + цвет) для каждого элемента независимо. Я добавил класс с именем поскольку Чтобы установить значение Так как размеры все в блоке Замечания: Не забудь добавить метатег viewport на свою HTML-страницу, если вы решили оптимизировать ее для мобильного просмотра.оч.сл. блок (вы можете использовать фиксированные единицы, если хотите). .cb --w: 35vw; - ч: 40 кВт; --b: 4vw; --b2: calc (var (- b) * 2);
Быстрое объяснение -
оч.сл. а также В.Х. единицыоч.сл. представляет 1/100го ширины области просмотра. Например, 50vw составляет 50 частей ширины области просмотра нарезанный вертикально на 100 равных частей, в то время как 50vh 50 частей высоты видового экрана нарезанный горизонтально на 100 равных частей. .cb --w: 35vw; - ч: 40 кВт; --b: 4vw; --b2: calc (var (- b) * 2); фон: URL (bg.jpg); граница: var (- b) сплошная прозрачная; высота: вар (- ч); ширина: var (- w);
Размер фонового изображения
фон значение, которое я даю: .cb --w: 35vw; - ч: 40 кВт; --b: 4vw; --b2: calc (var (- b) * 2); background: url (bg.jpg) center / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); граница: var (- b) сплошная прозрачная; высота: вар (- ч); ширина: var (- w);
calc (var (- w) + var (- b2))] является суммой ширина div [вар (- ж)] и ширина левой и правой границ [вар (- b2)].calc (var (- h) + var (- b2))] является суммой высота дивана [вар (- з)] и ширина верхней и нижней границ [вар (- b2)].ДИВ (включая пограничную зону).центр ключевое слово выравнивает фоновое изображение в центр ДИВ.ДИВ, Запомни включить область заполнения на размер фона, так же, как границы области.
Покройте границы эксклюзивной зоны
коробчатого тень вставка. .cb --w: 35vw; - ч: 40 кВт; --b: 4vw; --b2: calc (var (- b) * 2); background: url (bg.jpg) center / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); граница: var (- b) сплошная прозрачная; box-shadow: вставка var (- w) 0 0 rgba (0,120,237, .5); высота: вар (- ч); ширина: var (- w);
вар (- ж) покрывает всю ширину ДИВ. Использование RGBA цветовая функция позволяет некоторая прозрачность чтобы быть добавленным в миксе, однако вы также можете использовать непрозрачный цвет, если вы хотите полностью покрыть центральную область.
Добавьте дополнительную границу с
коробчатого тенькоробчатого тень значение: .cb --w: 35vw; - ч: 40 кВт; --b: 4vw; --b2: calc (var (- b) * 2); background: url (bg.jpg) center / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); граница: var (- b) сплошная прозрачная; box-shadow: вставка var (- w) 0 0 rgba (0,120,237, .5), 0 0 0 calc (var (- b) / 2) белый; высота: вар (- ч); ширина: var (- w);
calc (var (- b) / 2) Функция создает тень от половина ширины границы.
Опционально: отдельное расположение и эстетика
.poster1 к .poster1 --tbgc: rgba (0,120,237, .5); background-image: url ("http://bit.ly/2eQBij2"); фон является сокращенным свойством, его произвольные свойства могут быть переопределены / установлены индивидуально. Следовательно, мы можем установить изображение на заднем плане в .poster1, и удалите значение URL из фон недвижимость в .центибар.коробчатого тень, мы можем использовать другая переменная CSS. --tbgc переменная содержит значение цвета мы хотим дать box-shadow (lightblue в демо), поэтому среди правил стиля для .центибар мы заменить значение цвета коробчатого тень собственность с вар (- tbgc). .cb --w: 35vw; - ч: 40 кВт; --b: 4vw; --b2: calc (var (- b) * 2); background: center / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); граница: var (- b) сплошная прозрачная; box-shadow: вставка var (- w) 0 0 var (- tbgc), 0 0 0 calc (var (- b) / 2) white; высота: вар (- ч); ширина: var (- w);
Код для портретного режима
оч.сл., будет выглядеть слишком маленьким когда вы просматриваете дизайн в портретном режиме (меньшая ширина относительно высоты), на котором все мобильные устройства включены по умолчанию. Чтобы решить эту проблему, переключатель оч.сл. с В.Х., а также изменить размер дизайна как вы считаете подходящим для портретных режимов. @media (ориентация: портрет) .cb --w: 35vh; - ч: 40 вч; - б: 4вч;
