» »

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

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

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

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

элементы с изображением и формой | HTML CSS перекрытие

HTML

Код
<picture class="nudesamug" style="--image: url(http://zornet.ru/ZORNET-RU/ZR/Alinuversa/amipsakilad/wire.jpg)">
  <img src="http://zornet.ru/ZORNET-RU/ZR/Alinuversa/amipsakilad/wire.jpg" alt="ZorNet.Ru — сайт для вебмастера">
  <span class="kadekunad"></span>
</picture>

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 для создания этого перекрывающегося эффекта, который любую картинку преобразит.

Демонстрация
2019-12-29 Загрузок: 2 Просмотров: 358 Комментарий: (0)

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

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

Оставь свой отзыв

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