Снипет SCSS — телефон iphone на CSS

Приветствую, друзья! Небольшой урок по SCSS и готовый для подключения в проект файл с кодом ниже.

 

Введение

Современные возможности CSS3 кардинально меняют подход к веб-дизайну. Многие дизайнеры работают с кодом уже больше чем с графическими инструментами. Все графическое что можно сверстать на css делается на css безо всяких картинок.

На этой странице код небольшого сниппета на SCSS , который рисует динамический, масштабируемый адаптивный облик iphone.

 

Задача

Написать библиотечный код (миксин на препроцессор) с помощью которого можно будет создавать на CSS изображение телефона iPhone.
Желаемый API SCSS-миксина:

  • url изображения
  • цвет корпуса
  • цвет элементов

 

Описание

Возьмем какую нибудь модель телефона, сосчитаем визуальные элементы (здесь опустили боковые кнопки), померяем размерности и сверстаем используя flex, абсолютное позиционирование, и процентные единицы чтобы описывать пропорции, т.к. весь блок полностью адаптивный.

Можете редактировать на codepen

See the Pen
iphone SCSS mixin
by Kirill Malahov (@malahov-web)
on CodePen.

 

Применение

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

 

Еще интересное: