едисловие:

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

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

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


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

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


Свободный CSS!

Демоны

Пример CSS | Ссылка для скачивания


Шмель+лаванда

Пример CSS | Ссылка для скачивания


Рыцари

Ссылка для скачивания


Роза

Ссылка для скачивания | Ссылка для скачивания v2.0*

*код подправлен и выглядит чуть лучше :3


Пустыня

Пример CSS | Ссылка для скачивания


D&D красный

Пример CSS | Ссылка для скачивания


D&D зеленый/скверна

Ссылка для скачивания


D&D фиолетовый/бездна

Ссылка для скачивания


Араккоа

Ссылка для скачивания


Бастион

Пример CSS | Ссылка для скачивания


Морской

Ссылка для скачивания


Инженерный для профиля

Ссылка для скачивания


Инженерный для творчества

Ссылка для скачивания


Похвастаться или CSS для себя/на заказ! (прошу не утаскивать)













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. Можно копировать код по частям, а можно скопировать все сразу и убрать ненужное. Главное, не пропустить/не стереть нужную часть (внимательно следим за запятыми).

3. И вот у нас остается небольшая часть, которую мы добавляем в свой css.

4. Готово!

AllFont.ru — allfont.ru

1. Выбираем шрифт и жмем на него.

2. Спускаемся чуть ниже, выделяем ссылку и переходим по ней.

3. Копируем всё, но оставляем только часть с форматом woff.

4. Переписываем текст, чтоб он был как в примере, особое внимание надо уделить кавычкам и не забыть добавить “s” (https).

5. Если все сделано правильно и ни одного символа не забыто, то на этом всё! Шрифт добавлен!

CDN Fonts — www.cdnfonts.com

ВАЖНО: кириллических шрифтов на этом сайте либо совсем нет, либо их крайне мало! Но тем не менее…

1. Выбираем шрифт и жмем на название.

2. Копируем ссылку из графы @import.

3. Добавляем её в свой css и не забываем добавить “s” к http.

4. Готово!

Применить выбранный шрифт можно сразу ко всему тексту творчества, а не как в примерах – только к тексту творчества.

Пока на этом со шрифтами всё!

Спасибо за внимание, надеюсь материалы были полезны :)

+30
01:07
945
18:12
0
Неплохо pepesmile
18:23
0
Отличные работы!
18:37
0
Благодарю!
С наступающим!
01:18
0
Автор сего треда — восхитительна!
01:50
+1
Опа, моя ксс мастер!
15:35
0
Взял ксс для анкеты на пчелу
20:54
0
20:36
0
Хочу взять последний КСС под стиль Бастиона/Орибоса, но не могу. Нет ссылки pepesad
21:09
0
Я бы тоже его хотел посмотреть. И не только посмотреть. Я бы для себя что-то украл подчерпнул
21:57
0
если интересны какие-то части, как что сделано например, то могу показать и рассказать, но целиком код дать не могу pepehugflip