Как создать вырезанный дизайн границ с помощью CSS
С вырезанным дизайном границ мы можем показать пользователям, что находится под областью границ HTML-элемента. Эта задача обычно решается путем размещения двух или более блочных элементов (в большинстве случаев div) разных размеров друг над другом. Во-первых, это кажется легким решением, но становится все более неприятным, когда вы хотите многократно использовать макет, перемещаться по элементам, оптимизировать дизайн для мобильных устройств или поддерживать код.
В этом посте я покажу вам элегантное решение только для CSS, в котором для достижения того же эффекта используется только один элемент HTML. Этот метод также отлично подходит для доступности, так как он загружает фоновое изображение в CSS, отдельно от HTML.
К концу этого поста вы узнаете, как отобразить фоновое изображение в области границ, чтобы создать вырезанный дизайн границы, который вы можете увидеть ниже. Я также покажу, как вы можете сделать дизайн адаптивным, используя единицы просмотра.
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)
Читайте также: Как создать CSS градиентные цвета границ
Увидеть перо CSS Cutout Border HONGKIAT (@hkdc) на CodePen,
Исходный код
Единственное требование в передней части HTML — это блочный элемент:
Нам нужно будет повторно использовать размеры (ширину и высоту) и значения ширины границы элемента div, поэтому я представлю их как переменные CSS. Переменная —w обозначает ширину блочного элемента .cb, —h обозначает его высоту, —b обозначает ширину границы, а —b2 обозначает ширину границы, умноженную на 2. Позже мы увидим использование последней переменной.
Я оцениваю
<
div> относительно ширины области просмотра, отсюда и использование модуля vw (вы можете использовать фиксированные единицы, если хотите).
.cb {
— ш: 35 ватт;
— ч: 40 кВт;
—b: 4vw;
—b2: calc (var (- b) * 2);
}
Краткое объяснение — VW и VH единиц
Единица vw представляет 1/100 ширины области просмотра. Например, 50vw — это 50 частей ширины области просмотра, разрезанных по вертикали на 100 равных частей, в то время как 50vh — это 50 частей высоты области просмотра, разрезанных по горизонтали на 100 равных частей.
Давайте улучшим приведенный выше код, добавив фон и установив границу, высоту и ширину, используя наши предопределенные переменные CSS.
.cb {
— ш: 35 ватт;
— ч: 40 кВт;
—b: 4vw;
—b2: calc (var (- b) * 2);
фон: URL (bg.jpg);
граница: var (- b) сплошная прозрачная;
высота: вар (- ч);
ширина: var (- w);
}
Вот как демоверсия должна выглядеть прямо сейчас:
Размер фонового изображения
Нам нужно фоновое изображение, чтобы покрыть всю область
<
div> включая область границы, поэтому фоновое изображение должно иметь соответствующий размер.
Если вы хотите придать фоновому изображению фиксированный размер, просто убедитесь, что размер, который вы даете, позволяет ему покрыть область границ
<
div> также. Что касается кода, использованного до сих пор, вот фоновое значение, которое я ему даю:
.cb {
— ш: 35 ватт;
— ч: 40 кВт;
—b: 4vw;
—b2: calc (var (- b) * 2);
фон: url (bg.jpg) center / calc (var (- w) + var (- b2))
calc (var (- h) + var (- b2));
граница: var (- b) сплошная прозрачная;
высота: вар (- ч);
ширина: var (- w);
}
Ширина фонового изображения [calc(var(—w) + var(—b2))] это сумма ширины div [var(—w)] и ширина левой и правой границ [var(—b2)],
Аналогично высота фонового изображения [calc(var(—h) + var(—b2))] сумма высоты деления [var(—h)] и ширина верхней и нижней границ [var(—b2)],
Таким образом, мы изменили размер фонового изображения до области, которая равна размеру div (включая область границы).
Ключевое слово center выравнивает фоновое изображение по центру div.
Примечание. Если вы добавляете отступ в элемент div, не забудьте также включить область отступа в размер фона, также как и область границы.
Вот что мы имеем сейчас:
Покройте границы эксклюзивной области
Теперь, когда мы покрыли область, включающую границы, фоновым изображением, все, что осталось, — это покрыть центральную область внутри границы (область, исключающую границы) сплошным цветом, для которого мы достигаем вставки в виде рамки. ,
.cb {
— ш: 35 ватт;
— ч: 40 кВт;
—b: 4vw;
—b2: calc (var (- b) * 2);
фон: 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);
}
Горизонтальная тень со значением var (- w) покрывает всю ширину div. Использование функции цвета rgba позволяет добавить некоторую прозрачность в микс, однако вы также можете использовать непрозрачный цвет, если вы хотите полностью покрыть центральную область.
Добавьте дополнительную рамку с box-shadow
В демонстрации Codepen вы могли видеть белую рамку вокруг изображения. Существует известный трюк с использованием box-shadows для создания нескольких границ — мы можем использовать ту же технику, чтобы добавить одну или несколько сплошных цветных границ в наш дизайн.
Обновленное значение box-shadow:
.cb {
— ш: 35 ватт;
— ч: 40 кВт;
—b: 4vw;
—b2: calc (var (- b) * 2);
фон: 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) создает тень от половины ширины границы.
Дополнительно: отдельное расположение и эстетика
В моей последней демонстрации Codepen я поместил код для фонового изображения и цвет тени блока в отдельный класс. Это необязательно, но может быть чрезвычайно полезно, если вы хотите повторно использовать макет контура с вырезом в нескольких элементах и добавлять эстетику (фоновое изображение + цвет) для каждого элемента независимо.
Я добавил класс с именем .poster1 к
<
div> для достижения этой цели.
.poster1 {
—tbgc: rgba (0,120,237, .5);
background-image: url («http://bit.ly/2eQBij2»);
}
Поскольку фон является сокращенным свойством, его дополнительные свойства могут быть переопределены / установлены индивидуально. Следовательно, мы можем установить background-image в .poster1 и удалить значение url из свойства background в .cb.
Чтобы установить значение box-shadow, мы можем использовать другую переменную CSS. Переменная —tbgc содержит значение цвета, которое мы хотим дать box-shadow (lightblue в демоверсии), поэтому среди правил стиля для .cb мы заменяем значение цвета свойства box-shadow на var (- tbgc ).
.cb {
— ш: 35 ватт;
— ч: 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) белый;
высота: вар (- ч);
ширина: var (- w);
}
Код для портретного режима
Поскольку все размеры указаны в единицах vw, он будет выглядеть слишком маленьким, когда вы просматриваете дизайн в портретном режиме (меньшая ширина относительно высоты) — на котором все мобильные устройства включены по умолчанию. Чтобы решить эту проблему, переключите vw с помощью vh и измените размер дизайна, как вы считаете нужным для портретных режимов.
@media (ориентация: портрет) {
.cb {
— Вт: 35 кВт;
— ч: 40 вч;
— б: 4вч;
}
}
Примечание. Не забудьте добавить метатег viewport на свою HTML-страницу, если вы решили оптимизировать его для мобильного просмотра.
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)