Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.07.2018, 15:44
Аватар для madeas
Профессор
Отправить личное сообщение для madeas Посмотреть профиль Найти все сообщения от madeas
 
Регистрация: 13.04.2018
Сообщений: 232

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


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

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

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

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


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

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

Сайт & En Docs

Последний раз редактировалось madeas, 24.07.2018 в 15:54.
Ответить с цитированием
  #2 (permalink)  
Старый 24.07.2018, 16:51
Аватар для madeas
Профессор
Отправить личное сообщение для madeas Посмотреть профиль Найти все сообщения от madeas
 
Регистрация: 13.04.2018
Сообщений: 232

Добавил функцию 3d (появилась задняя панелька), правда она бесполезная
Ответить с цитированием
  #3 (permalink)  
Старый 25.07.2018, 10:45
Аватар для madeas
Профессор
Отправить личное сообщение для madeas Посмотреть профиль Найти все сообщения от madeas
 
Регистрация: 13.04.2018
Сообщений: 232

Добавил возможность создания собственных атрибутов. В нем можно задавать свои размеры устройству, тени, углы и прочее.
Еще может барахлить редактор цвета при получении кода, но при повторном выборе нужного цвета, код выводится как надо.
Ответить с цитированием
  #4 (permalink)  
Старый 25.07.2018, 11:42
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

madeas,
и как на нем адаптивный дизайн демонстрировать?
Ответить с цитированием
  #5 (permalink)  
Старый 25.07.2018, 11:58
Аватар для madeas
Профессор
Отправить личное сообщение для madeas Посмотреть профиль Найти все сообщения от madeas
 
Регистрация: 13.04.2018
Сообщений: 232

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

Последний раз редактировалось madeas, 25.07.2018 в 12:11.
Ответить с цитированием
  #6 (permalink)  
Старый 28.07.2018, 10:03
Аватар для madeas
Профессор
Отправить личное сообщение для madeas Посмотреть профиль Найти все сообщения от madeas
 
Регистрация: 13.04.2018
Сообщений: 232

Всем привет. Хочу сделать в будущем выгрузку добавляемых кнопок в код. А пока думаю как их организовать. Может кто что-то посоветует? Есть какие-нибудь предложения или рекомендации?
Ответить с цитированием
  #7 (permalink)  
Старый 29.07.2018, 11:04
Аватар для madeas
Профессор
Отправить личное сообщение для madeas Посмотреть профиль Найти все сообщения от madeas
 
Регистрация: 13.04.2018
Сообщений: 232

Добавил возможность перемещения (Drag & Drop) нижних блоков box-shadow и position. Это может пригодиться, если вы создаете вытянутое устройство или неудобно прокручивать страницу вверх/вниз.
Ответить с цитированием
  #8 (permalink)  
Старый 07.08.2018, 17:30
Аватар для madeas
Профессор
Отправить личное сообщение для madeas Посмотреть профиль Найти все сообщения от madeas
 
Регистрация: 13.04.2018
Сообщений: 232

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

Если у кого-нибудь есть рекомендации или замечания, пишите.
Ответить с цитированием
  #9 (permalink)  
Старый 09.08.2018, 10:50
Аватар для madeas
Профессор
Отправить личное сообщение для madeas Посмотреть профиль Найти все сообщения от madeas
 
Регистрация: 13.04.2018
Сообщений: 232

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




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

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

Последний раз редактировалось madeas, 09.08.2018 в 10:54.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Fancy box Ajax и Reel плагины Mirchik jQuery 5 17.03.2018 18:25
Ревью автокомплита Combo box Fierfoxik Общие вопросы Javascript 0 07.07.2017 17:51
Установить свой padding в Fancy box Ленча jQuery 2 26.05.2015 22:50
Не работает виджет от facebook like box ? ilyas-> Элементы интерфейса 0 31.08.2013 22:01
animate, всплывающий div box сделать по центру zero_mod jQuery 1 27.10.2010 00:23