ZorNet.Ru — сайт для вебмастера » HTML и CSS » Изображение с формой перекрытие на CSS

Изображение с формой перекрытие на CSS

Интересное решение для дизайна в создание перекрывающиеся элемента при помощи HTML и CSS, который идет по вверх мы ставим перекрывающие элементы. Что касается наложения контента с использованием CSS, то HTML-страницы считаются двумерными, поскольку текст или изображения, и также другие элементы располагаются на странице без наложения. Но с помощью CSS position и z-index можно создавать эффекты перекрытия.

В этом мануале разберем, как создавать HTML-содержимое с перекрытием CSS, где в основном все изображение квадратного размера или другая квадратная форма с одним штрихом или контуром, а не закрашенным цветом. Теперь контур перекрывает изображение двумя сторонами, другими словами, две стороны контура поверх изображения и две другие стороны позади изображения, где главными здесь являются команды CSS position и z - index.

Так получится после установки:

HTML

Код

CSS

Код

.nudesamug {
  position: relative;
  width: 150px;
  display: block;
}

.nudesamug > img {
  box-shadow: 0 0 20px #bac3c3;
}

.nudesamug > * {
  height: 100%;
  width: 100%;
  display: block;
}

.nudesamug::before,
.nudesamug::after{
  content: "";
  display: block;
  position: absolute;
  background-color: cyan;
  width: 50%;
  height: 50%;
  z-index: 1;
  background-image: var(--image);
  background-size: 200%;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.nudesamug::after {
  bottom: 0;
  right: 0;
  background-position: right bottom;
}

.kadekunad {
  top: 0;
  position: absolute;
  box-sizing: border-box;
  border: 12px #ca1531 solid;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

Это хороший пример того, как мы можем использовать команды CSS для создания удивительных вещей. Кроме того, вы можете использовать это для создания удивительных перекрывающихся элементов для вашего проекта. Где задействовали чистый CSS и HTML для создания этого перекрывающегося эффекта, который любую картинку преобразит.

Демонстрация

29 Декабря 2019 Загрузок: 2 Просмотров: 1303 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 0