[FAQ] bb-код [DECOR] - безграничные возможности оформления тем ;)
Вложений: 1
Вообщем нарисовал я тут такой код, чтобы можно было подкрашивать нужные слова цветом бэкграунда, с закруглениями, тенями фона и текста, сделал уже расцветки на все шаблоны стилей форума и тут пришла идея сделать его не только со строго закреплённым цветом, но чтобы он был универсальным bb-кодом, по нажатию на кнопку. И идея вдруг сразу просчиталась и материализовалась. Получился точно такой же bb-код, как и многие другие, с возможностью использовать опцию для вставки цвета бэкграунда и картинки на фон.
Цвета по стилям для разделов Общие стили: Стиль раздела XBOX: Стиль раздела PS3: Стиль раздела NINTENDO: Стиль раздела ANDROID: Стиль раздела APPLE: |
Вложений: 13
Старый формат кода, если использовали, то исправляйте:
Код:
[decor-orange].........[/decor-orange] = [decor="#FF7722"]...[/decor] Несколько текстур, для фона |
вот ещё ) 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 ................................................................................ ..................................... с травой ваще прикольно) |
тест
с п е к т р ! р т к е п с
|
Дополнения...
Чтобы вообще ничем не окрашивать фон текста, но хотите применить эффект фона, то, когда в опцию будет выведен запрос на обязательную вставку параметра, просто вставьте любой символ. Затем, в теле сообщения уберите фальшивую опцию. То есть, опция декора в кавычках должна быть пустой: [DECOR=""]
Убрал жирность с тега DECOR, т.к. не красиво смотрится жирный шрифт в некоторых местах. Если требуется, вы сами можете поставить жирность тегом Bold [B] внутри декора.
|
Ну так как?
Я всё-таки хочу избавиться от первых BB-кодов, которые прописал для всех разделов. Поэтому решил удалить их. Если вы где-то использовали их тогда, то следует исправить теги. Все эти стили для разделов поместил в шапку, вам нужно только скопировать нужный, в соответстии со стилем раздела, затем вставить по нажатию кнопки https://www.pspx.ru/forum/cleardoc/editor/marker.gif в окно опции. Дополнительные параметры опции Как вам рыбки? :crazy: Использовалось 2 фона один поверх другого. P.S. Почитайте 1-ое сообщение... |
http://subtlepatterns.com/?page_id=854
Хорошие паттерны, не напрягают глаза. Или на исходниках: https://github.com/subtlepatterns/SubtlePatterns |
а можно как-то вырубить тень в декоре параметром? иногда напрягает
|
попробуй вставить через точку-с-запятой:
; text-shadow: none - без теней ; text-shadow: 1px 1px 1px #6E6E6E - с тенями по умолчанию text-shadow: <сдвиг по x> <сдвиг по y> <радиус размытия> <цвет тени>Собсно вот параметры http://htmlbook.ru/css/text-shadow По-моему не работает, т.к. в параметрах уже указаны тени. Собственно вот он сам скрипт BB-кода: Код:
<span style="Где {param} - это тот текст, который мы обрамляем данными тегами. |
|
Цитата:
Если их убрать, тогда обычные фоновые выделения будут ваще ужасно плоско смотреться. Но на самом деле обычный мелкий текст с тенями не очень хорошо смотрится на фоне. Ну и что будем делать, убираем из BB-кода тени? Будем сами где надо добавлять. Хорошо, убрал. Так же будем сами по необходимости добавлять тени. По-умолчанию код такой: через ; пишем тень: text-shadow: 1px 1px 1px #6E6E6E Теперь смотрите, как выглядет шапка и последующие сообщения без теней. А вот наглядный пример этой строчки, но с тенью... По-умолчанию код такой: через ; пишем тень: text-shadow: 1px 1px 1px #6E6E6E Пример этого кода: [DECOR="; text-shadow: 1px 1px 1px #6E6E6E"]
Пример: [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 теней! Ищё скрипт |
Вложений: 1
Усваиваем следующий урок... Делаем border-image.
Например из такого рисунка: Вложение 7195 Ну и пишем такой код И смотрим результат Ну и пишем такой код И смотрим результат Ну и пишем такой код И смотрим результат Ну и пишем такой код И смотрим результат В чём фокус? Изображение делится на 4 угла, 4 центральных части (без углов) и самого центра.
Выглядеть код будет так: [DECOR="; border: 28px;Подробнее... |
В теме с промодом стало в 100500 раз лучше :good:
А тени из твоего предыдущего поста очень порадовали :) классные эффекты, ещё неплохо смотрится при выделении мышью |
Да, забыл добавить, что во время расширенного редактирования нужно убирать галочку "Автоматически вставлять ссылки",
иначе к изображениям будет автоматом добавляться код ссылок [url]ссылка[/url] [IMG]http://img713.**************/img713/5852/01072012171703.png[/IMG] То есть, ваш код работать не будет, т.к. вместо этого:
|
Ну и ещё нарисовал шаблончик темы оформления :D
Код самый элементарный, уже всё подготовлено, не забывайте, тут 2 декора - один в другом, поэтому в конце нужно так же закрывать 2-мя тегами [/DECOR][/DECOR]: Код:
[DECOR="url("attachment.php?attachmentid=7237") repeat-y; border-right: medium double gray; z-index: -1000;"]
Внутри лежит ещё один декор, который раздвигает внешние границы:
Пример оформления здесь: https://www.pspx.ru/forum/showthread....45#post1007845 |
Отличный шаблон:good:, использовал его в своей теме.
https://www.pspx.ru/forum/showthread.php?t=92892&page=36 А как насчет таких бэкграундов, возможно? http://www.connectusers.com/x/underwater_connect.swf |
На бэкграунд скорее всего не получится. Разве что только так выводить.
Флэш Да и весит оно почти мегабайт (816 kb), а это слишком много для страницы форума, по сравнению с бэкграундами в 2,5 кб. |
Вложений: 2
Вложение 7241
Mожно на фон поставить картинку или несколько, а уже в само сообщение добавить SWF с прозрачностью поверх картинки декора. Тогда будет казаться, что весь фон анимированный. Правда SWF почему-то у меня вставился без прозрачности, хотя точно знаю, что у него есть прозрачность. Добавления WMODE с TRANSPARENT почему-то не помогает, хотя может это не работает только в Опере, фиг знает, не проверял. А вот гифка прозрачная по любому будет отображаться с прозрачностью. |
Найдите 2 отличия между https://www.pspx.ru/forum/cleardoc/ed...sertimage1.gif и https://www.pspx.ru/forum/cleardoc/editor/float.gif
|
Код:
[PIC="RIGHT"]https://www.pspx.ru/forum/images/smilies/blush.gif[/PIC] https://www.pspx.ru/forum/images/smilies/blush.gifа чёт не на одной высоте? и в чём прикол? =) |
Цитата:
Но это не единственное отличие. Так найди 2 отличия! |
Цитата:
охтыж, блеать!!!! теперь понял) а вертикальный hr можно сделать? https://www.pspx.ru/forum/showpost.ph...3&postcount=49 это вообще прикольновот так вот писать столбцами!вот только теперь сложнее будет темы писать) |
Цитата:
|
Что-то мне кажется, что вот эти вот украшали - огромная дыра в безопасности.
|
Yoti, это действует только на стили.
Вот допустим последний рассматриваемый HTML-код: Код:
<span style="float:left; margin: 0 20px;"><span style="float: {option};"> - это как раз влияет только на стиль оформления. В bb-коде подставляется то, что мы вставляем вместо значения {option}, мы подставляем, куда отобразить текст или картинку или всё, что угодно. Здесь да, я использую хитрость, что подставляя просто left в этот код, вместо {option}, можно добавлять ещё параметры, которые понимает функция float, она и отвечает за расположение в пространстве. То есть, я туда вставляю не просто left, а left; margin: 0 20px; и получается уже не просто <span style="float: left;">, как задумывалось в BB-коде, а вот такое <span style="float: left; margin: 0 20px;">. Туда можно через точку с запятой добавлять и ещё разные параметры, не только margin, но работать будут только те параметры, которые поддерживаются тегом float. А margin я вставил для того, чтобы сделать отстпуп на 20px по горизонтали справа и слева. Поэтому сомневаюсь, что даже если туда вставить злостный скрипт, то это как-то сможет сработать. Абсолютно то же самое происходит с другими тегами в шапке темы, как параметр: <div style="background: {options};"> - тут свойство background может иметь большое количество опций и подопций, как вставка цвета, картинки(ок), расположения, наложения, прозрачности, и т.п. и т.д.. А в свою очередь эти подопции, каждая имеет ещё свои опции. Тут сам чёрт ногу сломает. Но опять же, тут мы только действуем на свойство style background, а это действует только на стиль отображения. Если вставлять в параметр {options} какой-то левый вредоносный скрипт, то он в стиле просто не задействуется. Хотя, возможно это и опасно, но я не предполагаю, как это можно замутить. |
Вложений: 2
https://www.pspx.ru/forum/attachment....achmentid=7476 https://www.pspx.ru/forum/attachment....achmentid=7477
Ещё один прикольный декор, состоящий из одного маленького квадратика 52 x 52 пикселя 3.4 KБ. Маленький очень хорошо имитирует шелкографию, по-моему красиво смотрится. Состоит из квадратика 104 x 104 пикселей 5.4 KБ. Большой (увеличенный) уже не так эффектно выглядет, что-то слишком вроде как-то крупноватое зерно получилось. |
Оформление тем - это здорово, спасибо. Изучаю.
У меня вот такой вопрос: "А как переименовать уже созданную свою тему?" Опять чего-то растерялся, кто знает? Нигде не смог найти :unknw: |
vash, опции темы -> редактирование темы. Естественно, это работает только в тех разделах, где ты модератор, не зависимо от того, являешься ты автором темы или нет.
|
Вложений: 2
ErikPshat, чёто много они весят http://puu.sh/NWJg
|
Цитата:
это, кстати, в глюках форума обсуждалось относительно недавно))) |
Приветствую вас господа и кхм, кхм, товарищи!!! Так как со временем мы внесли поправки к тегу ДЕКОРа, в частности... были убраны строго закреплённые "Белый цвет шрифта" и "Тени шрифта" в декоре, то ранее написанная инструкция в шапке, немного не соответствовала действительности. На данный момент, я исправил все недочёты в описании и в том числе, исправил готовые коды "Цветов по стилям для разделов". Прошу любить и жаловать прочитать и зазубрить первый пост заново! Цитата:
Не, это у тебя много весят ;) |
Уж больно понравилась мне эта кнопочка: Content Manager Assistant for PlayStation® Vita - - - ну и - - - Content Manager Assistant for PlayStation® Vita |
Прикольную рамочку замутил:
1 Пункт 1 2 Пункт 2 Осенний, ясный, немножко холодный, утром морозный день, когда береза, словно сказочное дерево, вся золотая, красиво рисуется на бледно-голубом небе, когда низкое солнце уже не греет, но блестит ярче летнего, небольшая осиновая роща насквозь вся сверкает, словно ей весело и легко стоять голой, изморозь еще белеет на дне долин, а свежий ветер тихонько шевелит и гонит упавшие покоробленные листья, — когда по реке радостно мчатся синие волны, тихо вздымая рассеянных гусей и уток; вдали мельница стучит, полузакрытая вербами, и, пестрея в светлом воздухе, голуби быстро кружатся над ней... Код для Декора: Код:
; border-bottom: 1px solid #FFFFFF; border-left: 1px solid #999999; border-right: 1px solid #FFFFFF; border-top: 1px solid #999999; |
Привет, градиент! |
Где? Фон под текстом пустой
хм, в опере работает PS: щас заметил, что при клике в любое место страницы опера что-то грузит на мгновение. немного напрягает |
Цитата:
|
Цитата:
Там не картинка, а прочто код, заставляющий растекаться градиенту от указанного значения цвета до указанного значения цвета.
top - направление градиента, здесь сверху, значит вниз. Существует left, right, top, bottom, либо их сочетания, например, "top left" это левый верхний угол. #4c4c4c - начальный цвет градиента. #131313 - конечный цвет градиента. По умолчанию, если ничего не указывать, цвет идёт от 0 до 100% Количество указанных цветов может быть даже 3 или 4 или 5 или вообще бесконечное ))) просто переход от одного к другому указывается через запятую и таких переходов может быть сколько угодно. Привет, градиент! Для ленивых: Ultimate CSS Gradient Generator |
В яндексе тоже не пашет, в опере полёт нормальный, но она у меня "не летает" =\
|
Вложений: 1
Хех, а вот в Мазиле градиентов почему-то не видно ))) И вот этой фичи не видно: https://www.pspx.ru/forum/showpost.ph...6&postcount=12 И этой: https://www.pspx.ru/forum/showpost.ph...5&postcount=19 Представляю, как они там сидят и смотрят чёрно-белое кино :D И ещё прикол, что в шапке, под заголовком темы они видят пустой прямоугольник: https://www.pspx.ru/forum/showpost.ph...43&postcount=1 А это почему-то видно в Мазиле и в Опере. Радуга, радуга, радуга дуга дуга |
Ещё одна интересная возможность декора - это плавающая кнопка.
Код тут элементарен, просто выставлен код закрепления позиции картинки к прокрутке страницы. Цитата:
Как видно, всё элементарно просто ))) Ну и между тегами Декора я вставил стрелку вверх, картинку, стрелку вниз. На стрелки просто повесил ссылки-якоря, а сами якоря расставил в нужных местах HTML-страницы:
В результате имеем на странице такую летающую фигню, в нижнем правом углу страницы... |
| Текущее время: 03:04. Часовой пояс GMT +3. |
Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2025, vBulletin Solutions, Inc. Перевод: zCarot
PSPx Forum - Сообщество фанатов игровых консолей.
