[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 кнопок для сайта

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

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

ErikPshat · 24.06.2012, 13:40

Старый формат кода, если использовали, то исправляйте:

[decor-orange].........[/decor-orange]       = [decor="#FF7722"]...[/decor]
[decor-green]..........[/decor-green]        = [decor="#6B9828"]...[/decor]
[decor-blue]...........[/decor-blue]         = [decor="#3362A3"]...[/decor]
[decor-sky]............[/decor-sky]          = [decor="#008CE4"]...[/decor]
[decor-android]........[/decor-android]      = [decor="#B1CC47 url(cleardoc/misc/app-header-stripes.gif)"]...[/decor]
[decor-android-dark]...[/decor-android-dark] = [decor="#494949 url(cleardoc/misc/dark-background-stripes.gif)"]...[/decor]
[decor-apple]..........[/decor-apple]        = [decor="#000000"]...[/decor]

Несколько текстур, для фона

**KirJan-DeSign** · 24.06.2012, 14:25

вот ещё )

http://www.coolwebmasters.com/templa...es/dlet-bg.gif
http://d2f8dzk2mhcqts.cloudfront.net...pattern_14.jpg
http://img12.nnm.ru/d/9/d/8/7/0314f1...6fa9b_prev.jpg

http://argusfon.com/besshovnye-fony/

http://www.coolwebmasters.com/backgr...g-website.html

................................................................................ .....................................

с травой ваще прикольно)

StepS · 24.06.2012, 16:34

с п е к т р ! р т к е п с

ErikPshat · 25.06.2012, 02:19

Дополнения...

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

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

Убрал жирность с тега DECOR, т.к. не красиво смотрится жирный шрифт в некоторых местах.
Если требуется, вы сами можете поставить жирность тегом Bold [B] внутри декора.

Убрал принудительную жирность(font-weight: 700) для текста в [.DECOR] иначе кругом принудительно было жирным, например в [LIST].

ErikPshat · 26.06.2012, 19:57

Ну так как?
Я всё-таки хочу избавиться от первых BB-кодов, которые прописал для всех разделов.
Поэтому решил удалить их. Если вы где-то использовали их тогда, то следует исправить теги.

Все эти стили для разделов поместил в шапку, вам нужно только скопировать нужный, в соответстии со стилем раздела, затем вставить по нажатию кнопки

в окно опции.

Дополнительные параметры опции

Как вам рыбки?

Использовалось 2 фона один поверх другого.

P.S. Почитайте 1-ое сообщение...

**COOLERbyPSP** · 28.06.2012, 12:42

http://subtlepatterns.com/?page_id=854
Хорошие паттерны, не напрягают глаза.

Или на исходниках: https://github.com/subtlepatterns/SubtlePatterns

StepS · 30.06.2012, 19:28

а можно как-то вырубить тень в декоре параметром? иногда напрягает

ErikPshat · 30.06.2012, 19:32

попробуй вставить через точку-с-запятой:
; text-shadow: none - без теней

; text-shadow: 1px 1px 1px #6E6E6E - с тенями по умолчанию

text-shadow: <сдвиг по x> <сдвиг по y> <радиус размытия> <цвет тени>

Собсно вот параметры http://htmlbook.ru/css/text-shadow

По-моему не работает, т.к. в параметрах уже указаны тени.
Собственно вот он сам скрипт BB-кода:

<span style="
display: inline-block;
background: {option};
border-radius: 5px;
box-shadow: 2px 2px 2px -1px rgba(0, 0, 0, 0.400), 0px 0.9em 0.5em -0.2em rgba(255, 255, 255, 0.196) inset;
font-weight: normal;
padding: 0.2em 0.4em 0.2em;
text-shadow: 1px 1px 1px #6E6E6E;
">{param}</span>

Где {option} - это и есть опции, которые подставляются нами в окне опций, примитивно ЦВЕТ и URL фона, что можно вставлять в background, в свою очередь дополнительные параметры имеют ещё свои подпараметры, а подпараметры имеют ещё подподпараметры...
Где {param} - это тот текст, который мы обрамляем данными тегами.

StepS · 30.06.2012, 21:16

+1 спасибо!

https://www.pspx.ru/forum/showpost.ph...3&postcount=32

ErikPshat · 01.07.2012, 04:46

Сообщение от StepS

https://www.pspx.ru/forum/showpost.ph...3&postcount=32

Ну вот, пошли жалобы на тени )))
Если их убрать, тогда обычные фоновые выделения будут ваще ужасно плоско смотреться.
Но на самом деле обычный мелкий текст с тенями не очень хорошо смотрится на фоне.
Ну и что будем делать, убираем из BB-кода тени? Будем сами где надо добавлять.

Хорошо, убрал. Так же будем сами по необходимости добавлять тени.

По-умолчанию код такой: через ; пишем тень: text-shadow: 1px 1px 1px #6E6E6E

Теперь смотрите, как выглядет шапка и последующие сообщения без теней.
А вот наглядный пример этой строчки, но с тенью...

По-умолчанию код такой: через ; пишем тень: text-shadow: 1px 1px 1px #6E6E6E

Пример этого кода: [DECOR="; text-shadow: 1px 1px 1px #6E6E6E"]

1px - первая цифра означает сдвиг по горизонтали вправо (отрицательное число - влево).
1px - вторая цифра означает сдвиг по вертикали вниз (отрицательное число - вверх).
1px - третья цифра означает радиус размытия тени (не обязательный параметр, можно вообще не размывать).
#6E6E6E - цвет тени. В данном случае подобран темновато-серый цвет (не обязательный параметр; если не указано, используется цвет текста; можно ставить либо первым значением, либо последним.)

Примечание: можно на один и тот же участок задавать несколько теней, отделяя каждую тень(все 4 значения) запятой.
Пример: [DECOR="; text-shadow: 1px 1px 1px #6E6E6E", -1px -1px 5px #F0F0F0"]
Когда слагаемые цвета (RGB) одинаковые, тогда получаются чистые оттенки серого от чёрного #000000 к белому #FFFFFF.
Например # 6E + 6E + 6E (#6E6E6E) или # 95 + 95 + 95 (#959595) = чистый серый оттенок, а # 5A + 92 + F7 (#5A92F7) = цветной оттенок.
Но тень в природе всегда бывает серой )))

Творите и дерзайте, всё в ваших руках

А если не интересно - проходите мимо

Делаем гравировку по металлу

Пишем чёрным прямо по чёрному

Гори-гори звезда и не сгорай! Здесь 5 теней!

Ищё скрипт

ErikPshat · 01.07.2012, 07:10

Усваиваем следующий урок... Делаем border-image.
Например из такого рисунка:

border.png

Ну и пишем такой код
И смотрим результат

В чём фокус?
Изображение делится на 4 угла, 4 центральных части (без углов) и самого центра.

Мы параметром border: 28px; указываем размер отображаемой области рамки.
Следом параметром border-image: url(путь к картинке) указываем на саму картинку.
Затем к нему подставляем размеры каждой стороны изображения. Если они одинаковы, то выставляем одну цифру, если нет, то для каждой стороны.
Далее выставляем нужный из 3-ёх параметров дважды - по высоте и по ширине, действующих на центральную часть сторон:
- stretch - растягивает рисунок границы до размеров элемента. Это значение используется по умолчанию.
- repeat - повторяет рисунок границы.
- round - повторяет рисунок и масштабирует его так, чтобы на стороне элемента оказалось целое число изображений.

Да, тут есть такие особенности для разных браузеров:

Firefox поддерживает свойство -moz-border-image.
Safari, Chrome и iOS поддерживают свойство -webkit-border-image.
Opera поддерживает свойство -o-border-image
В будущем все браузеры должны стандартизироваться к общему свойству border-image

Поэтому в коде нужно просто повторить эти параметры для каждого браузера, через ;
Выглядеть код будет так:

[DECOR="; border: 28px;
-moz-border-image: url(https://www.pspx.ru/forum/attachment.php?attachmentid=7195) 28 round round;
-webkit-border-image: url(https://www.pspx.ru/forum/attachment.php?attachmentid=7195) 28 round round;
-o-border-image: url(https://www.pspx.ru/forum/attachment.php?attachmentid=7195) 28 round round;
border-image: url(https://www.pspx.ru/forum/attachment.php?attachmentid=7195) 28 round round;"]

Подробнее...

StepS · 01.07.2012, 13:34

В теме с промодом стало в 100500 раз лучше

А тени из твоего предыдущего поста очень порадовали

классные эффекты, ещё неплохо смотрится при выделении мышью

ErikPshat · 01.07.2012, 17:13

Да, забыл добавить, что во время расширенного редактирования нужно убирать галочку "Автоматически вставлять ссылки",
иначе к изображениям будет автоматом добавляться код ссылок [url]ссылка[/url]

[IMG]http://img713.**************/img713/5852/01072012171703.png[/IMG]

То есть, ваш код работать не будет, т.к. вместо этого:

#FF00FF url(https://www.pspx.ru/forum/background.png)

в сообщении при сохранении получится такое:

#FF00FF url([url]https://www.pspx.ru/forum/background.png[/url])

ErikPshat · 07.07.2012, 11:59

Ну и ещё нарисовал шаблончик темы оформления

Тетрадь в клеточку - небо в полосочку

Код самый элементарный, уже всё подготовлено, не забывайте, тут 2 декора - один в другом, поэтому в конце нужно так же закрывать 2-мя тегами [/DECOR][/DECOR]:

[DECOR="url("attachment.php?attachmentid=7237") repeat-y; border-right: medium double gray; z-index: -1000;"]
[DECOR="; margin-left: 55px;"]
Здесь находится ваш текст или инструкция
[/DECOR]
[/DECOR]

Объясняю, что означает код в декоре:

url("attachment.php?attachmentid=7237") repeat-y; - это ссылка на кусочек картинки, которая размножается по оси Y, т.е. по вертикали.
border-right: medium double gray; - бордюр справа: средний размер, стиль раздвоенный, серый цвет.
z-index: -1000; - смещение по 3-ей оси координат, т.е. наложение сверху.

Внутри лежит ещё один декор, который раздвигает внешние границы:

margin-left: 55px; - отодвигает область внутреннего декора на 55 пикселей от левого края. Там, где как раз на картинке находится оплётка тетради, иначе текст бы начинал печататься прямо по оплётке.

Пример оформления здесь: https://www.pspx.ru/forum/showthread....45#post1007845

**akela1979** · 07.07.2012, 12:58

Отличный шаблон

, использовал его в своей теме.
https://www.pspx.ru/forum/showthread.php?t=92892&page=36

А как насчет таких бэкграундов, возможно?
http://www.connectusers.com/x/underwater_connect.swf

ErikPshat · 07.07.2012, 14:21

На бэкграунд скорее всего не получится. Разве что только так выводить.

Флэш

Да и весит оно почти мегабайт (816 kb), а это слишком много для страницы форума, по сравнению с бэкграундами в 2,5 кб.

ErikPshat · 07.07.2012, 17:35

pauk.gif

Mожно на фон поставить картинку или несколько, а уже в само сообщение добавить SWF с прозрачностью поверх картинки декора. Тогда будет казаться, что весь фон анимированный. Правда SWF почему-то у меня вставился без прозрачности, хотя точно знаю, что у него есть прозрачность. Добавления WMODE с TRANSPARENT почему-то не помогает, хотя может это не работает только в Опере, фиг знает, не проверял. А вот гифка прозрачная по любому будет отображаться с прозрачностью.

ErikPshat · 07.07.2012, 21:49

Найдите 2 отличия между

и

**KirJan-DeSign** · 07.07.2012, 23:02

[PIC="RIGHT"]https://www.pspx.ru/forum/images/smilies/blush.gif[/PIC]
[FLOAT="RIGHT; margin: 8px"][IMG]https://www.pspx.ru/forum/images/smilies/blush.gif[/IMG][/FLOAT]

а чёт не на одной высоте? и в чём прикол? =)