Box-shadows Device
 

Всем привет!
Хочу представить вам свою маленькую разработку. Не думаю, что у нее найдется много почитателей, но, надеюсь, кому-нибудь пригодится.
Жду ваших мнений и комментариев. Возможно, у кого-то будут пожелания или рекомендации. Учту любые мнения.


Box-shadows Device (BSD) - это инструмент, который позволяет создавать простые, но красивые устройства для вашего сайта. Инструмент чем-то напоминает конструктор или редактор.

Возможности:
Структура устройство достаточно проста. При входе на сайт, перед вами появляется маленький дисплей, вокруг которого и будут разворачиваться действия. Вы можете добавить панель одного из доступных устройств. Отредактировать цвет панели, добавлять различные кнопки интерфейса и комбинировать их по своему желанию, просто переключая кнопки. Так же имеется возможность придать устройству позиционирование и объем, при помощи css теней. На данный момент доступно всего 4 типа тени+без, но этого пока достаточно. В дальнейшем планируется функция создания собственных теней с параметром inset.

После завершения создания устройства вы можете нажать кнопку "Get code" и вам будет доступен код, который вы легко можете скопировать, нажав соответствующую кнопку. После этого, скопированный код можно ставить в любое место и использовать по своему усмотрению.

Для чего это нужно?
Вы можете использовать созданные устройства, чтобы продемонстрировать свой код, шаблоны, рисунки, адаптивный дизайн и многое другое.


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

Спасибо ребятам с форума, которые помогли идеями и в доработке скриптов.

Сайт & En Docs

Добавил функцию 3d (появилась задняя панелька), правда она бесполезная :)

Добавил возможность создания собственных атрибутов. В нем можно задавать свои размеры устройству, тени, углы и прочее.
Еще может барахлить редактор цвета при получении кода, но при повторном выборе нужного цвета, код выводится как надо.

madeas,
и как на нем адаптивный дизайн демонстрировать?

j0hnik,
можно сделать скрин и поместить его в созданное устройство. Инструмент создает что-то вроде рамки, в которую можно вставить код, текст, изображения и т.д.
Все, что пожелаете)

Всем привет. Хочу сделать в будущем выгрузку добавляемых кнопок в код. А пока думаю как их организовать. Может кто что-то посоветует? Есть какие-нибудь предложения или рекомендации?

Добавил возможность перемещения (Drag & Drop) нижних блоков box-shadow и position. Это может пригодиться, если вы создаете вытянутое устройство или неудобно прокручивать страницу вверх/вниз.

Сделал несколько правок:
- интерфейс сайта стал более понятным
- улучшен интерфейс самого устройства
- добавлено больше возможностей для настройки девайса
- кнопки теперь дают больше конкретики обычному пользователю
- чтобы получить код устройства и открыть кнопки разработчика, нужно нажать кнопку "I'm a Developer", расположенную под устройством

Если у кого-нибудь есть рекомендации или замечания, пишите.

- добавлена возможность менять вид и положение задней iSight камеры. Вид камеры также меняется в зависимости от угла наклона устройства
- устройству добавлены визуальные кнопки меню и back, с возможностью отключения/включения
- добавлена возможность наклеивать свои стикеры и картинки на заднюю крышку устройства




В данный момент идет поиск решения задачи по созданию объема для устройств и добавление боковых кнопок звука и включения. Но может быть и хрен с ними))

Какие еще функции вы бы посоветовали добавить?