Забираем виджеты для стрима, откуда никто не ожидает

Кодята, ‎привет!

Сегодня‏ ‎на ‎стриме ‎рассказывал, ‎как ‎можно‏ ‎забрать ‎любой‏ ‎html-сниппет,‏ ‎в ‎качестве ‎виджета‏ ‎на ‎стрим.‏ ‎Продублирую ‎чуть ‎подробнее ‎тут,‏ ‎чтобы‏ ‎этот ‎процесс‏ ‎был ‎менее‏ ‎пугающим ‎и ‎сбивающим ‎с ‎толку.‏ ‎

В‏ ‎качестве ‎источника‏ ‎виджетов ‎мы‏ ‎можем ‎использовать ‎абсолютно ‎любой ‎сервис,‏ ‎но‏ ‎в‏ ‎нашем ‎примере‏ ‎мы ‎воспользуемся‏ ‎CodePen

Заходим ‎на‏ ‎сайт,‏ ‎вводим ‎в‏ ‎строке ‎поиска ‎любое ‎ключевое ‎слово‏ ‎и ‎выбираем‏ ‎из‏ ‎предложенных ‎вариантов ‎интересующий‏ ‎нас ‎виджет.

Чтобы‏ ‎переместиться ‎дальше ‎первой ‎страницы,‏ ‎нам‏ ‎понадобиться ‎создать‏ ‎аккаунт. ‎Сделать‏ ‎это ‎можно ‎в ‎правом ‎верхнем‏ ‎углу.

Найдя‏ ‎подходящий ‎виджет,‏ ‎просто ‎жмем‏ ‎на ‎него. ‎Откроется ‎новая ‎страница,‏ ‎на‏ ‎которой‏ ‎в ‎самом‏ ‎низу ‎-‏ ‎будет ‎представление‏ ‎виджета.‏ ‎А ‎выше‏ ‎- ‎три ‎колонки: ‎HTML, ‎CSS,‏ ‎JavaScript.

Я ‎выбрал‏ ‎симпатичную‏ ‎анимацию, ‎которая ‎может‏ ‎отлично ‎подойти‏ ‎в ‎качестве ‎рамки ‎камеры‏ ‎или‏ ‎какого-либо ‎блока.

Все,‏ ‎что ‎нам‏ ‎нужно ‎сделать ‎- ‎просто ‎собрать‏ ‎содержимое‏ ‎трех ‎колонок‏ ‎(HTML, ‎CSS‏ ‎и ‎JS) ‎в ‎одном ‎файле,‏ ‎с‏ ‎разрешением‏ ‎.html

Но ‎есть‏ ‎несколько ‎нюансов:

• На‏ ‎сайте ‎может‏ ‎быть‏ ‎представлен ‎код,‏ ‎который ‎не ‎будет ‎функционировать ‎в‏ ‎файле ‎без‏ ‎дополнительной‏ ‎библиотеки ‎jQuery. ‎Ее‏ ‎я ‎заранее‏ ‎приложу ‎в ‎шаблоне
• Скопированный ‎код‏ ‎должен‏ ‎быть ‎размещен‏ ‎в ‎файле‏ ‎определенным ‎образом

Давайте ‎разберемся ‎со ‎всем‏ ‎по‏ ‎порядку...

Какие ‎могут‏ ‎быть ‎вариации‏ ‎кода?

Обращайте ‎внимание ‎на ‎название ‎вкладок.‏ ‎Если‏ ‎вы‏ ‎видите ‎HTML,‏ ‎CSS ‎и‏ ‎JS ‎(без‏ ‎всяких‏ ‎значений ‎в‏ ‎скобках) ‎- ‎такой ‎код ‎можно‏ ‎забирать ‎сразу‏ ‎-‏ ‎он ‎будет ‎работать.

Однако‏ ‎могут ‎быть‏ ‎случаи, ‎когда ‎код ‎требует‏ ‎некую‏ ‎компиляцию ‎или‏ ‎постпроцессинг ‎(в‏ ‎это ‎можно ‎не ‎вникать).

Чтобы ‎превратить‏ ‎такой‏ ‎код ‎в‏ ‎подходящий ‎нам‏ ‎- ‎нужно ‎всего ‎лишь ‎нажать‏ ‎на‏ ‎иконку‏ ‎стрелки, ‎указывающей‏ ‎вниз, ‎которая‏ ‎расположена ‎в‏ ‎правой‏ ‎части ‎каждой‏ ‎колонки. ‎И ‎выбираем ‎варианты ‎View‏ ‎Compiled

После ‎этого‏ ‎в‏ ‎тех ‎же ‎полях‏ ‎появится ‎уже‏ ‎обработанный ‎код, ‎который ‎мы‏ ‎можем‏ ‎свободно ‎забирать.‏ ‎Поэтому ‎идем‏ ‎дальше.

Как ‎собрать ‎код ‎в ‎одном‏ ‎файле?

Как‏ ‎уже ‎упоминалось,‏ ‎весь ‎код‏ ‎должен ‎быть ‎собран ‎в ‎файле‏ ‎с‏ ‎расширением‏ ‎HTML. ‎Чтобы‏ ‎вам ‎было‏ ‎проще ‎все‏ ‎сделать,‏ ‎я ‎подготовил‏ ‎простой ‎шаблон. ‎Загрузить ‎его ‎можно‏ ‎в ‎самом‏ ‎низу‏ ‎статьи ‎(template.html) ‎

По‏ ‎умолчанию ‎он‏ ‎будет ‎открывать ‎в ‎браузере,‏ ‎поэтому‏ ‎вам ‎нужно‏ ‎нажать ‎на‏ ‎загруженный ‎файл ‎правой ‎кнопкой ‎мыши‏ ‎и‏ ‎выбрать ‎"Открыть‏ ‎с ‎помощью"‏ ‎-> ‎"Блокнот". ‎Если ‎у ‎вас‏ ‎есть‏ ‎более‏ ‎"мощные" ‎текстовые‏ ‎редакторы ‎(только‏ ‎не ‎Word,‏ ‎пожалуйста)‏ ‎- ‎Feel‏ ‎free ‎to ‎use ‎it.

Далее, ‎нам‏ ‎нужно ‎вставить‏ ‎весь‏ ‎скопированный ‎текст ‎в‏ ‎соответствии ‎с‏ ‎комментариями ‎в ‎шаблоне. ‎Как‏ ‎только‏ ‎это ‎будет‏ ‎готово, ‎нажмите‏ ‎Файл ‎-> ‎Сохранить ‎Как ‎->‏ ‎Укажите‏ ‎удобный ‎вам‏ ‎путь ‎до‏ ‎будущего ‎файла ‎и ‎сохраните ‎с‏ ‎расширением‏ ‎.html

Если‏ ‎все ‎сделано‏ ‎верно ‎-‏ ‎мы ‎может‏ ‎открыть‏ ‎сохраненный ‎файл‏ ‎в ‎браузере ‎и ‎увидеть ‎результат.

Теперь‏ ‎мы ‎можем‏ ‎подключить‏ ‎наш ‎файл ‎в‏ ‎OBS!

Как ‎подключить‏ ‎в ‎OBS?

В ‎действительности ‎-‏ ‎все‏ ‎весьма ‎просто.‏ ‎Но ‎есть‏ ‎один ‎нюанс.

Открываем ‎OBS ‎и ‎добавляем‏ ‎на‏ ‎нужной ‎сцене‏ ‎новый ‎браузерный‏ ‎источник. ‎Даем ‎ему ‎произвольное ‎название‏ ‎(я‏ ‎назвал‏ ‎"[B] ‎Animated‏ ‎Border")

Далее, ‎ставим‏ ‎галочку ‎в‏ ‎пункте‏ ‎"Локальный ‎файл"‏ ‎и ‎жмем ‎кнопку ‎"Обзор". ‎Выбираем‏ ‎путь ‎до‏ ‎нашего‏ ‎html ‎виджета, ‎выставляем‏ ‎размер ‎и‏ ‎делаем ‎остальные ‎настройки.

Обратите ‎особое‏ ‎внимание‏ ‎на ‎пункт‏ ‎CSS. ‎В‏ ‎нем ‎OBS ‎по ‎умолчанию ‎подставляет‏ ‎код,‏ ‎который ‎скрывает‏ ‎фон ‎подключенного‏ ‎сайта/файла. ‎В ‎каких-то ‎случаях ‎это‏ ‎удобно‏ ‎(как‏ ‎в ‎моем‏ ‎примере ‎с‏ ‎анимированной ‎рамкой),‏ ‎а‏ ‎в ‎каких-то‏ ‎может ‎мешать ‎(например ‎если ‎вы‏ ‎скачали ‎целую‏ ‎страницу‏ ‎для ‎экрана ‎паузы).‏ ‎Если ‎оно‏ ‎вам ‎мешает ‎- ‎просто‏ ‎удалите‏ ‎все ‎содержимое‏ ‎из ‎этого‏ ‎поля.

Далее ‎мы ‎можем ‎просто ‎воспользоваться‏ ‎трансформированием‏ ‎в ‎OBS,‏ ‎чтобы ‎привести‏ ‎виджет ‎к ‎желаемому ‎виду.

Что, ‎если‏ ‎я‏ ‎хочу‏ ‎поменять ‎цвета?

К‏ ‎сожалению, ‎однозначно‏ ‎единого ‎способа‏ ‎поменять‏ ‎цвета ‎-‏ ‎нет. ‎Все ‎очень ‎зависит ‎от‏ ‎выбранного ‎виджета.‏ ‎Где-то‏ ‎могут ‎быть ‎один-два‏ ‎цвета, ‎а‏ ‎где-то ‎целые ‎переливающиеся ‎градиенты.‏ ‎Но‏ ‎я ‎могу‏ ‎подсказать. ‎на‏ ‎что ‎обращаться ‎внимание.

Во-первых, ‎цвет ‎(практически)‏ ‎всегда‏ ‎описан ‎в‏ ‎CSS.

Во-вторых, ‎он‏ ‎может ‎быть ‎выражен ‎одним ‎из‏ ‎следующих‏ ‎видов:

• HEX.‏ ‎Выглядит ‎так:‏ ‎#27F2A6
• rgb. ‎Выглядит‏ ‎так: ‎rgb(156,‏ ‎231,‏ ‎65)
• rgba. ‎Выглядит‏ ‎так: ‎rgba(156, ‎252, ‎75, ‎.5)

HEX

Такой‏ ‎цвет ‎всегда‏ ‎имеет‏ ‎символ ‎# ‎в‏ ‎начале ‎и‏ ‎может ‎содержать ‎3 ‎или‏ ‎6‏ ‎значений ‎после‏ ‎символа. ‎(#000‏ ‎и ‎#000000 ‎- ‎черный ‎цвет.‏ ‎#FFF‏ ‎и ‎#FFFFFF‏ ‎- ‎белый‏ ‎цвет)

Чтобы ‎сильно ‎не ‎погружаться ‎в‏ ‎то,‏ ‎как‏ ‎подобрать ‎цвет‏ ‎в ‎HEX,‏ ‎вы ‎можете‏ ‎воспользоваться‏ ‎любым ‎Color‏ ‎Picker. ‎Например ‎- ‎этим.

RGB

Почти ‎то‏ ‎же ‎самое,‏ ‎что‏ ‎и ‎HEX, ‎но‏ ‎значение ‎для‏ ‎цвета ‎тут ‎задано ‎намного‏ ‎понятнее.‏ ‎В ‎HEX‏ ‎для ‎описания‏ ‎красного, ‎зеленого ‎и ‎синего ‎используется‏ ‎шестнадцатеричная‏ ‎система ‎(Те‏ ‎самые ‎цифры‏ ‎и ‎буквы ‎0-9 ‎и ‎A-F),‏ ‎а‏ ‎в‏ ‎RGB ‎они‏ ‎задаются ‎числами‏ ‎от ‎0‏ ‎до‏ ‎255.

Чтобы ‎было‏ ‎проще ‎найти ‎нужный ‎цвет, ‎мы‏ ‎можем ‎воспользоваться‏ ‎тем‏ ‎же ‎Color ‎Picker, но‏ ‎уже ‎обратить‏ ‎внимание ‎не ‎на ‎HEX,‏ ‎а‏ ‎на ‎RGB.

RGBA

Абсолютно‏ ‎то ‎же‏ ‎самое, ‎что ‎и ‎RGB. ‎Но‏ ‎теперь‏ ‎есть ‎еще‏ ‎и ‎значение‏ ‎для ‎A ‎- ‎альфа-канал. ‎Это‏ ‎по‏ ‎сути‏ ‎непрозрачность. ‎В‏ ‎том ‎же‏ ‎Color ‎Picker‏ ‎после‏ ‎RGB ‎можно‏ ‎заметить ‎значение ‎и ‎для ‎A.

Чтобы‏ ‎поменять ‎цвета‏ ‎в‏ ‎вашем ‎виджете, ‎обратите‏ ‎внимание ‎в‏ ‎часть ‎CSS. ‎Попробуйте ‎найти‏ ‎любые‏ ‎виды ‎цветов,‏ ‎по ‎приведенным‏ ‎выше ‎примерам. ‎Можете ‎определить ‎их‏ ‎цвет‏ ‎с ‎помощью‏ ‎Color ‎Picker,‏ ‎и ‎с ‎ним ‎же ‎-‏ ‎заменить‏ ‎их.

CodePen‏ ‎и ‎прочие‏ ‎площадки ‎с‏ ‎HTML-сниппетами ‎-‏ ‎кладезь‏ ‎полезных ‎и‏ ‎готовых ‎решения ‎для ‎стримера. ‎Умение‏ ‎работать ‎с‏ ‎ними‏ ‎- ‎сильно ‎упростит‏ ‎вам ‎жизнь,‏ ‎вероятно ‎сэкономит ‎денег ‎и‏ ‎поможет‏ ‎выделиться ‎на‏ ‎фоне ‎коллег.‏ ‎Стильно, ‎модно, ‎молодёжно ‎в ‎общем.

Если‏ ‎захочется‏ ‎овладеть ‎мастерством‏ ‎переделывания ‎готовых‏ ‎виджетов ‎- ‎советую ‎обратить ‎внимание‏ ‎именно‏ ‎на‏ ‎CSS. ‎

HTML‏ ‎- ‎как‏ ‎правило ‎очень‏ ‎простой.‏ ‎И ‎не‏ ‎так ‎часто ‎требует ‎изменений, ‎вы‏ ‎к ‎нему‏ ‎всегда‏ ‎сможете ‎вернуться.

JS ‎-‏ ‎обычно ‎влияет‏ ‎лишь ‎на ‎определенную ‎логику‏ ‎поведения,‏ ‎но ‎значительно‏ ‎реже ‎на‏ ‎отображение.

А ‎CSS ‎- ‎это ‎все‏ ‎о‏ ‎том, ‎как‏ ‎элемент ‎выглядит‏ ‎и ‎часто ‎как ‎он ‎анимирован.‏ ‎Материал‏ ‎простой,‏ ‎а ‎теперь‏ ‎у ‎вас‏ ‎есть ‎и‏ ‎полигон‏ ‎для ‎экспериментов!

Надеюсь‏ ‎статья ‎окажется ‎полезной ‎для ‎вас!‏ ‎Буду ‎заходить‏ ‎в‏ ‎гости ‎и ‎искать‏ ‎глазами ‎новые‏ ‎визуальные ‎штуки) ‎