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

[ErikPshat]

Вообщем нарисовал я тут такой код, чтобы можно было подкрашивать нужные слова цветом бэкграунда, с закруглениями, тенями фона и текста, сделал уже расцветки на все шаблоны стилей форума и тут пришла идея сделать его не только со строго закреплённым цветом, но чтобы он был универсальным 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

1. Запускаете программку и ставите внизу галочку на "Topmost", чтобы программа всегда была поверх всех окон.
2. Открываете окно браузера или любой другой программы, картинки и т.п., откуда вы хотите сдампить точный код цвета.
3. Нажимаете кнопку "Eye Dropper", курсор принимает вид крестика, наводите на область экрана с нужным цветом, появляется лупа с увеличенным отображением этой области и таким образом можете с точностью до пикселя, снять цвет интересующего пикселя.
4. Нажимаете левой кнопкой мыши на выбранном цвете и он захватывается программой.
5. Копируете полученный "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 кнопок для сайта

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

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