Мокапы современных устройств с использованием чистого CSS

Devices.css позволяет разработчикам легко включать макеты современных устройств непосредственно в свои проекты. Devices.css, разработанная исключительно на CSS, представляет собой отличную библиотеку для демонстрации приложений, веб-страниц, снимков экрана и многого другого. В настоящее время он поддерживает некоторые известные устройства, такие как iPhone X (в основном iPhone 11), MacBook Pro, iPad Pro, Surface Book и т. Д.

Включите Devices.css в свой проект

Чтобы включить Devices.css в свой проект, просто клонируйте репозиторий из GitHub и скопируйте devices.css или devices.min.css (если вы предпочитаете уменьшенную версию) в активы вашего приложения. Затем обязательно включите его в <head> раздел вашего приложения, например <link rel=”stylesheet” href=”mypath/devices.css”>. Теперь вы готовы начать использовать Devices.css!

Начните использовать Devices.css

Теперь, когда он добавлен в ваш проект, все, что вам нужно, это несколько строк HTML, чтобы начать использовать Devices.css. Ниже приведен HTML-код для отображения iPhone X на вашей веб-странице.

<div class="device device-iphone-x">
  <div class="device-frame">
    <img class="device-content" src="assets/screenshot.jpg">
  </div>
  <div class="device-stripe"></div>
  <div class="device-header"></div>
  <div class="device-sensors"></div>
  <div class="device-btns"></div>
  <div class="device-power"></div>
</div>

Откройте файл в браузере, и вы увидите, что создали свой первый макет iPhone X, используя только HTML и CSS!

Возможность настройки

Обратите внимание, что в самом внешнем div вы можете указать другое устройство, изменив имя класса с device-iphone-x на любое другое устройство (проверьте поддерживаемые устройства на их GitHub), следуя формату device-[name-of-device]. Внутренние блоки также можно не использовать, если вы хотите лишить устройство кнопок, динамиков, фронтальной камеры и т. Д.

Библиотека поддерживает как изображения, так и видео внутри device-frame div. Просто измените <img class="device-content" src="assets/screenshot.jpg"> на следующее, и вы получите нечто вроде эмулированного устройства.

<video class="device-content" muted="muted">
  <source src="video.mp4" type=”video/mp4"/>
</video>

Хотя это не упоминается на странице GitHub, вы также можете встроить iframe внутрь устройства. Просто поместите следующий HTML-код внутрь device-frame.

<div class="device-content">
  <iframe src="https://medium.com/@giuseppecampanelli"/>
</div>

Поддержка новых устройств

Есть упоминание о добавлении новых устройств, однако оно, похоже, устарело, поэтому не стесняйтесь нажимать +1 и комментировать проблему, которую я поднял, чтобы добавить новые устройства.

Не стесняйтесь проверить демонстрацию, которую я создал с помощью Vue.