Предисловие:

Вопросы, правки, предложения, что еще хотите видеть – в комментарии или можно в лс дискорда

Ах да, еще есть такой замечательный сервер в дискорде discord.gg/jPCWfx99TR, где можно общаться по css, disp, делиться красивыми картинками для творчества, музыкой, забавными гифками и всяким таким штукам. Ругаться строго запрещено! А помощь друг другу приветствуется :3

А теперь перейдем к записи!

НАВИГАЦИЯ! [тык на нужный пункт]:

Откуда взять ссылку для добавления музыки в творчество
Добавление видео в творчество
Добавление видео с автозапуском
Добавление видео с зацикливанием
Добавление видео со стартом с определенной секунды
Шрифты. Сайты со шрифтами и инструкция к ним

CSS-Полезности!

Всё про видео

ВАЖНО: в работе с css внимательно следите за ковычками и скобками. Открытая скобка должны быть закрыта иначе все полетит в тартарары!

Самое главное, что, пожалуй, надо знать – это где достать правильную ссылку. Открываем нужное видео на ютуб с подходящей музыкой, кликаем правой кнопкой мыши и выбираем “копировать HTML-код”

Из всего этого далее потребуется лишь сама ссылка, поэтому добавляем скопированное в блокнот и берем только ссылку из ковычек

А если видео было взято из плейлиста, то часть с этим самым плейлистом мы не копируем, берем только ссылку ДО знака вопроса.

Теперь у нас есть ссылка, которую мы будем добавлять в код!

Добавление видео.

Способы добавления могут быть самые разные, я лишь предлагаю один из вариантов.

Запись на сайте сразу форматирует код, поэтому прикрепляю файл, чтоб не нужно было переписывать код со скрина — ссылка

И вот, теперь у вас в творчестве есть музыка, которую нужно будет запускать самостоятельно

Добавление видео с автозапуском.

Если мы хотим, чтобы видео запускалось автоматически, то тогда к ссылке следует дописать

ссылка на код файлом

Видео с зацикливанием.

Что сделать, чтобы видео бесконечно проигрывалось заново?

Я могу долго начать описывать то, что надо дописать, переписать и прочее-прочее, но это вряд ли будет кому-то интересно, поэтому сразу дам готовую часть кода и покажу, что и куда нужно добавить. А добавить нужно это после знака вопроса вот эту всю строчку:
version=3&autoplay=1&loop=1&playlist=jEC3MXBntp0

Что здесь важно знать: непонятный набор букв после «playlist=» совпадает с буквами из ссылки на видео – они идут после «embed/». Поэтому копируем, ставим буковки на свое место, добавляем ссылку в код и радуемся зацикленному видео с музыкой.

Выглядеть ссылка в итоге будет так:
src=«www.youtube.com/embed/jEC3MXBntp0?version=3&autoplay=1&loop=1&playlist=jEC3MXBntp0»

ссылка на файл с кодом

Добавление видео со стартом с определенного момента.

Но что, если, например, в видео перед музыкой следует длинный отрезок тишины или вступление автора, которое не очень-то хочется, чтобы слушал читатель.

Всё просто! Мы пропустим этот отрезок, начав запуск с нужного момента! Для этого добавим к коду после ссылки на видео “&start=100&” (100 – это секунды).

по традиции: ссылка на файл с кодом

Шрифты.

Сайты со шрифтами и как ими пользоваться.

Выкладываю все сайты, которыми я когда-либо пользовалась и на которые натыкалась в поисках заветных шрифтов. Часть из них может не работать сейчас или в будущем по некоторым причинам – рядом с ними будет пометка (если сайт заработает, то метка снимается)

Google Font — fonts.google.com

1. Открываем сайт, выбираем шрифт и нажимаем на него.

2. На открывшейся странице листаем в самый низ до пункта «Styles»

3. Выбираем стиль (в данном случае он всего один) и жмем на плюсик сбоку

4. Сбоку появляется панель, где выбираем @import.

5. Копируем ссылку и добавляем в свой css

6. Готово! (лучше искать сразу шрифты с кириллицей)

Nomail — nomail.com.ua – 50/50*

1. Заходим на сайт и выбираем себе шрифт.

2. Нажимаем на облачко.

3. Копируем строку

4. Добавляем его в свой css

5. Готово!

*Здесь происходит что-то странное, потому что не все шрифты получается добавить таким способом: где-то работает, а где-то нет. (Может кто знает 100% рабочий способ – милости прошу в лс)

Fontstorage — fontstorage.com

1. Все стандартно: открываем сайт и ищем подходящий шрифт. Нашли – жмем на голубую кнопку Download

2. ВАЖНО: шрифт не получится скачать без регистрации. Если она у вас есть, то появится окошечко со ссылкой

3. Копируем эту ссылку, но еще рано добавлять ее в свой css.

Ссылка имеет вид: @import «fonts.fontstorage.com/import/[название шрифта].css»;
А нам нужно превратить ее в: @import url('https://st.fontstorage.com/font/import/[название шрифта].css');

Не заморачиваемся: копируем название шрифта из первой ссылки и добавляем во вторую.

4. Добавляем исправленную ссылку в свой css и вауля!

Onlinewebfonts — www.onlinewebfonts.com/fonts

1. Заходим на сайт, находим шрифт и нажимаем на него.

2. Из целой кучи ссылок нам нужна только одна – форматы woff и woff2. Можно копировать код по частям, а можно скопировать все сразу и убрать ненужное. Главное, не пропустить/не стереть нужную часть (внимательно следим за запятыми).