[FAQ] bb-код [DECOR] - безграничные возможности оформления тем ;)

ErikPshat · 24.06.2012, 00:30

Вообщем нарисовал я тут такой код, чтобы можно было подкрашивать нужные слова цветом бэкграунда, с закруглениями, тенями фона и текста, сделал уже расцветки на все шаблоны стилей форума и тут пришла идея сделать его не только со строго закреплённым цветом, но чтобы он был универсальным bb-кодом, по нажатию на кнопку. И идея вдруг сразу просчиталась и материализовалась. Получился точно такой же bb-код, как и многие другие, с возможностью использовать опцию для вставки цвета бэкграунда и картинки на фон.

Как это работает?

У нас теперь появился новый BB-код [DECOR="..."]

Нажав на кнопку в панели быстрого ответа, открывается окошко с запросом вставить опцию для BB-кода.
Туда нужно вставить код цвета в следующем формате: #RRGGBB, где:
RR - оттенок красного;

GG - оттенок зелёного;

BB - оттенок синего.

Значения могут быть от 00 до FF (в шестнадцатеричном исчислении) для каждого оттенка, либо стандартизированными фразами, типа Red, Green, Blue, DarkOrange, White и т.д.
Если вы не знаете названия цвета или не можете в уме сложить оттенки 3-ёх цветов, чтобы получить необходимый цвет, тогда воспользуйтесь любой графической программкой, как фотошоп, либо олайнсервисом, где есть палитра цветов, а проще иметь под рукой специально предназначенную для этого прожку, такую, как ColourPicker. Она может снимать пипеткой код цвета с любой области экрана, сайта или форума, а так же имеет свою палитру цветов, где вы можете выбрать любой из 16 миллионов 777 тысяч 216-ти оттенков.

24-06-2012 1-11-05.png

Запускаете программку и ставите внизу галочку на "Topmost", чтобы программа всегда была поверх всех окон.

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

Нажимаете кнопку "Eye Dropper", курсор принимает вид крестика, наводите на область экрана с нужным цветом, появляется лупа с увеличенным отображением этой области и таким образом можете с точностью до пикселя, снять цвет интересующего пикселя.

Нажимаете левой кнопкой мыши на выбранном цвете и он захватывается программой.

Копируете полученный "HTML code", нажав напротив кнопку "copy" и вставляете в форму опции на форуме.

Чтобы вставить ссылку на картинку бэкграунда, то после цвета сразу через пробел пишем путь к картинке: url(http://www.путь_к_картинке.gif). Вот так:

#494949 url(https://www.pspx.ru/cleardoc/misc/dar...nd-stripes.gif)

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

url(https://www.pspx.ru/cleardoc/misc/dar...nd-stripes.gif)

Чтобы покрасить цвет самого шрифта текста, а не фона, то просто, как обычно, внутри кода [DECOR] обрамляем текст обычным тегом цвета. То есть, таким образом:

[DECOR="#0000FF"][color="White"]здесь обычный белый текст под фоном #0000FF[/color][/decor]

Либо цвет текста можно сразу покрасить в коде [DECOR], дописав, после кода цвета фона или фоновой картинки, через точку с запятой - COLOR: #FFFFFF, где #FFFFFF есть белый цвет (White). То есть, код в Декоре будет выглядеть так, например:

[DECOR="#0000FF; COLOR: #FFFFFF"]здесь обычный белый текст под фоном #0000FF[/decor]

Чтобы текст, заключённый в Декоре, не выглядел слишком просто и плоско, то нужно к тексту применить ТЕНИ. Для этого, мы должны вписать в Декор код тени, отделяясь от других параметров через точку с запятой - text-shadow: 1px 1px 1px #6E6E6E. Для примера, С ТЕНЯМИ и БЕЗ ТЕНЕЙ выглядеть это будет так:

[DECOR="url(images/bgnoise.gif); COLOR: #FFFFFF; text-shadow: none"]
здесь обычный белый текст с фоновым рисунком и без теней
[/decor]

[DECOR="url(images/bgnoise.gif); COLOR: #FFFFFF; text-shadow: 1px 1px 1px #6E6E6E"]
здесь обычный белый текст с фоновым рисунком и с тенями
[/decor]

Чтобы вообще ничем не окрашивать фон текста, но хотите применить эффект фона, то когда в опцию будет выведен запрос на обязательную вставку параметра, просто вставьте любой символ. Затем, в теле сообщения уберите фальшивую опцию. То есть, опция декора в кавычках должна быть пустой: [DECOR=""]

Если вообще не вставлять код цвета в опцию, то цвет фона будет прозрачным.

Цвета по стилям для разделов

Общие стили:

#FF7722; color: #fff; text-shadow: 1px 1px 1px #6E6E6E

Задавайте срочные вопросы здесь!

Стиль раздела XBOX:

#6B9828; color: #fff; text-shadow: 1px 1px 1px #6E6E6E

Задавайте срочные вопросы здесь!

Стиль раздела PS3:

#3362A3; color: #fff; text-shadow: 1px 1px 1px #6E6E6E

Задавайте срочные вопросы здесь!

Стиль раздела NINTENDO:

#008CE4; color: #fff; text-shadow: 1px 1px 1px #6E6E6E

Задавайте срочные вопросы здесь!

Стиль раздела ANDROID:

#B1CC47 url(cleardoc/misc/app-header-stripes.gif); color: #fff; text-shadow: 1px 1px 1px #6E6E6E

Задавайте срочные вопросы здесь!

#494949 url(cleardoc/misc/dark-background-stripes.gif); color: #B1CC47; text-shadow: 1px 1px 1px #6E6E6E

Задавайте срочные вопросы здесь!

Стиль раздела APPLE:

#000000; color: #fff; text-shadow: 1px 1px 1px #6E6E6E

Задавайте срочные вопросы здесь!

Онлайн-генератор CSS3 кнопок для сайта

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

Скачать быстро и на высокой скорости