BBCode - уроки и туториалы

temarazin (OP)

Full Member

Offline

Activity: 224
Merit: 186

BBCode - уроки и туториалы

February 21, 2018, 11:20:33 AM
Last edit: May 18, 2019, 04:43:55 PM by temarazin

Merited by xandry (5), TheFuzzStone (5), esmanthra (5), klarki (1), roslinpl (1), Be_Happy (1), LifeChain (1)

#1

Это перевод уроков по созданию подписей на форуме.
Автор: roslinpl.
Оригинальная тема: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!]

Новые уроки будут выкладываться по мере перевода

Привет всем!

Я решил начать ветку, в которой смогу поделиться знаниями о BBCode форума. По моим урокам и туториалам вы сможете улучшить своё умение, узнаете как разработать и создать подпись с BBCode себе или кому-то другому.

Если вы считаете, что это клевая идея, то оставляйте свои комментарии.

		........................................Ссылки.на.уроки:........................................	..................Ссылки.на.подсказки.и.Трюки:..................
███████████████████████████████████████ ██████████████████████████████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ ██████████████████████████████████████████ ███████████████████████████████████████	..............	Урок 1:.Правила для подписей на форуме Урок 2:.Макс. высота подписи Урок 3:.Шаблон.подписи.для.Senior/Hero/Legendary.Members.(и.немного.о.таблицах...) Урок 4:.Основы рисования с BBCode - уровень I Урок 5:.Основы рисования с BBCode - уровень II Урок 6:.Цвета Урок 7:.Цвета - градиенты Урок 8:.Основы рисования с BBCode - уровень III (с видео) Урок 9:."Внутри таблиц": Размер изображения Урок 10:."Рисование с BBCode - продвинутый уровень I" Урок 11:."Продвинутая техника сохранения знаков. Часть I"	I II III IV

Урок 1: Правила для подписей на форуме

РАНГ	ССЫЛКИ	СТИЛИ	ЖИРНЫЙ ШРИФТ	КУРСИВ	ПОДЧЕРКИВАНИЕ	ТАБЛИЦЫ	КОЛ-ВО ЗНАКОВ
Newbies	нет	нет	нет	да	да	нет	50
Jr. Members	нет	нет	нет	да	да	нет	150
Members	да	нет	нет	да	да	нет	4000
Full Members	да	font.color,.font.face	да	да	да	нет	4000
Sr. Members	да	да (без "glow")	да	да	да	да	4000
Hero/Legendary.Members	да	да	да	да	да	да	4000

Урок 2: Макс. высота подписи

Максимальная высота подписи одинакова для всех рангов.
Простой способ проверить максимальную высоту: Создайте цитату "quote"' с 3 линиями и в каждой напишите букву "p".

Quote

p
p
p

Всё, что ниже 3-ей линии "p" будет не видно в подписи.

Урок 3: Шаблон подписи для Senior/Hero/Legendary Members (и немного о таблицах...)

Таблицы состоят из столбцов и строк.
Чтобы создать таблицу, вам нужно создать обертку для таблицы и строки внутри. Строки состоят из столбцов.

Простое объяснение на примере:
Открываем таблицу -> открываем строку с 4 столбцами -> закрываем строку -> создаем другую строку с 4 столбцами -> закрываем строку -> закрываем таблицу

В коде этот пример выглядит так:

Code:

[table]
[tr]
[td]
Строка_1_столбец_1
[/td]
[td]
Строка_1_столбец_2
[/td]
[td]
Строка_1_столбец_3
[/td]
[td]
Строка_1_столбец_4
[/td]
[/tr]
[tr]
[td]
Строка_2_столбец_1
[/td]
[td]
Строка_2_столбец_2
[/td]
[td]
Строка_2_столбец_3
[/td]
[td]
Строка_2_столбец_4
[/td]
[/tr]
[/table]

Получилось:

Строка_1_столбец_1	Строка_1_столбец_2	Строка_1_столбец_3	Строка_1_столбец_4
Строка_2_столбец_1	Строка_2_столбец_2	Строка_2_столбец_3	Строка_2_столбец_4

Когда вы хотите создать дизайн новой подписи (для Senior/Hero/Legendary Members), вы можете начать с шаблона, который сэкономит вам время:

Code:

[quote][table]
[tr]
[td]
p 
p
p - МАКС. ВЫСОТА - 
[/td]
[td]
КОНТЕНТ
[/td]
[/tr]
[/table][/quote]

Когда дизайн готов, удалите тег "quote" и ваша подпись с BBCode готова

temarazin (OP)

Full Member

Offline

Activity: 224
Merit: 186

Re: BBCode - уроки и туториалы

February 22, 2018, 11:35:31 AM

#2

Урок 4: Основы рисования с BBCode - уровень I

Когда вы хотите перевести изображение в BBCode, вы должны помнить несколько очень важных правил

Я лично тестировал множество различных методов и поэтому уверен, что самый лучший метод - рисовать вручную попиксельно. Конвертеры/генераторы BBCode-изображений не показали должного результата, и я не буду рекомендовать их, равно как и сам ими не пользуюсь.

Благодаря почти 3-летнему опыту создания подписей с BBCode я уверен, что если мы хотим хорошую совместимость нашей подписи с различными ОС и браузерами, мы должны использовать символы в размере 2pt для создания BBCode-изображений.

Вот лучшие символы ASCII, которые я советую использовать для BBCode-изображений: " ▀ ▄ █ ▌ ▐ ░ ▒ ▬ ▂ ▃ ▅ ▆ "
Чаще всего я использую " █ " (и всегда в размере 2pt), который является самым совместимым с различными браузерами и ОС.

Почему я не использую 2px, 1pt или 1px?
Если все будут использовать Google Chrome, то вполне можно использовать 2px, 1px или что-то меньше, чем 2pt. Вы можете проверить сами в своих BBCode-изображениях.

К несчастью, символы, которые меньше 2pt, в подписи будут выглядеть сильно растянутыми или сжатыми в зависимости от браузера и ОС, что означает, что в действительности только часть пользователей будет видеть хорошую правильную подпись.

Дизайн подписей с BBCode не такой гибкий, как HTML + CSS, внешний вид которого тоже может зависеть от браузера.

Эксперимент: Нарисуйте квадрат в BBCode. Используйте один и тот же ASCII символ " █ " с разными размерами: 2pt, 2px, 1pt, 1px.

Посмотрите, что получилось под разными браузерами: Chrome/Mozilla/Opera/Edge/Safari/и т.д..

Quote

2pt→

███████████████████
███████████████████
███████████████████
███████████████████
███████████████████
███████████████████
███████████████████
███████████████████
███████████████████
███████████████████
███████████████████
███████████████████
███████████████████

2px→

████████████████████████████████████████
████████████████████████████████████████
████████████████████████████████████████
████████████████████████████████████████
████████████████████████████████████████
████████████████████████████████████████
████████████████████████████████████████
████████████████████████████████████████
████████████████████████████████████████
████████████████████████████████████████
████████████████████████████████████████
████████████████████████████████████████
████████████████████████████████████████
████████████████████████████████████████
████████████████████████████████████████
████████████████████████████████████████
████████████████████████████████████████
████████████████████████████████████████
████████████████████████████████████████
████████████████████████████████████████

1pt→

██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████

1px→

██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████

Обратите внимание, что квадрат из символов с размером 2pt в большинстве браузеров выглядит одинаково. Это самый совместимый вариант. Другие квадраты из того же символа, но другого размера, в разных браузерах выглядят то сжатыми, то растянутыми. Символы ASCII в 2pt не 100%-совместимы, но спустя годы экспериментов я уверен, что это лучший вариант.

temarazin (OP)

Full Member

Offline

Activity: 224
Merit: 186

Re: BBCode - уроки и туториалы

February 22, 2018, 10:35:02 PM

#3

Немного оффтопа. Автор статей не советует использовать конвертеры изображений в bbcode, но тема для меня достаточно интересная. Решил написать простой скриптик для этой цели. Пока получается так:

██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████

Скрипт пытаюсь оптимизировать именно под этот форум, пишу на php, так что может и выложу куда-нибудь. Если интересно.

temarazin (OP)

Full Member

Offline

Activity: 224
Merit: 186

Re: BBCode - уроки и туториалы

February 23, 2018, 01:12:09 PM

#4

Урок 5: Основы рисования с BBCode - уровень II

Итак, теперь мы знаем, что хороший выбор для BBCode-изображений - это ASCII символ █ с размером 2pt. Но как нарисовать что-то хорошее с ним?

Терпение и немного художественного чувства приведут нас к цели

Чтобы почувствовать это, вам потребуется некоторая практика и экспериментирование.

Упражнение: Выбранные ASCII символы для нашего BBCode-изображения: ░ and █

Шаг 1) Нарисуйте прямоугольник с помощью █ символов. Помните о максимальной высоте. (Урок 2).

Quote

█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████

Шаг 2) Нарисуйте стрелки геймпада с помощью ░ символов.

Quote

█████████████████████████████████████
███████░░░░░░░███████████████████████
███████░█████░███████████████████████
███████░█████░███████████████████████
██░░░░░░█████░░░░░░██████████████████
██░███████████████░██████████████████
██░███████████████░██████████████████
██░███████████████░██████████████████
██░░░░░░█████░░░░░░██████████████████
███████░█████░███████████████████████
███████░█████░███████████████████████
███████░░░░░░░███████████████████████
█████████████████████████████████████

Шаг 3) Нарисуйте кнопки геймпада с помощью ░ символов.

Quote

█████████████████████████████████████
███████░░░░░░░██████████░░░████░░░███
███████░█████░█████████░███░██░███░██
███████░█████░█████████░███░██░███░██
██░░░░░░█████░░░░░░█████░░░████░░░███
██░███████████████░██████████████████
██░███████████████░██████████████████
██░███████████████░██████████████████
██░░░░░░█████░░░░░░██████████████████
███████░█████░███████████████████████
███████░█████░███████████████████████
███████░░░░░░░███████████████████████
█████████████████████████████████████

Step 4) Скруглите углы границ геймпада с помощью ░ символов.

Quote

░███████████████████████████████████░
███████░░░░░░░██████████░░░████░░░███
███████░█████░█████████░███░██░███░██
███████░█████░█████████░███░██░███░██
██░░░░░░█████░░░░░░█████░░░████░░░███
██░███████████████░██████████████████
██░███████████████░██████████████████
██░███████████████░██████████████████
██░░░░░░█████░░░░░░██████████████████
███████░█████░███████████████████████
███████░█████░███████████████████████
███████░░░░░░░███████████████████████
░███████████████████████████████████░

Код упражнения:

Code:

[b]Шаг 1)[/b] Нарисуйте прямоугольник с помощью █ символов. Помните о максимальной высоте. ([url=https://bitcointalk.org/index.php?topic=2991003.msg30751230#msg30751230]Урок 2[/url]).
[quote][size=2pt]█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████[/size][/quote]

[b]Шаг 2) [/b]Нарисуйте стрелки геймпада с помощью ░ символов.
[quote][size=2pt]█████████████████████████████████████
███████░░░░░░░███████████████████████
███████░█████░███████████████████████
███████░█████░███████████████████████
██░░░░░░█████░░░░░░██████████████████
██░███████████████░██████████████████
██░███████████████░██████████████████
██░███████████████░██████████████████
██░░░░░░█████░░░░░░██████████████████
███████░█████░███████████████████████
███████░█████░███████████████████████
███████░░░░░░░███████████████████████
█████████████████████████████████████[/size][/quote]

[b]Шаг 3) [/b]Нарисуйте кнопки геймпада с помощью ░ символов.
[quote][size=2pt]█████████████████████████████████████
███████░░░░░░░██████████░░░████░░░███
███████░█████░█████████░███░██░███░██
███████░█████░█████████░███░██░███░██
██░░░░░░█████░░░░░░█████░░░████░░░███
██░███████████████░██████████████████
██░███████████████░██████████████████
██░███████████████░██████████████████
██░░░░░░█████░░░░░░██████████████████
███████░█████░███████████████████████
███████░█████░███████████████████████
███████░░░░░░░███████████████████████
█████████████████████████████████████[/size][/quote]

[b]Step 4)[/b] Скруглите углы границ геймпада с помощью ░ символов.
[quote][size=2pt]░███████████████████████████████████░
███████░░░░░░░██████████░░░████░░░███
███████░█████░█████████░███░██░███░██
███████░█████░█████████░███░██░███░██
██░░░░░░█████░░░░░░█████░░░████░░░███
██░███████████████░██████████████████
██░███████████████░██████████████████
██░███████████████░██████████████████
██░░░░░░█████░░░░░░██████████████████
███████░█████░███████████████████████
███████░█████░███████████████████████
███████░░░░░░░███████████████████████
░███████████████████████████████████░[/size][/quote]

temarazin (OP)

Full Member

Offline

Activity: 224
Merit: 186

Re: BBCode - уроки и туториалы

February 24, 2018, 11:37:16 AM

#5

Урок 6: Цвета

Для изменения цвета элемента дизайна подписи добавьте bbcode color.

Code:

[color=#цвет][/color]

Значением color может быть одно из принятых названий цветов: "Black, White, Red, Yellow, Pink, Green, Orange, Purple, Blue, Beige, Brown, Teal, Navy, Maroon, Lime Green",
а также цвет в шестнадцатиричной форме и сокращенной шестнадцатиричной форме, которая сэкономит немного символов. (ограничение на кол-во знаков в подписи не такое большое, поэтому экономьте знаки как только можете

).

Сокращенная шестнацатиричная форма:

Шестнадцатиричная.форма	........Сокращенная.шестнадцатиричная.форма........
#000000	#000
#ffffff	#fff
#77CC33	#7C3
#33CC99	#3C9

Также у color есть особое значение 'transparent' (прозрачный), которое очень полезно для BBCode-изображений.

Quote

Этот текст виден А ЭТОТ НЕТ Этот текст виден

Code:

Этот текст виден [color=transparent]А ЭТОТ НЕТ[/color] Этот текст виден

Подсказки и Трюки (2): Как обойти баг таблицы

Quote from: Баг_таблицы

ЭТОТ ТЕКСТ ДОЛЖЕН БЫТЬ НА ОДНОЙ ЛИНИИ

Баг таблицы проявляется только в постах и не проявляется в подписи профиля.

Но иногда нам нужно сделать хорошую таблицу и в посте. Как обойти этот баг?
Удалите пробелы и вставьте вместо них прозрачные "точки" (или сделайте прозрачный фон для glow, если хотите).

Quote from: Починенный_баг_таблицы

ЭТОТ.ТЕКСТ.ДОЛЖЕН.БЫТЬ.НА.ОДНОЙ.ЛИНИИ

Code:

[table]
[tr]
[td]
ЭТОТ[color=transparent].[/color]ТЕКСТ[color=transparent].[/color]ДОЛЖЕН[color=transparent].[/color]БЫТЬ[color=transparent].[/color]НА[color=transparent].[/color]ОДНОЙ[color=transparent].[/color]ЛИНИИ
[/td]
[td]
ЭТОТ[color=transparent].[/color]ТЕКСТ[color=transparent].[/color]ДОЛЖЕН[color=transparent].[/color]БЫТЬ[color=transparent].[/color]НА[color=transparent].[/color]ОДНОЙ[color=transparent].[/color]ЛИНИИ
[/td]
[/tr]
[/table]

[table]
[tr]
[td]
[glow=#000,1][color=#fff]ЭТОТ[color=#000].[/color]ТЕКСТ[color=#000].[/color]ДОЛЖЕН[color=#000].[/color]БЫТЬ[color=#000].[/color]НА[color=#000].[/color]ОДНОЙ[color=#000].[/color]ЛИНИИ
[/td]
[td]
[glow=#000,1][color=#fff]ЭТОТ[color=#000].[/color]ТЕКСТ[color=#000].[/color]ДОЛЖЕН[color=#000].[/color]БЫТЬ[color=#000].[/color]НА[color=#000].[/color]ОДНОЙ[color=#000].[/color]ЛИНИИ
[/td]
[/tr]
[/table]

temarazin (OP)

Full Member

Offline

Activity: 224
Merit: 186

Re: BBCode - уроки и туториалы

February 26, 2018, 07:13:38 AM

#6

Урок 7: Цвета - градиенты

Можно сохранить много времени при создании градиента для вашего текста или BBCode-изображения, используя 'Text Color Fader' - генератор градиента

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

http://patorjk.com/text-color-fader/

Это мой любимый инструмент для создания хорошего градиента, в котором вы можете "Output Code" (генерируемый код) установить в "Standard Forum Code" (стандартный код для форума).

http://patorjk.com/text-color-fader пользовательский интерфейс очень простой. Напишите текст, выберите количество цветов и установите "Standard Forum Code" для Output Code. Нажмите "generate color faded text" - и всё готово

(почти).

Пример:

Quote

Урок - 6: Какой-то текст о градиентах xD

Code:

[color=#9600ff]У[/color][color=#9b06f3]р[/color][color=#a00ce7]о[/color][color=#a512db]к[/color] [color=#af1ec3]-[/color] [color=#b92aab]6[/color][color=#be309f]:[/color] [color=#c73c86]К[/color][color=#cc427a]а[/color][color=#d1486e]к[/color][color=#d64e62]о[/color][color=#db5456]й[/color][color=#e05a4a]-[/color][color=#e5603e]т[/color][color=#ea6632]о[/color] [color=#f4721a]т[/color][color=#f9780e]е[/color][color=#f4721b]к[/color][color=#ef6b27]с[/color][color=#e96534]т[/color] [color=#df584d]о[/color] [color=#d54c67]г[/color][color=#cf4573]р[/color][color=#ca3f80]а[/color][color=#c5398d]д[/color][color=#c0339a]и[/color][color=#ba2ca6]е[/color][color=#b526b3]н[/color][color=#b020c0]т[/color][color=#ab19cc]а[/color][color=#a613d9]х[/color] [color=#9b06f2]x[/color][color=#9600ff]D[/color]

Хорошо, мы теперь знаем, как быстро сгенерировать градиентный текст, но как использовать такой генератор для BBCode-изображений?
Что ж, это немного сложнее и зависит от наших потребностей. У разного дизайна - разный подход.

Давайте начнем с простого примера.

Упражнение:

Quote

████████
████████
████████
████████
████████
████████
████████
████████
████████
████████
████████
████████
████████

████████
████████
████████
████████

Code:

[table]
[tr]
[td]
[size=2pt]
████████
████████
████████
████████
████████
████████
████████
████████
████████
████████
████████
████████
████████


████████
████████
████████
████████
[/td]
[td]
[size=2pt]
████████
████████
████████
████████
████████
████████
████████
████████
████████
████████
████████
████████
████████


████████
████████
████████
████████
[/td]
[/tr]
[/table]

У нас есть два восклицательных знака и мы хотим раскрасить их градиентом.
В нашем примере каждый восклицательный знак состоит из 17 линий █ в размере 2pt.

Чтобы сгенерировать шестнадцатиричные значения цветов для градиента откройте http://patorjk.com/text-color-fader/

В поле "message" напишите:

Quote

12345678901234567

Вы можете написать что угодно, главное, чтобы длина текста была 17 символов. Потому что нам нужно 17 цветов для 17 линий.

Выберите ваши цвета (я установил 2 цвета: #0040ff и #bd0021) и нажмите "generate color faded text". Добавьте тег color для каждой линии вашего изображения и скопируйте сгенерированные значения цветов.
Попробуйте нарисовать второй знак восклицания в обратном градиенте.

Результат упражнения:

Quote

████████
████████
████████
████████
████████
████████
████████
████████
████████
████████
████████
████████
████████

████████
████████
████████
████████

Code:

[table]
[tr]
[td]
[size=2pt]
[color=#0040ff]████████
[color=#0c3cf1]████████
[color=#1838e3]████████
[color=#2334d5]████████
[color=#2f30c8]████████
[color=#3b2cba]████████
[color=#4728ac]████████
[color=#53249e]████████
[color=#5f2090]████████
[color=#6a1c82]████████
[color=#761874]████████
[color=#821466]████████
[color=#8e1059]████████


[color=#9a0c4b]████████
[color=#a5083d]████████
[color=#b1042f]████████
[color=#bd0021]████████
[/td]
[td]
[size=2pt]
[color=#bd0021]████████
[color=#b1042f]████████
[color=#a5083d]████████
[color=#9a0c4b]████████
[color=#8e1059]████████
[color=#821466]████████
[color=#761874]████████
[color=#6a1c82]████████
[color=#5f2090]████████
[color=#53249e]████████
[color=#4728ac]████████
[color=#3b2cba]████████
[color=#2f30c8]████████


[color=#2334d5]████████
[color=#1838e3]████████
[color=#0c3cf1]████████
[color=#0040ff]████████
[/td]
[/tr]
[/table]

Подсказки и Трюки (3): экономим символы (I)

Работая над BBCode-изображением, нам не нужно закрывать тег color перед другим тегом color. Это может сэкономить много символов.
Нам не обязательно закрывать многие теги, такие как [ /b ], [ /size ], [ /font ] и некоторые другие. Еще больше подсказок будет дальше

temarazin (OP)

Full Member

Offline

Activity: 224
Merit: 186

Re: BBCode - уроки и туториалы

February 27, 2018, 03:38:48 PM

#7

Урок 8: Основы рисования с BBCode - уровень III

Мы уже знаем самые важные вещи о BBCode-подписях. Что ж, время создать простую подпись для Senior/Hero/Legendary Member.
Предположим, нам нужно создать подпись, которая выглядит так:

Quote

░░░░░░░▄▄▄▄▄▄
░░░░▄██████████▄
░░░██████████████
░░██████░▐▌░██████
░█████░░░░░░░▀█████
██████▄▄░░▄▄░░██████
████████░░▀▀░▄██████
████████░░▄▄▄░░█████
██████▀▀░░▀▀▀░░█████
░█████░░░░░░░░█████
░░██████░▐▌░██████
░░░██████████████
░░░░▀██████████▀
░░░░░░░▀▀▀▀▀▀
░░░▀▀▀████████▀▀▀

Мы ♥ Биткоин

Я не буду писать пошаговую инструкцию, вместо этого я загрузил для вас видео, где заснял весь процесс создания. Я увеличил скорость в 2 раза, так что видео длится 9 мин. 12 сек., хотя процесс занял 18,5 минут.

Урок 8 видео-туториал: https://youtu.be/McKHrx1tBK0

Когда мы хотим перенести изображение/логотип в BBCode, неплохо подготовить и загрузить файл изображения - так мы сможем прямо в процессе сверять результат с оригиналом.

Урок 8 Изображение логотипа Биткоина: https://i.imgur.com/gPmC4Xi.png

Это упрощенный логотип Биткоина - я изменил угол наклона, чтобы изображение выглядело лучше в BBCode. Размер 2pt не лучший для BBCode-изображений, но по крайней мере он самый совместимый, как мы уже знаем из урока 4.

Урок 8 - код BBCode-подписи:

Code:

[center][table]
[tr]
[td]
[size=2pt][color=#f90][color=transparent]░░░░░░░[/color]▄▄▄▄▄▄
[color=transparent]░░░░[/color]▄██████████▄
[color=transparent]░░░[/color]██████████████
[color=transparent]░░[/color]██████[color=transparent]░[/color]▐▌[color=transparent]░[/color]██████
[color=transparent]░[/color]█████[color=transparent]░░░░░░░[/color]▀█████
██████▄▄[color=transparent]░░[/color]▄▄[color=transparent]░░[/color]██████
████████[color=transparent]░░[/color]▀▀[color=transparent]░[/color]▄██████
████████[color=transparent]░░[/color]▄▄▄[color=transparent]░░[/color]█████
██████▀▀[color=transparent]░░[/color]▀▀▀[color=transparent]░░[/color]█████
[color=transparent]░[/color]█████[color=transparent]░░░░░░░░[/color]█████
[color=transparent]░░[/color]██████[color=transparent]░[/color]▐▌[color=transparent]░[/color]██████
[color=transparent]░░░[/color]██████████████
[color=transparent]░░░░[/color]▀██████████▀
[color=transparent]░░░░░░░[/color]▀▀▀▀▀▀
[color=transparent]░░░[/color][color=#e1e1e1]▀[color=#d3d3d2]▀[color=#c6c4c3]▀[color=#b8b6b4]█[color=#aaa8a5]█[color=#9c9a96]█[color=#8f8b87]█[color=#817d78]█[color=#918e8a]█[color=#a19e9b]█[color=#b1afad]█[color=#c1c0be]▀[color=#d1d0d0]▀[color=#e1e1e1]▀
[/td]
[td]
[size=25pt][b][i][color=#f90]Мы [color=red]♥[/color] Биткоин[/b][/size]
[/td]
[/tr]
[/table][/center]

temarazin (OP)

Full Member

Offline

Activity: 224
Merit: 186

Re: BBCode - уроки и туториалы

February 28, 2018, 11:52:20 AM

#8

Урок 9: "Внутри таблиц": Размер изображения

Это небольшой урок, скорее даже небольшая подсказка.
Урок 9 не относится к подписям, но имеет отношение к BBCode. Он может вам пригодится, когда вы создаете дизайн топика и т.п.

Если вы хотите создать таблицу и разместить в ней изображение, то оно, даже визуально, изменится в размере (уменьшится).
Добавление атрибута width к нашему изображению не решит проблему.

Пример:

Quote

Логотип Биткоина размером 150px x 150px
Но оно не 150x150...

Quote

Логотип Биткоина размером 150px x 150px
Width=150 добавлен. Но все равно это не 150x150..

Код примера:

Code:

[quote][table]
[tr]
[td]
[img]https://i.imgur.com/OaJobp5.png[/img]
[/td]
[td]
Логотип Биткоина размером 150px x 150px
Но оно не 150x150...
[/td]
[/tr]
[/table][/quote]

[quote][table]
[tr]
[td]
[img width=150]https://i.imgur.com/OaJobp5.png[/img]
[/td]
[td]
Логотип Биткоина размером 150px x 150px
Width=150 добавлен. Но все равно это не 150x150..
[/td]
[/tr]
[/table][/quote]

Как решить эту проблему?
В той же ячейке, что и изображение нужно написать строку любого текста, которая будет длиннее изображения.
И сделать её прозрачной. ( color=transparent ).

Quote

fffffffffffffffffffffffffffffff

Логотип Биткоина размером 150px x 150px
Теперь без каких-либо атрибутов он отображается как 150px x 150px

Код:

Code:

[quote][table]
[tr]
[td]
[img]https://i.imgur.com/OaJobp5.png[/img]
[color=transparent]fffffffffffffffffffffffffffffff[/color]
[/td]
[td]
Логотип Биткоина размером 150px x 150px
Теперь без каких-либо атрибутов он отображается как 150px x 150px
[/td]
[/tr]
[/table][/quote]

temarazin (OP)

Full Member

Offline

Activity: 224
Merit: 186

Re: BBCode - уроки и туториалы

March 01, 2018, 06:59:33 PM

#9

Урок 10: "Рисование с BBCode - продвинутый уровень I"

Я обещал подробнее рассказать о рисовании шрифтом "Monospace".

"Monospace", похоже, единственный шрифт (из стандартных - прим. переводчика), в котором у символов, включая пробел, одинаковая ширина - то есть в основном он выглядит одинаково в различных ОС.
(Но, конечно, не во всех).

И даже пользователи Mac'а со старых версий Сафари увидят "тот же" рисунок, что и, скажем так, с последней версии Хрома. Я добавил "скажем так", потому что последняя версия хрома немного подпортила наш дизайн Wink

Я писал об этом несколько дней назад (здесь речь о том, что в последних версиях Хром между символами █████ видны тонкие линии - прим. переводчика).

Хорошо, так в чем же подвох?

Единственная проблема рисунков в "Monospace" - они не выглядят такими сплошными, как такие же рисунки, выполненные обычным шрифтом.
Но всё равно он имеет несколько важных преимуществ.

Не только, что он "одинаково" выглядит в различных браузерах. Но также(!) вы сможете создавать рисунки с размерами 1px, 1pt, 2px, 2pt и они все равно будут выглядить одинаково в различных браузерах.
Но! Один и тот же рисунок, созданный в "Monospace" будет иметь разную насыщенность в заисимости от размера шрифта.

Пример:

Quote

░░░░░░███
░░░░█████
░░░█████████
░░░███████
░░██████████
░░███████████
░███████████
░░█████████
░░░░██████
░░░█████░░░░█
░████████░░███
██████████████
█████████████
░██████████
░░████████
░░█████████░█
░░███████████
████████████
██████░░░░█
██
░██

Size=2pt

░░░░░░███
░░░░█████
░░░█████████
░░░███████
░░██████████
░░███████████
░███████████
░░█████████
░░░░██████
░░░█████░░░░█
░████████░░███
██████████████
█████████████
░██████████
░░████████
░░█████████░█
░░███████████
████████████
██████░░░░█
██
░██

Size=2px

░░░░░░███
░░░░█████
░░░█████████
░░░███████
░░██████████
░░███████████
░███████████
░░█████████
░░░░██████
░░░█████░░░░█
░████████░░███
██████████████
█████████████
░██████████
░░████████
░░█████████░█
░░███████████
████████████
██████░░░░█
██
░██

Size=1pt

░░░░░░███
░░░░█████
░░░█████████
░░░███████
░░██████████
░░███████████
░███████████
░░█████████
░░░░██████
░░░█████░░░░█
░████████░░███
██████████████
█████████████
░██████████
░░████████
░░█████████░█
░░███████████
████████████
██████░░░░█
██
░██

Size=1px

Code:

Code:

[table]
[tr]
[td]
[font=Monospace][size=2pt][color=#fe2f18][color=transparent]░░░░░░[/color]███
[color=transparent]░░░░[/color]█████
[color=transparent]░░░[/color]█████████
[color=transparent]░░░[/color][color=#ac5501]████[/color][color=#fd9359]█[/color][color=#ac5501]█[/color][color=#fd9359]█[/color]
[color=transparent]░░[/color][color=#ac5501]█[/color][color=#fd9359]██[/color][color=#ac5501]█[/color][color=#fd9359]██[/color][color=#ac5501]█[/color][color=#fd9359]███[/color]
[color=transparent]░░[/color][color=#ac5501]█[/color][color=#fd9359]██[/color][color=#ac5501]██[/color][color=#fd9359]██[/color][color=#ac5501]█[/color][color=#fd9359]███[/color]
[color=transparent]░[/color][color=#ac5501]██[/color][color=#fd9359]█████[/color][color=#ac5501]████[/color]
[color=transparent]░░[/color][color=#ac5501]██[/color][color=#fd9359]███████[/color]
[color=transparent]░░░░[/color][color=#fd9359]██████[/color]
[color=transparent]░░░[/color]█[color=#ac5501]████[/color][color=transparent]░░░░[/color][color=#fd9359]█[/color]
[color=transparent]░[/color][color=#ac5501]██[/color]█[color=#ac5501]█████[/color][color=transparent]░░[/color][color=#fd9359]███[/color]
[color=#fd9359]█[/color][color=#ac5501]██[/color]██[color=#ac5501]██████[/color][color=#fd9359]███[/color]
[color=#fd9359]██[/color][color=#ac5501]██[/color]█[color=#ac5501]███████[/color][color=#fd9359]█[/color]
[color=transparent]░[/color][color=#fd9359]█[/color]████[color=#ac5501]█████[/color]
[color=transparent]░░[/color]█████[color=#ac5501]██[/color]█
[color=transparent]░░[/color]█████████[color=transparent]░[/color][color=#ac5501]█[/color]
[color=transparent]░░[/color]█████████[color=#ac5501]██[/color]
[color=#ac5501]█[/color]█████████[color=#ac5501]██[/color]
[color=#ac5501]██[/color]████[color=transparent]░░░░[/color][color=#ac5501]█[/color]
[color=#ac5501]██[/color]
[color=transparent]░[/color][color=#ac5501]██[/color]
[center][size=10pt][b]Size=2pt[/b][/size][/center]
[/td]
[td]
[font=Monospace][size=2px][color=#fe2f18][color=transparent]░░░░░░[/color]███
[color=transparent]░░░░[/color]█████
[color=transparent]░░░[/color]█████████
[color=transparent]░░░[/color][color=#ac5501]████[/color][color=#fd9359]█[/color][color=#ac5501]█[/color][color=#fd9359]█[/color]
[color=transparent]░░[/color][color=#ac5501]█[/color][color=#fd9359]██[/color][color=#ac5501]█[/color][color=#fd9359]██[/color][color=#ac5501]█[/color][color=#fd9359]███[/color]
[color=transparent]░░[/color][color=#ac5501]█[/color][color=#fd9359]██[/color][color=#ac5501]██[/color][color=#fd9359]██[/color][color=#ac5501]█[/color][color=#fd9359]███[/color]
[color=transparent]░[/color][color=#ac5501]██[/color][color=#fd9359]█████[/color][color=#ac5501]████[/color]
[color=transparent]░░[/color][color=#ac5501]██[/color][color=#fd9359]███████[/color]
[color=transparent]░░░░[/color][color=#fd9359]██████[/color]
[color=transparent]░░░[/color]█[color=#ac5501]████[/color][color=transparent]░░░░[/color][color=#fd9359]█[/color]
[color=transparent]░[/color][color=#ac5501]██[/color]█[color=#ac5501]█████[/color][color=transparent]░░[/color][color=#fd9359]███[/color]
[color=#fd9359]█[/color][color=#ac5501]██[/color]██[color=#ac5501]██████[/color][color=#fd9359]███[/color]
[color=#fd9359]██[/color][color=#ac5501]██[/color]█[color=#ac5501]███████[/color][color=#fd9359]█[/color]
[color=transparent]░[/color][color=#fd9359]█[/color]████[color=#ac5501]█████[/color]
[color=transparent]░░[/color]█████[color=#ac5501]██[/color]█
[color=transparent]░░[/color]█████████[color=transparent]░[/color][color=#ac5501]█[/color]
[color=transparent]░░[/color]█████████[color=#ac5501]██[/color]
[color=#ac5501]█[/color]█████████[color=#ac5501]██[/color]
[color=#ac5501]██[/color]████[color=transparent]░░░░[/color][color=#ac5501]█[/color]
[color=#ac5501]██[/color]
[color=transparent]░[/color][color=#ac5501]██[/color]
[center][size=10pt][b]Size=2px[/b][/size][/center]
[/td]
[td]
[font=Monospace][size=1pt][color=#fe2f18][color=transparent]░░░░░░[/color]███
[color=transparent]░░░░[/color]█████
[color=transparent]░░░[/color]█████████
[color=transparent]░░░[/color][color=#ac5501]████[/color][color=#fd9359]█[/color][color=#ac5501]█[/color][color=#fd9359]█[/color]
[color=transparent]░░[/color][color=#ac5501]█[/color][color=#fd9359]██[/color][color=#ac5501]█[/color][color=#fd9359]██[/color][color=#ac5501]█[/color][color=#fd9359]███[/color]
[color=transparent]░░[/color][color=#ac5501]█[/color][color=#fd9359]██[/color][color=#ac5501]██[/color][color=#fd9359]██[/color][color=#ac5501]█[/color][color=#fd9359]███[/color]
[color=transparent]░[/color][color=#ac5501]██[/color][color=#fd9359]█████[/color][color=#ac5501]████[/color]
[color=transparent]░░[/color][color=#ac5501]██[/color][color=#fd9359]███████[/color]
[color=transparent]░░░░[/color][color=#fd9359]██████[/color]
[color=transparent]░░░[/color]█[color=#ac5501]████[/color][color=transparent]░░░░[/color][color=#fd9359]█[/color]
[color=transparent]░[/color][color=#ac5501]██[/color]█[color=#ac5501]█████[/color][color=transparent]░░[/color][color=#fd9359]███[/color]
[color=#fd9359]█[/color][color=#ac5501]██[/color]██[color=#ac5501]██████[/color][color=#fd9359]███[/color]
[color=#fd9359]██[/color][color=#ac5501]██[/color]█[color=#ac5501]███████[/color][color=#fd9359]█[/color]
[color=transparent]░[/color][color=#fd9359]█[/color]████[color=#ac5501]█████[/color]
[color=transparent]░░[/color]█████[color=#ac5501]██[/color]█
[color=transparent]░░[/color]█████████[color=transparent]░[/color][color=#ac5501]█[/color]
[color=transparent]░░[/color]█████████[color=#ac5501]██[/color]
[color=#ac5501]█[/color]█████████[color=#ac5501]██[/color]
[color=#ac5501]██[/color]████[color=transparent]░░░░[/color][color=#ac5501]█[/color]
[color=#ac5501]██[/color]
[color=transparent]░[/color][color=#ac5501]██[/color]
[center][size=10pt][b]Size=1pt[/b][/size][/center]
[/td]
[td]
[font=Monospace][size=1px][color=#fe2f18][color=transparent]░░░░░░[/color]███
[color=transparent]░░░░[/color]█████
[color=transparent]░░░[/color]█████████
[color=transparent]░░░[/color][color=#ac5501]████[/color][color=#fd9359]█[/color][color=#ac5501]█[/color][color=#fd9359]█[/color]
[color=transparent]░░[/color][color=#ac5501]█[/color][color=#fd9359]██[/color][color=#ac5501]█[/color][color=#fd9359]██[/color][color=#ac5501]█[/color][color=#fd9359]███[/color]
[color=transparent]░░[/color][color=#ac5501]█[/color][color=#fd9359]██[/color][color=#ac5501]██[/color][color=#fd9359]██[/color][color=#ac5501]█[/color][color=#fd9359]███[/color]
[color=transparent]░[/color][color=#ac5501]██[/color][color=#fd9359]█████[/color][color=#ac5501]████[/color]
[color=transparent]░░[/color][color=#ac5501]██[/color][color=#fd9359]███████[/color]
[color=transparent]░░░░[/color][color=#fd9359]██████[/color]
[color=transparent]░░░[/color]█[color=#ac5501]████[/color][color=transparent]░░░░[/color][color=#fd9359]█[/color]
[color=transparent]░[/color][color=#ac5501]██[/color]█[color=#ac5501]█████[/color][color=transparent]░░[/color][color=#fd9359]███[/color]
[color=#fd9359]█[/color][color=#ac5501]██[/color]██[color=#ac5501]██████[/color][color=#fd9359]███[/color]
[color=#fd9359]██[/color][color=#ac5501]██[/color]█[color=#ac5501]███████[/color][color=#fd9359]█[/color]
[color=transparent]░[/color][color=#fd9359]█[/color]████[color=#ac5501]█████[/color]
[color=transparent]░░[/color]█████[color=#ac5501]██[/color]█
[color=transparent]░░[/color]█████████[color=transparent]░[/color][color=#ac5501]█[/color]
[color=transparent]░░[/color]█████████[color=#ac5501]██[/color]
[color=#ac5501]█[/color]█████████[color=#ac5501]██[/color]
[color=#ac5501]██[/color]████[color=transparent]░░░░[/color][color=#ac5501]█[/color]
[color=#ac5501]██[/color]
[color=transparent]░[/color][color=#ac5501]██[/color]
[center][size=10pt][b]Size=1px[/b][/size][/center]
[/td]
[/tr]
[/table]

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

Всего наилучшего.

temarazin (OP)

Full Member

Offline

Activity: 224
Merit: 186

Re: BBCode - уроки и туториалы

March 17, 2018, 02:23:05 PM

#10

Урок 11: "Продвинутая техника сохранения знаков. Часть I"

Quote from: 'Трейлер фильма ужасов'

ГЛАВНЫЙ НОЧНОЙ КОШМАР
БЕССОННЫЕ НОЧИ И ПОТРАЧЕННЫЕ ЧАСЫ НА СЖАТИЕ КОДА...
ОГРАНИЧЕНИЕ В 4К ЗНАКОВ

Но не сдавайтесь! Есть несколько способов, чтобы противостоять чистому злу ^_^ ограничения в 4000 знаков.
(Это не такое уж и зло, в конце концов Wink

Ограничение знаков особо не заметно для рангов Member и Full Member, где 4000 знаков более чем досаточно.

Кошмар начинается при создании подписи для Senior, Hero и Legendary

Что ж... Это не настоящий кошмар, а больше похоже на вызов Cool

Я готов поделиться с вами несколькими техниками сохранения знаков, с помощью которых я борюсь с демонами ограничения в 4к знаков Grin

Я постараюсь сделать список, удобный для чтения (надеюсь).

Подсказка 1: Вам не нужно закрывать каждый тег внутри ячейки таблицы.

Вы можете не закрывать каждый тег, а менять текущий тег другим.
Например, вместо закрытия тега color вы можете просто поменять цвет на другой, используя новый тег.

Quote from: 'ОДИН результат - МЕНЬШЕ знаков'

Code:

[center][table]
[tr]
[td]
[font=Monospace][size=20px][color=#3a75bf]█[color=#7b2d2d]█[color=#382877]█[color=#3a6921]█
[/td]
[/tr]
[/table][/center]

Quote from: 'ОДИН результат - БОЛЬШЕ знаков'

Code:

[center][table]
[tr]
[td]
[font=Monospace][size=20px][color=#3a75bf]█[/color][color=#7b2d2d]█[/color][color=#382877]█[/color][color=#3a6921]█[/color][/font][/size]
[/td]
[/tr]
[/table][/center]

Подсказка 2: Вы можете не закрывать любые теги перед закрытием ячейки таблицы.

Вы можете не закрывать font, size и т.п. - (все) теги перед тегом /td.

Quote from: 'ОДИН результат - МЕНЬШЕ знаков'

Code:

[center][table]
[tr]
[td]
[font=Monospace][size=20px][color=#3a75bf]█
[/td]
[/tr]
[/table][/center]

Quote from: 'ОДИН результат - БОЛЬШЕ знаков'

Code:

[center][table]
[tr]
[td]
[font=Monospace][size=20px][color=#3a75bf]█[/color][/font][/size]
[/td]
[/tr]
[/table][/center]

Подсказка 3: Ставьте основной цвет в начало...

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

Это проще показать на примере ^_^:

Quote from: 'ОДИН результат - МЕНЬШЕ знаков'

Code:

[center][table]
[tr]
[td]
[font=Monospace][size=2px][color=#3a75bf]
█████████████████████████████████████
████████[color=#765aa2]█████████████████████[/color]████████
████████[color=#1d847f]█████████████████████[/color]████████
█████████████████████████████████████
[/td]
[/tr]
[/table][/center]

Quote from: 'ОДИН результат - БОЛЬШЕ знаков'

Code:

[center][table]
[tr]
[td]
[font=Monospace][size=2px][color=#3a75bf]
█████████████████████████████████████
████████[color=#765aa2]█████████████████████[color=#3a75bf]████████
████████[color=#1d847f]█████████████████████[color=#3a75bf]████████
█████████████████████████████████████
[/td]
[/tr]
[/table][/center]

Quote from: 'ОДИН результат - БОЛЬШЕ знаков'

Code:

[center][table]
[tr]
[td]
[font=Monospace][size=2px]
[color=#3a75bf]█████████████████████████████████████
[color=#3a75bf]████████[color=#765aa2]█████████████████████[color=#3a75bf]████████
[color=#3a75bf]████████[color=#1d847f]█████████████████████[color=#3a75bf]████████
[color=#3a75bf]█████████████████████████████████████
[/td]
[/tr]
[/table][/center]

Подсказка 4: Ставьте теги начертания и стиля шрифта в начало...

Когда вы устанавливаете стиль шрифта и хотите его использовать для всей ячейки таблицы, ставьте теги в начало.
Но не перед тегами для ссылок (url) и выравнивания (center/left/right). Знаю, звучит не очень понятно....

Просто позвольте показать на примере Grin

Quote from: Эксперимент 1

Code:

[center][table]
[tr]
[td]
[center][url=https://bitcointalk.org][b][font=Arial][size=25px][color=#000]Текст для примера.[/b]
И другая линия текста.
[/td]
[/tr]
[/table][/center]

Текст для примера.
И другая линия текста.

Что произошло: Я просто закрыл тег b и непреднамеренно вместе с закрытием тега b все теги, открытые внутри него, тоже закрылись.
Но если мы переместим их за пределы тега b, то они сорхранят свои свойства Wink

Quote from: Эксперимент 2

Code:

[center][table]
[tr]
[td]
[center][url=https://bitcointalk.org][font=Arial][size=25px][b][color=#000]Текст для примера.[/b]
И другая линия текста.
[/td]
[/tr]
[/table][/center]

Текст для примера.
И другая линия текста.

Что произошло: То же количество символов, что и в примере 1, но результат различен.

Всевозможных ситуаций, где можно это использовать, очень много и описать их займет много времени.

Давайте сфокусируемся на самой важной вещи, которую нужно помнить:

Quote

Закрывая любой тег внутри ячейки таблицы, вы закрываете все теги, которые находились внутри него.

Quote from: ОДИН результат - МЕНЬШЕ знаков

Code:

[center][table]
[tr]
[td]
[center][b][url=https://bitcointalk.org][font=Arial][size=15px]Чуть более продвинутый пример[/b]
[url=https://bitcointalk.org/index.php?topic=1727100.80]Вторая строка - другая ссылка, но тот же шрифт
[/td]
[/tr]
[/table][/center]

Quote from: ОДИН результат - БОЛЬШЕ знаков

Code:

[center][table]
[tr]
[td]
[center][b][url=https://bitcointalk.org][font=Arial][size=15px]Чуть более продвинутый пример[/url][/b]
[url=https://bitcointalk.org/index.php?topic=1727100.80]Вторая строка - другая ссылка, но тот же шрифт
[/td]
[/tr]
[/table][/center]

Quote from: ОДИН результат - МЕНЬШЕ знаков

Code:

[center][table]
[tr]
[td]
[center][b][url=https://bitcointalk.org][color=#12d][font=Arial][size=15px]Чуть более [color=#000]ПРОДВИНУТЫЙ[/color] пример[/url]
[url=https://bitcointalk.org/index.php?topic=1727100.80][size=8px][color=#000]Вторая строка - [color=#12d]ДРУГАЯ[/color] ссылка, но тот же шрифт
[/td]
[/tr]
[/table][/center]

Quote from: ОДИН результат - БОЛЬШЕ знаков

Code:

[center][table]
[tr]
[td]
[center][url=https://bitcointalk.org][b][color=#12d][font=Arial][size=15px]Чуть более [color=#000]ПРОДВИНУТЫЙ[color=#12d] пример[/url]
[url=https://bitcointalk.org/index.php?topic=1727100.80][b][size=8px][color=#000]Вторая строка - [color=#12d]ДРУГАЯ[color=#000] ссылка, но тот же шрифт
[/td]
[/tr]
[/table][/center]

Трудно точно определить как использовать область закрытых тегов для нашей выгоды - всё зависит от дизайна и конкретных нужд. В разных ситуациях мы можем использовать различные способы.

Подсказка 5: Теги выравнивания закрывают другие теги...

Code:

[table]
[tr]
[td]
[color=blue][font=Verdana][size=16px]Текст для примера
[center]Нижний текст для примера
[/td]
[/tr]
[/table]

Текст для примера

Нижний текст для примера

Подсказка 6: Замена прозрачных элементов пробелами...

Я уже говорил об этом несколько месяцев назад в этом посте.
(в нем говорится о том, что можно заменить символы ░ на пробелы, если использовать шрифт monospace - прим. переводчика)

Quote from: ОДИН результат - МЕНЬШЕ знаков

Code:

[center][table]
[tr]
[td]
[font=Monospace][size=10px]█████        █████[/size][/font]
[/td]
[/tr]
[/table][/center]

Quote from: ОДИН результат - БОЛЬШЕ знаков

Code:

[center][table]
[tr]
[td]
[font=Monospace][size=10px]█████[color=transparent]░░░░░░░░[/color]█████
[/td]
[/tr]
[/table][/center]

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

Zedxxx

Member

Offline

Activity: 364
Merit: 22

Re: BBCode - уроки и туториалы

April 01, 2018, 05:18:53 PM

#11

Вот кстати сервис по конвертированию картинок в BBcode
https://morgh.us/pixelate/

Rainbowwww

Full Member

Offline

Activity: 239
Merit: 100

Re: BBCode - уроки и туториалы

April 17, 2018, 08:29:16 AM

#12

Работая над подписью заметил полосы на моем шедевре, разноцветные, вертикальные и они слегка портят вид
Как их можно убрать?

temarazin (OP)

Full Member

Offline

Activity: 224
Merit: 186

Re: BBCode - уроки и туториалы

May 11, 2018, 11:24:26 AM

#13

Quote from: Rainbowwww on April 17, 2018, 08:29:16 AM

Работая над подписью заметил полосы на моем шедевре, разноцветные, вертикальные и они слегка портят вид
Как их можно убрать?

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

msk19

Full Member

Offline

Activity: 364
Merit: 102

ADVANCED UX ON BLOCKCHAIN DAPP

Re: BBCode - уроки и туториалы

May 12, 2018, 09:04:16 PM
Last edit: May 12, 2018, 09:24:43 PM by msk19

#14

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

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

Code:

[center]░▒ ▄█▀▀█▄▒░ ▄██▄░░▀█▄░▄█▀░▒ www.oax.org ▒░
░▒▓ ▐█░▒░░██ ██▄▄██▒░░███░▒ bit.ly/ActiveBounty ▒░
░▒ ▀█▄▄█▀ ██▒░░░██▄█▀░▀█▄▒░ bit.ly/BttANN ▒░]

temarazin (OP)

Full Member

Offline

Activity: 224
Merit: 186

Re: BBCode - уроки и туториалы

May 13, 2018, 07:56:44 AM

#15

Quote from: msk19 on May 12, 2018, 09:04:16 PM

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

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

Code:

[center]░▒ ▄█▀▀█▄▒░ ▄██▄░░▀█▄░▄█▀░▒ www.oax.org ▒░
░▒▓ ▐█░▒░░██ ██▄▄██▒░░███░▒ bit.ly/ActiveBounty ▒░
░▒ ▀█▄▄█▀ ██▒░░░██▄█▀░▀█▄▒░ bit.ly/BttANN ▒░]

А есть скрин с андроида? И какой браузер в андроиде, тоже хром?

msk19

Full Member

Offline

Activity: 364
Merit: 102

ADVANCED UX ON BLOCKCHAIN DAPP

Re: BBCode - уроки и туториалы

May 13, 2018, 10:29:52 AM
Last edit: May 13, 2018, 11:08:37 AM by msk19

#16

Да, в андроиде тоже хром, вижу это так, вот скрин. Помоему не отображаются эти - ░,▀,▓ символы, боюсь если заменить их на пробелы будет еще хуже.

Я помоему придумал, сейчас посмотрю с андроида таблицу символов, должно быть видно какие можно использовать.

temarazin (OP)

Full Member

Offline

Activity: 224
Merit: 186

Re: BBCode - уроки и туториалы

May 13, 2018, 11:06:03 AM

#17

Quote from: msk19 on May 13, 2018, 10:29:52 AM

Да, в андроиде тоже хром, вижу это так, вот скрин. Помоему не отображается этот - ░ символ, боюсь если заменить его на пробелы будет еще хуже.

Посмотрел с двух телефонов - в общем у меня старый андроид (4.3) тоже не отображает некоторые символы. С 6-го адроида всё нормально отображается. Причем от браузера это не зависит - скорее всего в старых андроидах просто нет этих символов в используемом шрифте.

msk19

Full Member

Offline

Activity: 364
Merit: 102

ADVANCED UX ON BLOCKCHAIN DAPP

Re: BBCode - уроки и туториалы

May 13, 2018, 11:23:25 AM
Last edit: May 13, 2018, 12:18:13 PM by msk19

#18

Спасибо что откликнулись. Версия 4.4.2. Странно, захожу на https://unicode-table.com/ru/#2590 с андроида, в таблице вижу все символы... Появилась идея, вставить в код набор символов и посмотреть какие из них будут видны а какие нет, и исходить в дальнейшем уже из этого..
Да, а посмотрел с 6-го, нормально отображается.

LiteNight

Member

Offline

Activity: 378
Merit: 30

♠☠♠

Re: BBCode - уроки и туториалы

November 13, 2018, 10:31:00 PM

#19

Quote from: temarazin on February 22, 2018, 10:35:02 PM

Немного оффтопа. Автор статей не советует использовать конвертеры изображений в bbcode, но тема для меня достаточно интересная. Решил написать простой скриптик для этой цели. Пока получается так:
Скрипт пытаюсь оптимизировать именно под этот форум, пишу на php, так что может и выложу куда-нибудь. Если интересно.

Да не плохо так получается. А есть этот скрипт? Только у меня мембер и три строки, не подойдет? Спасибо за тему!

Подъем с глубины Grin

✭✭✭✭▬▬▬▬ Бионические руки по дешевке ✭✭✭✭███████    \""""""""""""""\      ❰●☠●❱\ GALAGA Star Wars    /✭_     ▄▄▄▌▐██▌█ _Куда разгружать?___
✭✭✭✭▬▬▬▬ Ключ ................ - ◆═╦╗    ✭✭✭✭███████       \ ████████\      █☠☠☠● ▬    ❱❱❱ ❱❱❱         ▬ ✭ ✭ ███████▌█▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄█
▬▬▬▬▬▬▬ Это флаг США! Ура!))) ███████████▌     \░░░░░░░░\ ❰●☠●❱/                        ✭ \   ▀(@)▀▀▀▀▀▀▀(@)(@)▀▀▀▀▀▀▀▀▀▀▀(@) (@ )