Топик

Lenald (») 17 авг 01:13

ИНТЕРЕСНЫЕ ПРИЁМЫ

Наконец, когда мы разобрались с основными принципами, как делать льзя и нельзя, мы можем посмотреть, "а как у них" и другие интересные приемы (которые я встречал пока только у себя).

В приемной клана Sacrifice Justice есть очень интересный прием: градиент текста:

Sacrifice Justice

Его код:
[center][b][color=#9335b1]Sa[/color][color=#a94495]cri[/color][color=#bf5379]fice[/color] [color=#d5625d]Ju[/color][color=#eb7141]st[/color][color=#ff8025]ice[/color][/b][/center]

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

Lenald (») 19 авг 06:19

В том же втором посте была очень классная штука из картинок, которой просто невозможно не восхищаться:

✧

Код:
[center][color=#f0f]✧[img=20]/view/image/art/bg-listselect-lr.png[/img] [img=30]/view/image/art/bg-listselect-lr.png[/img] [img=30]/view/image/art/bg-listselect-lr.png[/img] [img=20]/view/image/art/bg-listselect-lr.png[/img]✧[img=40]/view/image/art/bg-listselect-lr.png[/img] [img=50]/view/image/art/bg-listselect-lr.png[/img] [img=40]/view/image/art/bg-listselect-lr.png[/img]✧[img=51]/view/image/item/herb7.png[/img]✧[img=40]/view/image/art/bg-listselect-lr.png[/img] [img=50]/view/image/art/bg-listselect-lr.png[/img] [img=40]/view/image/art/bg-listselect-lr.png[/img]✧[img=20]/view/image/art/bg-listselect-lr.png[/img] [img=30]/view/image/art/bg-listselect-lr.png[/img] [img=30]/view/image/art/bg-listselect-lr.png[/img] [img=20]/view/image/art/bg-listselect-lr.png[/img] ✧[/color][/center]

Lenald (») 19 авг 06:31

    Автор этих шедевров - Mafia Sj - блестяще управляется с такими неупотрибимыми вещами как css-спрайты (второй пример и не только), что лишний раз доказывает, что важны не инструменты, а умения.
    Искренне рекомендую прогуляться по их форуму!

    Еще один интересный пример, о котором ни слова не сказано в учебнике по bb-кодам - это цветной текст с подчеркиванием другим цветом, отличным от стандартных.

Лазурный текст с фиолетовым подчеркиванием

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

Код:
[color=#c0f][u][center][/color][color=#0fc][b]Лазурный текст с фиолетовым подчеркиванием[/b][/color][/center][/u]

    Наличие выравнивания по центру или по правому краю обязательно - без них не будет работать. А вот тег [b] - необязателен. Он здесь лишь для улучшения читабельности.
    А поломки разметки заключаются в следующем: если вы после этого кода продолжите просто писать текст - он будет не дефолтного голубого цвета (или песочного, если вы модератор), а цвета подчеркивания. Выход - объявить цвет.
Отредактировал(а) Lenald, 26 авг 00:15

Lenald (») 19 авг 06:38

А вот несколько интересных приемов со списками и пунктами в них:

Пункт списка
Пункт списка

[color=#bbc][ul]Заголовок[li]текст[/li][/ul][/color]

Выглядит скучновато, правда? Давайте разукрасим:

Заголовок

Суть пункта

Длинный текст пункта, который может быть хоть в несколько абзацев

Суть пункта

Длинный текст пункта

[ul][b][color=#c0f]Заголовок[/color][/b][color=#0fc][li][b]Суть пункта[/b][/li][/color][color=#bbc]Текст пункта[/color][/ul]

Обратите внимание: диск пункта списка окрашивается в тот цвет текста, в который заключен пункт списка (или весь список целиком). И чтобы раскрасить список - придется заниматься цветовыми махинациями.

Если немного переделать пример выше - то мы получим один из моих любимых вариантов списка:

Суть пункта - длинное или не очень описание пункта.
Суть пункта - длинное или не очень описание пункта.

[ul][li][b]Суть пункта[/b] [color=#bbc]- описание пункта.[/color][/li][/ul]

Как видно, здесь сам пункт списка не окрашен искуственно, поэтому принимает дефолтный пользовательский цвет #bce4f4. Засчёт того, что мы никак не окрашивали пункт - мы можем внутри самого пункта менять цвет. Так мы получили пункт с голубым диском и "заголовком", но с описанием другого цвета, продолжающимся с той же строки. Если вы искренне боитесь стать модератором или администратором, или уже стали, но не хотите видеть #eff0a1 - то этот способ вам не подходит.
Отредактировал(а) Lenald, 26 авг 00:15

Lenald (») 19 авг 07:47

[

И конечно же можно использовать [li] не только внутри списка.

Внутри списка, как вы могли заметить, это текст с отступом слева, а на этом отсутпе располагается диск.

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

Немного магии - и мы получаем мощный инструмент оформления, имеющий сразу два с половиной разных поведения.

А ещё можно сымитировать [li] и получить нумерованный список:

1. Суть пункта

- описание пункта (длинное или короткое)

2. Суть пункта

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

[ul][b]1. Суть пункта[/b] [color=#bbc]- описание пункта[/color][br][b]2. Суть пункта[/b] [color=#bbc]- описание пункта[/color][/ul]

Естественно, похожий результат будет, если убрать [ul][/ul]. Тогда не будет отступа слева, а [br] можно будет заменить простым переносом строки, что сэкономит символы и улучшит читаемость "исходника".

Делать вложенные списки (т.е. вложить [ul] в [ul]) здесь нельзя.
Отредактировал(а) Lenald, 26 авг 00:17

Lenald (») 19 авг 08:06

Если вам нужно привести пример кода, но чтобы он не обрабатывался, то его нужно поломать. Препроцессор, который обрабатывает bb-коды, ищет строго определённые последовательности. Если находит - превращает в html-сущности, а всё, что не подходит - оставляет как есть. Есть 2 способа сломать код:

Порвать - вставить в код пробел (обычно это делают сразу после открывающей скобки);
Оформить - разбить код на оформленные фрагменты и неоформленные.

    Первый способ понятен, второй требует объяснений. Итак, у вас есть [i]текст[/i]. Если так и написать - вы получите курсивное слово "текст", потому что препроцессор видит это так:
>Начало курсива
    "текст"
>Конец курсива

    Суть метода оформления заключается в изолировании части кода, и в результате препроцессор не видит картины в целом, а видит какие-то фрагменты. Обычно этого добиваются, делая каждую открывающую скобку жирной: [b][[/b]i]текст[b][[/b]/i]. В результате получается такая строка: [i]текст[/i].
    Это происходит потому, что теперь для препроцессора существует два участка, которые нужно выделить жирным, и какой-то текст:
>жирный
    "["
>/жирный
"i]текст"
>жирный
    "["
>/жирный
"/i]"

    Очевидно, что "/i]" - не код, поэтому препроцессор проходит мимо.
    Но, например, мне внезапно жирная скобка режет глаз, поэтому я использую более сложный вариант: объявление размера шрифта - [fоnt] Это занимает больше символов, но выглядит как простой текст.
    Если давать код стандартным шрифтом, то очень удобно в первом разрыве объявить [fоnt=medium], а во втором - отменить (а шрифт как был средним, так и останется).
    Если же вы, как и я, даёте код мелким шрифтом - придётся в каждом разломе отменять мелкий шрифт и тут же его объявлять. Код становится трудночитабельным и громоздким (например, рыбный код навигации занимает 1414 символов). Если дорожите своей неокрепшей психикой - не делайте так.
Отредактировал(а) Lenald, 26 авг 00:18

Lenald (») 19 авг 08:20

    В качестве примера вот вам код кода цветного подчёркивания:
[color=#fec][font=small][color=#c0f[/font][font=small]][[/font][font=small]u][center[/font][font=small]][[/font][font=small]/color][color=#0fc[/font][font=small]][[/font][font=small]b]Лазурный текст с фиолетовым подчеркиванием[/b[/font][font=small]][[/font][font=small]/color][/center[/font][font=small]][[/font][font=small]/u][/font][/color]

    Я специально подкрасил конструкции, разрывающие код, чтобы вам было проще ориентироваться. В любом случае, ломание кода оформлением с помощью объявления шрифта - очень символожрущий способ. Да чего это я! Вот вам цифры:

    Код цветного подчёркивания - 113 символов;
    Код кода цветного подчёркивания - 342 символа;
    Код кода кода цветного подчёркивания + подкраска - 1617 символов.
Отредактировал(а) Lenald, 26 авг 00:18

Lenald (») 19 авг 09:06

    Есть ещё одна очень крутая вещь, которой я не встречал ещё нигде, кроме как у себя в Эстетике стиля и на странице с информацией "что такое доблесть" (но она не в счёт - она сделана админами и с помощью не bb-кодов, а непосредственно html), поэтому я с чистой совестью считаю себя первопроходцем! А речь идёт о якорях.
    Не вдаваясь в подробности, якорь - это ссылка не на страницу вообще, а на определённую область страницы. Например, эта ссылка откроет страницу с информацией о доблести сразу на разделе о турнире. Фактически, она открывает страницу целиком, и сразу скроллит к тому месту, куда мы заблаговременно "кинули якорь".
    Имея в своём арсенале только html, мы можем в качестве якоря использовать только id html-элемента.
    Т.к. приведённый пример - ссылка на якорь, прописанный в коде - мы можем сослаться на фрагмент поста, потому что там лежит якорь. Однако, сами мы якорь в произвольный участок произвольного поста положить не можем, поэтому нам придётся искать и надеяться.
    К счастью, оказалось, что каждый пост имеет элемент с уникальным id. Это конечно, не произвольное место поста, но сослаться на, скажем, девятый пост - тоже круче, чем на начало первой страницы с комментарием "листайте до 9 поста".

    Итак, как это сделать:
    Для начала нужно узнать id поста. Для этого в браузере с компьютера щёлкаем по посту правой кнопкой мыши и в открывшемся меню нажимаем "просмотреть код" (или проинспектировать элемент - зависит от браузера). В открывшемся окне мы увидим код страницы. Строчка с кодом области, по которой мы щёлкнули, будет выделена. А теперь поднимаемся глазами вверх по лесенке, пока не увидим такой код:
<span id="msgДЛИННОЕЧИСЛО"></span>
    Вот это "msgДЛИННОЕЧИСЛО" - и есть id поста. Копируем его.
    Дальнейшая магия заключается в том, что мы создаём ссылку на страницу с этим постом и дописываем "#msgДЛИННОЕЧИСЛО".
    Например, так выглядит ссылка на этот пост:
[url=thread?id=736660#msg11030691][color=#cfc][u]Ссылка на этот пост[/u][/color][/url]
Отредактировал(а) Lenald, 26 авг 00:23

Lenald (») 19 авг 09:13

Можно всё это сделать и с телефона (опять же, через браузер), но это будет не так удобно:

1) Открываем нужную страницу;
2) В адресной строке дописываем "view-source:" перед адресом. Например:
view-source:mrush.mоbi/thread?id=736660
3) Попадаем на странтцу с исходным кодом страницы. Какой каламбур...
4) Воспользовавшись чем-нибудь, вроде "найти на странице", вводим фрагмент текста поста и находим строки кода этого самого поста;
5) Медленно и внимательно поднимаемся вверх по коду, пока не находим вожделенный span с id поста;
6) Действуем далее по инструкции из поста выше...
Отредактировал(а) Lenald, 26 авг 00:25

Lenald (») 20 авг 23:50

Глава 9

Глава 11

Оглавление

Отредактировал(а) Lenald, 19 сен 08:11

Lenald закрыл(а) топик