xandeadx.ru Блог музицирующего веб-девелопера

CSS → Overlay без дополнительных html элементов

Опубликовано в

Пример вывода оверлея на чистом css:

body.overlay:before {
  content: '';
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, .5);
  z-index: 100;
}

Демо.

Можно добавить прелоадер:

body.preloader:after {
  content: '';
  display: block;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 55px;
  width: 55px;
  margin: auto;
  background: white url(preloader.gif) no-repeat center center;
  border-radius: 6px;
  z-index: 101;
}

Демо.

Другие способы вывести оверлей.

Похожие записи

Оставить комментарий

Содержимое этого поля является приватным и не будет отображаться публично. Если у вас есть аккаунт в Gravatar, привязанный к этому e-mail адресу, то он будет использован для отображения аватара.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Доступные HTML теги: <a> <i> <b> <strong> <code> <ul> <ol> <li> <blockquote> <em> <s>
  • Строки и параграфы переносятся автоматически.
  • Подсветка кода осуществляется с помощью тегов: <code>, <css>, <html>, <ini>, <javascript>, <sql>, <php>. Поддерживаемые стили выделения кода: <foo>, [foo].

Подробнее о форматировании