PSPx форум
Страница 1 из 3 1 2 3
Показывать 40 сообщений этой темы на одной странице

PSPx форум (https://www.pspx.ru/forum/index.php)
-   BB-коды форума (https://www.pspx.ru/forum/forumdisplay.php?f=424)
-   -   [FAQ] bb-код [DECOR] - безграничные возможности оформления тем ;) (https://www.pspx.ru/forum/showthread.php?t=99727)

ErikPshat 24.06.2012 00:30
[FAQ] bb-код [DECOR] - безграничные возможности оформления тем ;)
 
Вложений: 1

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

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

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

Нажав на кнопку https://www.pspx.ru/forum/cleardoc/editor/marker.gif в панели быстрого ответа, открывается окошко с запросом вставить опцию для BB-кода.
Туда нужно вставить код цвета в следующем формате: #RRGGBB, где:
  • RR - оттенок красного;
  • GG - оттенок зелёного;
  • BB - оттенок синего.
Значения могут быть от 00 до FF (в шестнадцатеричном исчислении) для каждого оттенка, либо стандартизированными фразами, типа Red, Green, Blue, DarkOrange, White и т.д.
Если вы не знаете названия цвета или не можете в уме сложить оттенки 3-ёх цветов, чтобы получить необходимый цвет, тогда воспользуйтесь любой графической программкой, как фотошоп, либо олайнсервисом, где есть палитра цветов, а проще иметь под рукой специально предназначенную для этого прожку, такую, как ColourPicker. Она может снимать пипеткой код цвета с любой области экрана, сайта или форума, а так же имеет свою палитру цветов, где вы можете выбрать любой из 16 миллионов 777 тысяч 216-ти оттенков.
  1. Запускаете программку и ставите внизу галочку на "Topmost", чтобы программа всегда была поверх всех окон.
  2. Открываете окно браузера или любой другой программы, картинки и т.п., откуда вы хотите сдампить точный код цвета.
  3. Нажимаете кнопку "Eye Dropper", курсор принимает вид крестика, наводите на область экрана с нужным цветом, появляется лупа с увеличенным отображением этой области и таким образом можете с точностью до пикселя, снять цвет интересующего пикселя.
  4. Нажимаете левой кнопкой мыши на выбранном цвете и он захватывается программой.
  5. Копируете полученный "HTML code", нажав напротив кнопку "copy" и вставляете в форму опции на форуме.

  • Чтобы вставить ссылку на картинку бэкграунда, то после цвета сразу через пробел пишем путь к картинке: url(http://www.путь_к_картинке.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=""]

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





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

Общие стили:

https://www.pspx.ru/forum/cleardoc/editor/marker.gif
#FF7722; color: #fff; text-shadow: 1px 1px 1px #6E6E6E

Задавайте срочные вопросы здесь!
Стиль раздела XBOX:

https://www.pspx.ru/forum/cleardoc/editor/marker.gif
#6B9828; color: #fff; text-shadow: 1px 1px 1px #6E6E6E

Задавайте срочные вопросы здесь!
Стиль раздела PS3:

https://www.pspx.ru/forum/cleardoc/editor/marker.gif
#3362A3; color: #fff; text-shadow: 1px 1px 1px #6E6E6E

Задавайте срочные вопросы здесь!
Стиль раздела NINTENDO:

https://www.pspx.ru/forum/cleardoc/editor/marker.gif
#008CE4; color: #fff; text-shadow: 1px 1px 1px #6E6E6E

Задавайте срочные вопросы здесь!
Стиль раздела ANDROID:

https://www.pspx.ru/forum/cleardoc/editor/marker.gif
#B1CC47 url(cleardoc/misc/app-header-stripes.gif); color: #fff; text-shadow: 1px 1px 1px #6E6E6E

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

https://www.pspx.ru/forum/cleardoc/editor/marker.gif
#494949 url(cleardoc/misc/dark-background-stripes.gif); color: #B1CC47; text-shadow: 1px 1px 1px #6E6E6E

Задавайте срочные вопросы здесь!
Стиль раздела APPLE:

https://www.pspx.ru/forum/cleardoc/editor/marker.gif
#000000; color: #fff; text-shadow: 1px 1px 1px #6E6E6E

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


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

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

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

ErikPshat 24.06.2012 13:40
Вложений: 13
Старый формат кода, если использовали, то исправляйте:
Код:
[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-кодов, которые прописал для всех разделов.
Поэтому решил удалить их. Если вы где-то использовали их тогда, то следует исправить теги.

Все эти стили для разделов поместил в шапку, вам нужно только скопировать нужный, в соответстии со стилем раздела, затем вставить по нажатию кнопки https://www.pspx.ru/forum/cleardoc/editor/marker.gif в окно опции.


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

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

Тогда нужно просто добавить параметр [margin] - отступ вокруг блока.

Вот пример короткого блока:

Всем привет!

А вот тоже самое, с использованием параметра margin:

Всем привет!

То есть, хитрость заключается в том, что параметр margin делает отступы вокруг блока.
Но, когда мы делаем блок DECOR, нам не нужно делать отступы вокруг него, хотя можно, нам требуется сделать расширение блока внутри.

Поэтому идём на хитрость.
Создаём блок фона DECOR с текстом, а затем в этом блоке создаём ещё один блок DECOR и применяем к нему margin.
Таким образом мы внутренний DECOR расширяем, раздвигая внешний.
То есть, вставляем следующий код, пример:
  • #FF00FF url(attachment.php?attachmentid=7068); margin: 50px 400px
Можно опустить некоторые параметры, например цвет и ссылку на картинку, но [;] нужно оставить, т.е. так:
  • ; margin: 50px 400px
  • Первое значение 50px - означает отступы сверху и снизу.
  • Второе значение 400px - означает отступы слева и справа.
  • Если использовать 4 параметра, то можно регулировать отступы по отдельности в следующем порядке: сверху, справа, снизу, слева.
  • Если использовать 3 параметра, то можно регулировать отступы по отдельности в следующем порядке: сверху, слева-справа, снизу.
  • Если использовать один параметр, то отступы применяются со всех сторон одинаково.

Всем привет!
Всем привет!
Всем привет!Всем привет!
Всем привет!


Как вам рыбки? :crazy: Использовалось 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
https://www.pspx.ru/forum/cleardoc/bu...ost_thanks.gif

+1 спасибо!

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

ErikPshat 01.07.2012 04:46
Цитата:
Сообщение от StepS (Сообщение 1041875)
Ну вот, пошли жалобы на тени )))
Если их убрать, тогда обычные фоновые выделения будут ваще ужасно плоско смотреться.
Но на самом деле обычный мелкий текст с тенями не очень хорошо смотрится на фоне.
Ну и что будем делать, убираем из 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) = цветной оттенок.
Но тень в природе всегда бывает серой )))

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

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

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

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


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


Ищё скрипт
не пойми что, но можно подправить

такая пунктирная рамочка

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

Вложение 7195


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


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


В чём фокус?
Изображение делится на 4 угла, 4 центральных части (без углов) и самого центра.
  1. Мы параметром border: 28px; указываем размер отображаемой области рамки.
  2. Следом параметром border-image: url(путь к картинке) указываем на саму картинку.
  3. Затем к нему подставляем размеры каждой стороны изображения. Если они одинаковы, то выставляем одну цифру, если нет, то для каждой стороны.
  4. Далее выставляем нужный из 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 раз лучше :good:
А тени из твоего предыдущего поста очень порадовали :) классные эффекты, ещё неплохо смотрится при выделении мышью

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

Ну и ещё нарисовал шаблончик темы оформления :D
  • Тетрадь в клеточку - небо в полосочку

Код самый элементарный, уже всё подготовлено, не забывайте, тут 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]
Объясняю, что означает код в декоре:
  1. url("attachment.php?attachmentid=7237") repeat-y; - это ссылка на кусочек картинки, которая размножается по оси Y, т.е. по вертикали.

  2. border-right: medium double gray; - бордюр справа: средний размер, стиль раздвоенный, серый цвет.

  3. z-index: -1000; - смещение по 3-ей оси координат, т.е. наложение сверху.

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

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

akela1979 07.07.2012 12:58
Отличный шаблон:good:, использовал его в своей теме.
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
Вложений: 2
Вложение 7241
Mожно на фон поставить картинку или несколько, а уже в само сообщение добавить SWF с прозрачностью поверх картинки декора. Тогда будет казаться, что весь фон анимированный. Правда SWF почему-то у меня вставился без прозрачности, хотя точно знаю, что у него есть прозрачность. Добавления WMODE с TRANSPARENT почему-то не помогает, хотя может это не работает только в Опере, фиг знает, не проверял. А вот гифка прозрачная по любому будет отображаться с прозрачностью.

ErikPshat 07.07.2012 21:49
Найдите 2 отличия между https://www.pspx.ru/forum/cleardoc/ed...sertimage1.gif и https://www.pspx.ru/forum/cleardoc/editor/float.gif

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]
https://www.pspx.ru/forum/images/smilies/blush.gif

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


Текущее время: 22:03. Часовой пояс GMT +3.
Страница 1 из 3 1 2 3
Показывать 40 сообщений этой темы на одной странице

Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2024, vBulletin Solutions, Inc. Перевод: zCarot
PSPx Forum - Сообщество фанатов игровых консолей.