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

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

ErikPshat

24.06.2012, 00:30

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

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

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

Нажав на кнопку http://www.pspx.ru/forum/cleardoc/editor/marker.gif в панели быстрого ответа, открывается окошко с запросом вставить опцию для BB-кода.
Туда нужно вставить код цвета в следующем формате: #RRGGBB, где:

RR - оттенок красного;
GG - оттенок зелёного;
BB - оттенок синего.

Значения могут быть от 00 до FF (в шестнадцатеричном исчислении) для каждого оттенка, либо стандартизированными фразами, типа Red, Green, Blue, DarkOrange, White и т.д.
Если вы не знаете названия цвета или не можете в уме сложить оттенки 3-ёх цветов, чтобы получить необходимый цвет, тогда воспользуйтесь любой графической программкой, как фотошоп, либо олайнсервисом (http://www.2createawebsite.com/build/color.swf), где есть палитра цветов, а проще иметь под рукой специально предназначенную для этого прожку, такую, как ColourPicker (http://www.pspx.ru/forum/showthread.php?t=93743). Она может снимать пипеткой код цвета с любой области экрана, сайта или форума, а так же имеет свою палитру цветов, где вы можете выбрать любой из 16 миллионов 777 тысяч 216-ти оттенков.
7060

Запускаете программку и ставите внизу галочку на "Topmost", чтобы программа всегда была поверх всех окон.
Открываете окно браузера или любой другой программы, картинки и т.п., откуда вы хотите сдампить точный код цвета.
Нажимаете кнопку "Eye Dropper", курсор принимает вид крестика, наводите на область экрана с нужным цветом, появляется лупа с увеличенным отображением этой области и таким образом можете с точностью до пикселя, снять цвет интересующего пикселя.
Нажимаете левой кнопкой мыши на выбранном цвете и он захватывается программой.
Копируете полученный "HTML code", нажав напротив кнопку "copy" и вставляете в форму опции на форуме.

Картинка на бэкграунде

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

#494949 url(http://www.pspx.ru/cleardoc/misc/dark-background-stripes.gif)

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

url(http://www.pspx.ru/cleardoc/misc/dark-background-stripes.gif)

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

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

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

здесь обычный белый текст под фоном #0000FF

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

здесь обычный белый текст с фоновым рисунком и [DECOR="red"]без теней

здесь обычный белый текст с фоновым рисунком и с тенями

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

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

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

Общие стили:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[DECOR=""]Стиль раздела APPLE:

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

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

Онлайн-генератор CSS3 кнопок для сайта (http://webremeslennik.ru/files/ButtonMaker)

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

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

ErikPshat

24.06.2012, 13:40

Старый формат кода, если использовали, то исправляйте:
.........[/decor-orange] = [decor="#FF7722"]...
..........[/decor-green] = [decor="#6B9828"]...
...........[/decor-blue] = [decor="#3362A3"]...
............[/decor-sky] = [decor="#008CE4"]...
........[/decor-android] = [decor="#B1CC47 url(cleardoc/misc/app-header-stripes.gif)"]...
...[/decor-android-dark] = [decor="#494949 url(cleardoc/misc/dark-background-stripes.gif)"]...
..........[/decor-apple] = [decor="#000000"]...

http://www.pspx.ru/forum/images/page_bg.png http://www.pspx.ru/forum/images/page_bgs.png http://www.pspx.ru/forum/attachment.php?attachmentid=7067 http://www.pspx.ru/forum/attachment.php?attachmentid=7068 http://www.pspx.ru/forum/attachment.php?attachmentid=7069 http://www.pspx.ru/forum/attachment.php?attachmentid=7070 http://www.pspx.ru/forum/attachment.php?attachmentid=7082 http://www.pspx.ru/forum/attachment.php?attachmentid=7071 http://www.pspx.ru/forum/attachment.php?attachmentid=7072 http://www.pspx.ru/forum/attachment.php?attachmentid=7073 http://www.pspx.ru/forum/attachment.php?attachmentid=7074 http://www.pspx.ru/forum/attachment.php?attachmentid=7088 http://www.pspx.ru/forum/images/bgnoise.gif http://www.pspx.ru/forum/images/daimond_eyes.png

KirJan-DeSign

24.06.2012, 14:25

вот ещё )

http://www.coolwebmasters.com/templates/coolwebmasters-2012-euro/images/dlet-bg.gif
http://d2f8dzk2mhcqts.cloudfront.net/001_WebDesignWeek/02_Layout/pattern_14.jpg
http://img12.nnm.ru/d/9/d/8/7/0314f1fdefef72bd3406cb6fa9b_prev.jpg

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

http://www.coolwebmasters.com/backgrounds/372-100-seamless-patterns-for-creating-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-кодов, которые прописал для всех разделов.
Поэтому решил удалить их. Если вы где-то использовали их тогда, то следует исправить теги.

Все эти стили для разделов поместил в шапку, вам нужно только скопировать нужный, в соответстии со стилем раздела, затем вставить по нажатию кнопки http://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 (http://htmlbook.ru/css/background), в свою очередь дополнительные параметры имеют ещё свои подпараметры, а подпараметры имеют ещё подподпараметры...
Где {param} - это тот текст, который мы обрамляем данными тегами.

StepS

30.06.2012, 21:16

http://www.pspx.ru/forum/cleardoc/buttons/post_thanks.gif (http://www.pspx.ru/forum/post_thanks.php?do=post_thanks_add&p=1041875)

+1 спасибо! (http://www.pspx.ru/forum/post_thanks.php?do=post_thanks_add&p=1041875)

:right: http://www.pspx.ru/forum/showpost.php?p=1041883&postcount=32

ErikPshat

01.07.2012, 04:46

:right: http://www.pspx.ru/forum/showpost.php?p=1041883&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 значения) запятой.
Пример:
Когда слагаемые цвета (RGB) одинаковые, тогда получаются чистые оттенки серого от чёрного #000000 к белому #FFFFFF.
Например # 6E + 6E + 6E (#6E6E6E) или # 95 + 95 + 95 (#959595) = чистый серый оттенок, а # 5A + 92 + F7 (#5A92F7) = цветной оттенок.
Но тень в природе всегда бывает серой )))

[DECOR="; color: #E2E2E2; text-shadow: 1px 1px 1px #FFFFFF, -1px -1px 1px #666666"]Творите и дерзайте, всё в ваших руках :D

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

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

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

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

не пойми что, но можно подправить

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

ErikPshat

01.07.2012, 07:10

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

7195

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

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

В чём фокус?
Изображение делится на 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(http://www.pspx.ru/forum/attachment.php?attachmentid=7195) 28 round round;
-webkit-border-image: url(http://www.pspx.ru/forum/attachment.php?attachmentid=7195) 28 round round;
-o-border-image: url(http://www.pspx.ru/forum/attachment.php?attachmentid=7195) 28 round round;
border-image: url(http://www.pspx.ru/forum/attachment.php?attachmentid=7195) 28 round round;"]

Подробнее... (http://htmlbook.ru/css/border-image)

StepS

01.07.2012, 13:34

В теме с промодом стало в 100500 раз лучше :good:
А тени из твоего предыдущего поста очень порадовали :) классные эффекты, ещё неплохо смотрится при выделении мышью

ErikPshat

01.07.2012, 17:13

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

http://img713.**************/img713/5852/01072012171703.png
То есть, ваш код работать не будет, т.к. вместо этого:

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

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

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

ErikPshat

07.07.2012, 11:59

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

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

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

Здесь находится ваш текст или инструкция

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

url("attachment.php?attachmentid=7237") repeat-y; - это ссылка на кусочек картинки, которая размножается по оси Y, т.е. по вертикали.

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

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

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

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

Пример оформления здесь: http://www.pspx.ru/forum/showthread.php?p=1007845#post1007845

[/DECOR][/DECOR]

akela1979

07.07.2012, 12:58

Отличный шаблон:good:, использовал его в своей теме.
http://www.pspx.ru/forum/showthread.php?t=92892&page=36

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

ErikPshat

07.07.2012, 14:21

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

http://www.connectusers.com/x/underwater_connect.swf
Да и весит оно почти мегабайт (816 kb), а это слишком много для страницы форума, по сравнению с бэкграундами в 2,5 кб.

ErikPshat

07.07.2012, 17:35

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

ErikPshat

07.07.2012, 21:49

Найдите 2 отличия между http://www.pspx.ru/forum/cleardoc/editor/insertimage1.gif и http://www.pspx.ru/forum/cleardoc/editor/float.gif

KirJan-DeSign

07.07.2012, 23:02

http://www.pspx.ru/forum/images/smilies/blush.gif
http://www.pspx.ru/forum/images/smilies/blush.gif

http://www.pspx.ru/forum/images/smilies/blush.gifhttp://www.pspx.ru/forum/images/smilies/blush.gif

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

ErikPshat

07.07.2012, 23:13

а чёт не на одной высоте? и в чём прикол? =)Потому что у PIC выставлен отступ со всех сторон на 8 пикселей уже в коде - margin: 8px;

Но это не единственное отличие.
Так найди 2 отличия!

KirJan-DeSign

07.07.2012, 23:22

Так найди 2 отличия!
сдаюсь)))

охтыж, блеать!!!!
теперь понял) а вертикальный hr можно сделать?
http://www.pspx.ru/forum/showpost.php?p=1042543&postcount=49
это
вообще
прикольновот так вот
писать
столбцами!вот только
теперь
сложнее будет
темы
писать)

ErikPshat

07.07.2012, 23:46

сдаюсь)))
Ну тогда ищи ответ здесь: http://www.pspx.ru/forum/showthread.php?p=1042543#post1042543

Попробуй сделать так же с [PIC] :D

И попробуй в [PIC] воткнуть [ATTACH] :xD:

Ну и попробуй ещё в [PIC] засунуть что-нибудь другое, кроме изображения, пусть даже раком :xDD:

Yoti

08.07.2012, 12:45

Что-то мне кажется, что вот эти вот украшали - огромная дыра в безопасности.

ErikPshat

08.07.2012, 20:56

Yoti, это действует только на стили.
Вот допустим последний рассматриваемый HTML-код:

<span style="float:left; margin: 0 20px;">
это
<br/>
вообще
<br/>
прикольно
</span>
Как видишь, <span> - предназначен для определения строчных элементов документа. В отличие от блочных элементов, таких как <table>, <p> или <div>, с помощью тега <span> можно выделить часть информации внутри других тегов и установить для нее свой стиль. То есть, это действет только на текст и составляющие в части оформления внутри предложений, где перенос категорически не уместен. А если бы я вставил <div>, то это обязательно переносит заключённый в тег текст на новую строку, чего нам не требуется.

<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} какой-то левый вредоносный скрипт, то он в стиле просто не задействуется.
Хотя, возможно это и опасно, но я не предполагаю, как это можно замутить.

ErikPshat

22.07.2012, 06:59

http://www.pspx.ru/forum/attachment.php?attachmentid=7476 http://www.pspx.ru/forum/attachment.php?attachmentid=7477

Ещё один прикольный декор, состоящий из одного маленького квадратика 52 x 52 пикселя 3.4 KБ.
Маленький очень хорошо имитирует шелкографию, по-моему красиво смотрится.

Состоит из квадратика 104 x 104 пикселей 5.4 KБ.
Большой (увеличенный) уже не так эффектно выглядет, что-то слишком вроде как-то крупноватое зерно получилось.

vash

02.08.2012, 17:34

Оформление тем - это здорово, спасибо. Изучаю.
У меня вот такой вопрос: "А как переименовать уже созданную свою тему?"
Опять чего-то растерялся, кто знает? Нигде не смог найти :unknw:

DIIGMO

02.08.2012, 17:46

vash, опции темы -> редактирование темы. Естественно, это работает только в тех разделах, где ты модератор, не зависимо от того, являешься ты автором темы или нет.

COOLERbyPSP

02.08.2012, 17:56

ErikPshat, чёто много они весят http://puu.sh/NWJg

KirJan-DeSign

02.08.2012, 19:33

как переименовать уже созданную свою тему?
на той странице, где список тем, кликаешь справа от надписи с названием темы (о_0) и название темы можно редактировать)
это, кстати, в глюках форума обсуждалось относительно недавно)))

ErikPshat

02.08.2012, 20:01

Приветствую вас господа и кхм, кхм, товарищи!!!

Так как со временем мы внесли поправки к тегу ДЕКОРа, в частности...
были убраны строго закреплённые "Белый цвет шрифта" и "Тени шрифта" в декоре,
то ранее написанная инструкция в шапке, немного не соответствовала действительности.

На данный момент, я исправил все недочёты в описании и в том числе,
исправил готовые коды "Цветов по стилям для разделов".

Прошу любить и жаловать прочитать и зазубрить первый пост заново!

ErikPshat, чёто много они весятНе, это у тебя много весят ;)

ErikPshat

08.10.2012, 21:33

Уж больно понравилась мне эта кнопочка:

Content Manager Assistant
for PlayStation® Vita

- - -
ну
и

- - -
Content Manager Assistant
for PlayStation® Vita

ErikPshat

23.10.2012, 08:03

Прикольную рамочку замутил:

1 Пункт 1

2 Пункт 2

Осенний, ясный, немножко холодный, утром морозный день, когда береза, словно сказочное дерево, вся золотая, красиво рисуется на бледно-голубом небе, когда низкое солнце уже не греет, но блестит ярче летнего, небольшая осиновая роща насквозь вся сверкает, словно ей весело и легко стоять голой, изморозь еще белеет на дне долин, а свежий ветер тихонько шевелит и гонит упавшие покоробленные листья, — когда по реке радостно мчатся синие волны, тихо вздымая рассеянных гусей и уток; вдали мельница стучит, полузакрытая вербами, и, пестрея в светлом воздухе, голуби быстро кружатся над ней...

Код для Декора:
; border-bottom: 1px solid #FFFFFF; border-left: 1px solid #999999; border-right: 1px solid #FFFFFF; border-top: 1px solid #999999;
color: #555555; display: inline-block; font-size: 20px; margin: 0px 6px 0px 0px; padding: 0px; position: relative; text-align: center;
text-shadow: 1px 1px 0px #FFFFFF

ErikPshat

03.11.2012, 06:42

Привет, градиент!

StepS

03.11.2012, 13:04

Где? Фон под текстом пустой

хм, в опере работает
PS: щас заметил, что при клике в любое место страницы опера что-то грузит на мгновение. немного напрягает

KirJan-DeSign

03.11.2012, 17:21

/* FF3.6+ *//* Chrome10+,Safari5.1+ *//* IE10+ */ /* W3C */ /* IE6-9 *

а для мазилы где?

ErikPshat

03.11.2012, 21:59

а для мазилы где?Ну так -moz- и есть для мазилы.
Там не картинка, а прочто код, заставляющий растекаться градиенту от указанного значения цвета до указанного значения цвета.

background: -moz-linear-gradient(top, #4c4c4c,#131313); /* FF3.6+ */ это и есть FireFox (Mozilla)

-moz-linear-gradient - код стиля градиента.
top - направление градиента, здесь сверху, значит вниз. Существует left, right, top, bottom, либо их сочетания, например, "top left" это левый верхний угол.
#4c4c4c - начальный цвет градиента.
#131313 - конечный цвет градиента.

По умолчанию, если ничего не указывать, цвет идёт от 0 до 100%
Количество указанных цветов может быть даже 3 или 4 или 5 или вообще бесконечное ))) просто переход от одного к другому указывается через запятую и таких переходов может быть сколько угодно.

Привет, градиент!

Для ленивых: Ultimate CSS Gradient Generator (http://www.colorzilla.com/gradient-editor/)

COOLERbyPSP

05.11.2012, 23:09

В яндексе тоже не пашет, в опере полёт нормальный, но она у меня "не летает" =\

ErikPshat

08.11.2012, 03:52

Визуальный редактор градиентов. (http://www.colorzilla.com/gradient-editor/)

Хех, а вот в Мазиле градиентов почему-то не видно )))
И вот этой фичи не видно: http://www.pspx.ru/forum/showpost.php?p=1041896&postcount=12
И этой: http://www.pspx.ru/forum/showpost.php?p=1042525&postcount=19

Представляю, как они там сидят и смотрят чёрно-белое кино :D

И ещё прикол, что в шапке, под заголовком темы они видят пустой прямоугольник: http://www.pspx.ru/forum/showpost.php?p=1050443&postcount=1

А это почему-то видно в Мазиле и в Опере.

Радуга, радуга, радуга дуга дуга

ErikPshat

08.12.2012, 03:03

Ещё одна интересная возможность декора - это плавающая кнопка.

Код тут элементарен, просто выставлен код закрепления позиции картинки к прокрутке страницы.

⇑
http://www.pspx.ru/forum/images/smilies/girl_crazy.gif
⇓

Собсно разберём код Декора: ; position:fixed; bottom:30px; right:24px; opacity:0.5;

; //В начале ставим точку c запятой, т.к. цвета Бэкграунда и ссылки на картинку нам не нужно.
position:fixed; //Это и есть фиксирование позиции того, что мы вставляем между тегами декора.
bottom:30px; //Отступ снизу.
right:24px; //Отступ справа.
opacity:0.5; //Прозрачность 50%

Как видно, всё элементарно просто )))
Ну и между тегами Декора я вставил стрелку вверх, картинку, стрелку вниз.
На стрелки просто повесил ссылки-якоря, а сами якоря расставил в нужных местах HTML-страницы:

Вверх - над первым постом (якорь #poststop)
Вниз - над формой быстрого ответа (якорь #QREPLY).

В результате имеем на странице такую летающую фигню, в нижнем правом углу страницы...

⇑
http://www.pspx.ru/forum/images/smilies/girl_crazy.gif
⇓

ErikPshat

04.01.2013, 11:01

Коллекция красивых фонов с визуальным отображением: http://subtlepatterns.com/

https://github.com/subtlepatterns/SubtlePatterns

ErikPshat

15.09.2016, 16:27

12 эффектов для текста с использованием теней CSS (http://ruseller.com/lessons.php?id=1285)

ErikPshat

09.05.2017, 02:52

Онлайн-генератор CSS3 кнопок для сайта (http://webremeslennik.ru/files/ButtonMaker)

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

Не забываем, что на первом месте у нас забиндено свойство background:
поэтому параметры этого свойства переносим на первое место, либо в начале ставим точку с запятой ;

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

ErikPshat

12.05.2017, 05:15

Удалил из декора принудительно выставленные параметры. При желании вы сами можете их вставить в декор.
Вот эти параметры убраны: border-radius:3px;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;

border-radius: 3px;
// радиус закругления углов.
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;
// отбрасываемые тени вокруг блока, тут их 2 штуки, одна накладывается на другую. inset - тень накладывается внутрь блока.
font-weight: normal;
//выставляет нормальную насыщенность шрифта.

in1975

19.05.2017, 17:18

Как сделать тему на разных разрешениях? особенно касательно изображений в бекграунде.

Хочу чтобы тема выглядела одинаково на разных разрешениях...

ErikPshat

19.05.2017, 20:45

in1975, гугли слово background. По первой же ссылке попадёшь на справочник http://htmlbook.ru/css/background или на его новую версию сайта https://webref.ru/css

Там ты поймёшь, какие параметры позволят это сделать. Там слева вверху показывается список соседних параметров.
Это либо бэкграунд привязать к определённому размеру, т.е. задать строгу ширину и высоту, либо его можно привязать только по ширине, а высота будет автоматом выстраиваться в зависимости от разрешения экрана или наоборот. Можно сделать, чтобы картинка повторялась repeat, но это для мелких паттернов, которые будут повторяться и заполнять страницу рисунком. Можешь погуглить паттерны, они бывают полупрозрачными и принимают раскраску фона, вот как косые полоски в этой теме (http://www.pspx.ru/forum/showthread.php?t=106011).

ErikPshat

01.11.2018, 03:17

Теперь, я смотрю, некоторые простоюзеры смотрят эту тему, а конкретнее, этот пост: http://www.pspx.ru/forum/showthread.php?p=1039350#post1039350

ErikPshat

16.07.2019, 06:13

Ещё пример Неонового свечения:
В качестве эффекта свечения типа неона, используются обычные тени. Просто мы подбираем цвет теми такой, который не серый, а наоборот яркий.
Как мы знаем, тени можно накладывать одну за другой через запятую и они будут следовать друг за другом в зависимости от указанного расстояния.
И каждую последующую тень мы можем выводить со своим изменяющимсчя цветом.
Команда вывода тени: text-shadow: 0 0 10px #ffffff
Расшифровка команды: text-shadow: сдвиг_по_X сдвиг_по_Y рассеивание_10px цвет_#ffffff - через запятую параметры повторяются и накладываются с увеличивающимся интервалом рассеивания.

Напишем такую тень как-то так: на первом месте у нас всегда стоит свойство background, не забываем спереди поставить цвет бэкграунда. Если цвет бэкграунда не указываем, тогда всё равно не забываем закрывать точкой с запятой первое свойство background;, которое всегда стоит там по умолчанию!!!

Да Нет Наверное

Добавим эффект анимации так: тут кроме параметров анимации, требуется применить отдельный стиль поведения. Имеем в виду, что для устаревших браузеров Опера, Мазила и прочих Web-Kit нужно отдельно для них повторять понятные им команды с префиксами (-webkit-animation, @-webkit-keyframes, -moz-animation, @-moz-keyframes и т.д.)
@keyframes neonAnimation { from {text-shadow: 0 0 10px #ffffff, 0 0 20px #ffffff, 0 0 30px #ffffff, 0 0 40px #228DFF, 0 0 70px #228DFF, 0 0 80px #228DFF, 0 0 100px #228DFF, 0 0 150px #228DFF} to {text-shadow: 0 0 5px #ffffff, 0 0 10px #ffffff, 0 0 15px #ffffff, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 40px #228DFF, 0 0 50px #228DFF, 0 0 75px #228DFF} }
Да Нет Наверное

ErikPshat

01.08.2019, 06:16

@-webkit-keyframes shake{5%,45%{-webkit-transform:translate3d(0,-1px,0);transform:translate3d(0,-1px,0)}10%,40%{-webkit-transform:translate3d(0,2px,0);transform:translate3d(0,2px,0)}15%,25%,35%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}20%,30%{-webkit-transform:translate3d(0,4px,0);transform:translate3d(0,4px,0)}}@keyframes shake{5%,45%{-webkit-transform:translate3d(0,-1px,0);transform:translate3d(0,-1px,0)}10%,40%{-webkit-transform:translate3d(0,2px,0);transform:translate3d(0,2px,0)}15%,25%,35%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}20%,30%{-webkit-transform:translate3d(0,4px,0);transform:translate3d(0,4px,0)}}Стырено из чата со страницы: https://life.informator.news/playstation-5-nachaly-prodavat-po-ohromnoy-tsene/

Чат в telegram https://life.informator.news/images/icon-telegram.png (https://t.me/pspxr)

jekakmv

01.08.2019, 13:51

in1975

01.08.2019, 14:14

jekakmv, Зачем? бери и копируй.

Чат в telegram https://life.informator.news/images/icon-telegram.png (https://t.me/pspxr)

З.ы. декор в подписи не работает :(

Z0rdan

01.08.2019, 15:10

З.ы. декор в подписи не работает
Печально, тоже хотел себе в подпись поставить.

in1975

01.08.2019, 15:18

Z0rdan, скажем так, он работает ограничено, поэтому можно уменьшить иконку и вставить в подпись

ErikPshat

01.08.2019, 16:28

in1975, да, я пробовал тебе в подпись вставить :) картинка во весь размер отображается. Но можно её конечно по размеру 20х20 подрезать, но она как-то двоится.

ErikPshat

16.02.2020, 10:47

Стырил из Одноклассников стикеры :)

 
 
 
 
 
 
 
 

 
 
 
 
 
 
 
 

 
 
 
 
 
 
 
 

 
 
 
 
 
 
 
 

 
 
 
 
 
 
 
 

 
 
 
 
 
 
 
 

 
 
 
 
 
 
 
 

ErikPshat

17.02.2020, 07:35

Padre12

17.02.2020, 18:21

 
 

Ну вот как то так получается со стикерами из вк
И Вот вам 10 смайликов
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Padre12

17.02.2020, 18:25

О и да кому интересно
Я покапался в этой ссылочке чутка
//vk.com/sticker/1-10671-128
Код стикера 10671 можете поменять и посмотреть в принципе норм. Максимум 18510 Минимум 1
Размер 128
Под вопросом еще цифра 1 я так и не понял что это такое.

Padre12

17.02.2020, 20:24

А вот еще и маленькие смайлики из вк
Держите url(//vk.com/emoji/e/f09f9880.png) Так же меняем последнее значение Чтобы получить следующий смайлик.
Предлагаю реализовать новые стикеры, через спец меню в чатике.