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

Адаптивный кроссбраузерный Lightbox CSS

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

Вашему вниманию будет предложена 2 варианта, которые выстроены по аналогичной конструкций, но разве фон у них совершенно по-разному смотрится, хотя оба изображение идут под контент в адаптивной верстке. Как известно, что есть большая подборка одноименных плагинов LightBox, которые как раз создают тот неотразимый эффект наложение, что служит для привлекательности. Где с появлением CSS3 появились отличные решения по работоспособности, но без использования javascript.

Также у вас появляется возможность поместить любой HTML-контент под нужный вам элемент типы контента. Ведь происходит загрузка изображений, что включена для следующей картинки в зависимости от направления движения. Но здесь рассмотрим простой и удобный вариант, который в большинстве пригодится для применение.

Остается только подключить к увеличению изображения, что будет полностью адаптивна для всех мобильных аппаратов. Как можно понять, что здесь присутствует только элемент адаптивности для Lightbox, где можно установить под разные версий.

Адаптивный кросс-браузерный лайтбокс с использованием только HTML + CSS

Первый вариант:

Кроссбраузерная адаптивная верстка html и css

Во-первых нам нужны HTML-оболочки для содержимого, где идет обвод для фона, как прокручиваемая область, где присутствует центрирование по вертикали и центрирование по горизонтали.

HTML

Код

<div class="image-overlap">
  <div class="maintenance">
  <img src="http://zornet.ru/_fr/79/s5220484.jpg" alt="ZorNet.Ru — портал скриптов" />
  <p>Проверьте это в разных размерах, чтобы увидеть, как это работает</p>
  </div>
</div>
<div class="stranitsa desamus outlines">
  <p>Здесь может идет описание или простой набор знаков, который идет как дополнение к дизайну</p>
</div>

CSS

Затем вы добавляете CSS, чтобы размыть фон, где идет класс размытия, что можно добавить и удалить, чтобы вызвать эффект анимации.

Код

.image-overlap {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 5;
  overflow: auto;
  display: flex;
  padding: 2rem;
}

.image-overlap .maintenance {
  max-width: 680px;
  margin: auto;
  padding: 1rem;
  background-color: #fff;
}

.image-overlap .maintenance img {
  width: 100%;
}

.stranitsa {
  padding: 20px;
}

.desamus {
  -webkit-transform: translate3d(0, 0, 0);
  -webkit-filter: blur(0px);
  -moz-filter: blur(0px);
  -o-filter: blur(0px);
  -ms-filter: blur(0px);
  filter: blur(0px);
  -webkit-transition: all ease-out 0.2s;
  -moz-transition: all ease-out 0.2s;
  -o-transition: all ease-out 0.2s;
  -ms-transition: all ease-out 0.2s;
  transition: all ease-out 0.2s;
}

.outlines {
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

Это просто основной пример того, как можно красиво отобразить изображение, которое идет в стильном оформление, где можно увидеть на любом тематическом сайте.

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

Второй вариант:

HTML

Код

<div class="casicuno-sovpada">
  <div class="overleyev-sutren">
  <span class="aplonuse"></span>
  <div class="soderzhaniye">

  <img src="http://zornet.ru/_fr/79/s9551964.jpg" alt="ZorNet.Ru — сайт для вебмастера" />
  <p>Проверьте это в разных размерах, чтобы увидеть, как это работает</p>

  <div>

  </div>

  </div>
<div class="kudsa ademudas kiden">
  <p>Если вы находитесь на рынке для новой работы, вы знаете важность отличного резюме.</p>

CSS

Код

.ademudas {
  -webkit-transform: translate3d(0, 0, 0);
  -webkit-filter: blur(0px);
  -moz-filter: blur(0px);
  -o-filter: blur(0px);
  -ms-filter: blur(0px);
  filter: blur(0px);
  -webkit-transition: all ease-out 0.2s;
  -moz-transition: all ease-out 0.2s;
  -o-transition: all ease-out 0.2s;
  -ms-transition: all ease-out 0.2s;
  transition: all ease-out 0.2s;
}

.kiden {
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

.aplonuse:before {
  content: '✕';
}
.aplonuse {
  position:absolute;
  top: 0;
  right: 0;
  cursor: pointer;
}
.soderzhaniye {
}

Это адаптивный сценарий лайтбокса и диалогового окна, ориентированный на производительность и обеспечивающий наилучшее взаимодействие с пользователем на любом устройстве.

Есть множество отличных плагинов для лайтбоксов, однако многие из них используют jQuery или другие библиотеки. Также еще одним негативным аспектом является то, что они используют JavaScript для изменения размера и других частей, которые действительно не нужны.

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

05 Марта 2020 Загрузок: 1 Просмотров: 1111 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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