Для тех кто хочет сделать красивую гирлянду, но рукожоп, как я.
Так как длиннопост, сразу укажу, что это пошаговая инструкция для установки своего собственного изображения для обводки в инструмент для создания гирлянд на пикабухе. На истину в последней инстанции и лучший способ не претендую, на все вопросы постараюсь ответить в комментах, если они будут, конечно. Осторожно, много картинок.
Сижу себе тихим декабрьским вечером, никого не трогаю, и думаю, чего бы интересного поделать. Задротить желания нет, кодить - тоже, книги - только вот дочитал. И тут взгляд мой упал на создание гирлянд. Захожу и вижу знакомый всем, кто пробовал создать гирлянду, интерфейс.
Вместе с этим приходит понимание, что, вероятнее всего, все что я там создам будет скорее похоже на надругательство над искусством.
Значит пришло время читерить. Уж с обводкой я должен суметь справиться =) А дальше дело лишь за сюжетом и компоновкой. Итак, к делу.
Для начала откроем окно просмотра верстки (не бейте палками, я знаю что там можно делать еще кучу разных вещей, просто я от веб фронта по роду занятий далек и привык использовать инспект в основном для вот таких легких читов в разных онлайн сервисах).
Итак жмакаем ПКМ рядом с пространством для рисования гирлянды и жмем Inspect(это для хрома, для других браузеров пишем в поисковике Inspect/Examine element in <название браузера>, он подскажет, я договорился).
Дальше ищем элемент garland-main-box, открываем его и открываем внутри него элемент g3l-box. Открываем и его, внутри него два элемента canvas. Нас интересует второй.
Берем и вставляем в свойство style второго canvas'a следующий текст:
background: url(http://cs4.pikabu.ru/images/big_size_comm/2015-02_1/14227890...); background-size: contain; background-repeat : no-repeat; background-position: 20% 0%; opacity : 0.5;
Сейчас распишу что он делает и как им управлять:
1. background: url(http://cs4.pikabu.ru/images/big_size_comm/2015-02_1/14227890...);
Эта штука вставляет изображение для обводки. Для смены изображения замените адрес в скобочках, на адрес к изображению, которое хотите обвести.
2. background-position: 20% 0% - позволяет управлять позицией изображения, первая цифра лево-право, вторая - вверх-вниз.
3. opacity : 0.5; - регулирует прозрачность изображения
После того, как эти изменения будут внесены, вы увидите свое изображение для обводки =)
Вуаля, вы художник!
Хотя кому я вру, мне даже это не помогло.
Баянометр ругался на Гриффина и руки.
