Обрамления устройств для ваших скринов

demosourse

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

Настольный браузер

В данном обрамлении включены стандартные кнопки окна браузера. Url определяется исходя из значения атрибута data-url. В данном примере пропорции изображения: 13:8, но вы можете использовать и другие значения. Пример:

<div class="css-device css-device--browser" data-url="http://ruseller.com">
  <img class="css-device__image" src="img/desktop.svg">
</div>

Планшет

За основу модели планшета взять iPad, за исключением глазка камеры. Соотношение 4:3. Максимальная ширина, помещённого внутри изображения может составлять 360px, но это легко изменить, используя медиа запросы. Пример:

<div class="css-device css-device--tablet">
  <img class="css-device__image" src="img/tablet.svg">
</div>

Смартфон

За основу макета был взять iPhone. Соотношение сторон 16:9. Максимальная ширина 240px. Пример:

<div class="css-device css-device--mobile">
  <img class="css-device__image" src="img/mobile.svg">
</div>

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://callmenick.com/post/css-device-mockups
Перевел: Станислав Протасевич
Урок создан: 20 Апреля 2015
Просмотров: 7454
Правила перепечатки


5 последних уроков рубрики "CSS"

^ Наверх ^