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

Плоский стиль окна браузера на HTML и CSS

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

Для этого нужно обернуть это содержимое с помощью div, так как этот div даст нам цвет фона и некоторое дополнение для создания рамки. Потом в следствие наложить границу 2px на дно, чтобы дать некоторую глубину. Он также обертывает контент, если он в основном белый, но здесь сам веб мастер может выбрать свой оттенок. Что не исключаю, такой дизайн можно задействовать на полной странице, будет оригинально смотреться, чем все по-стандартному. Добавление высоты строки в 0 предотвратит любое расстояние вокруг изображения. Затем, чтобы завершить все это, добавьте радиус границы, чтобы смягчить края.

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

Для чего можно такой дизайн использовать?

Всегда очень здорово и оригинально смотрится, когда это будет выглядеть правильно. Это предотвращает загрузку любых дополнительных активов и может быть кэшировано. Мы использовали аналогичную технику для Macbook в верхней части нашей домашней страницы и всех устройств нашего предварительного просмотра. Просмотрим Demo страницу, где можно сразу понять, что ми в каком случай можно преподнести как материал, применив такой стиль виденья.

Так смотрится при проверки на работоспособность.

Окно интернет-браузера с поисковой системой сайта

Приступаем к установки:

HTML

Код

<div class="weeklydec-onstruction">
  <div class="weeklydec-onstruction-bar">
  <div class="ladorunida">
  <span class="kidersda-1"></span>
  <span class="kidersda-2"></span>
  <span class="kidersda-3"></span>
  </div>
  <div class="hamburger-menu">
  <span></span>
  <span></span>
  <span></span>
  </div>
  <div class="dlpotesa-btezin">
  <div class="repeat">
  <span class="glyphicon glyphicon-repeat"></span>
  </div>
  <div class="deconsa-truction">
  http://zornet.ru/
  </div>
  </div>
  </div>

  <div class="weeklydec-onstruction-container">

  <br><br><div align="center"><img border="0" align="absmiddle" src="http://zornet.ru/Aben/JdPP3A0SR5eBIkFnVcMsEg.png"></div><br><br><br>

  <span style="color:blue"><span style="font-family:'Arial'"><span style="font-size:12pt"><div align="center"><b>ZorNet.Ru - портал вебмастера</b></div></span></span></span>


  </div>
</div>

CSS

Код

.weeklydec-onstruction {
  color: black;
}

.weeklydec-onstruction-bar {
  padding: 10px 8px 6px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border-bottom: 2px solid #b5a5a5;
  background: #dedada;
  overflow: hidden;
  width: 39%;
}

.weeklydec-onstruction-bar div {
  height: 22px;
}

.weeklydec-onstruction-bar .ladorunida {
  float: left;
  padding-top: 14px;
  margin-right: 10px;
}

  .weeklydec-onstruction-bar .ladorunida span {
  height: 10px;
  width: 10px;
  background-color: #ccc;
  border-radius: 10px;
  border: 1px solid #dadada;
  float: left;
  margin: 0 0 0 4px;
  }

  .weeklydec-onstruction-bar .ladorunida .kidersda-1 {
  background-color: #ea321e;
  }

  .weeklydec-onstruction-bar .ladorunida .kidersda-2 {
  background-color: #fdda0d;
  }

  .weeklydec-onstruction-bar .ladorunida .kidersda-3 {
  background-color: #12b112;
  }

.weeklydec-onstruction-bar .dlpotesa-btezin {
  background-color: white;
  color: #504b4b;
  border-radius: 3px;
  border-width: 1px;
  border-style: solid;
  border-color: #d7d3d3;
  padding: 5px 9px 12px;
  font-size: 17px;
  overflow: hidden;
}

Inherited from div.weeklydec-onstruction
index.html:5
.weeklydec-onstruction {
  color: black;
}
  .weeklydec-onstruction-bar .dlpotesa-btezin:hover {
  cursor: default;
  }

  .weeklydec-onstruction-bar .dlpotesa-btezin .repeat {
  display: inline-block;
  margin-right: 5px;
  font-size: 9px;
  }

  .weeklydec-onstruction-bar .dlpotesa-btezin .deconsa-truction {
  display: inline-block;
  }

  .weeklydec-onstruction-bar .hamburger-menu {
  float: right;
  width: 38px;
  padding: 12px 7px 0px 15px;
}

  .weeklydec-onstruction-bar .hamburger-menu span {
  display: block;
  height: 3px;
  width: 100%;
  background: #b6b5b5;
  border-radius: 3px;
  opacity: 1;
  left: 0;
  margin-bottom: 3px;
  }

.weeklydec-onstruction-container {
  background-color: #cacaca;
  width: 40%;
  height: 243px;
  border-left: 1px solid #a29f9f;
  border-right: 1px solid #969292;
  border-bottom: 1px solid #8a8383;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

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

А ссылка сама сделана для большего понимание, что вы будете устанавливать или как все потом будет выглядеть, да и место не пустует.

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

11 Августа 2018 Просмотров: 1070 Комментариев: (0)

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

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

Kosten

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