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

[ErikPshat]

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

https://github.com/subtlepatterns/SubtlePatterns

[ErikPshat]

12 эффектов для текста с использованием теней CSS

[ErikPshat]

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

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

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

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

[ErikPshat]

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

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

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

[ErikPshat]

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

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

[ErikPshat]

Теперь, я смотрю, некоторые простоюзеры смотрят эту тему, а конкретнее, этот пост: https://www.pspx.ru/forum/showthread....50#post1039350

[ErikPshat]

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

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

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

Добавим эффект анимации так: тут кроме параметров анимации, требуется применить отдельный стиль поведения. Имеем в виду, что для устаревших браузеров Опера, Мазила и прочих Web-Kit нужно отдельно для них повторять понятные им команды с префиксами (-webkit-animation, @-webkit-keyframes, -moz-animation, @-moz-keyframes и т.д.)

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

[ErikPshat]

Стырено из чата со страницы: https://life.informator.news/playsta...hromnoy-tsene/

Чат в telegram

[jekakmv]

Сообщение от ErikPshat Стырено из чата со страницы: https://life.informator.news/playsta...hromnoy-tsene/ Чат в telegram

Прикольно смотрится, не добавил еще в BB-коды форума?

[in1975]

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

[URL="https://t.me/pspxr"][B]Чат в telegram[/B] [DECOR=";white-space:nowrap;background-size:cover;width:28px;height:28px;cursor:pointer;z-index:10001;-webkit-animation:shake 6s infinite alternate;-moz-animation:shake 6s infinite alternate;animation:shake 6s infinite alternate"][IMG]https://life.informator.news/images/icon-telegram.png[/IMG][/DECOR][/URL]

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

[Z0rdan]

Сообщение от in1975 З.ы. декор в подписи не работает

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

[in1975]

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

[ErikPshat]

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

[ErikPshat]

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

1.  
   

   [DECOR="url(//i.mycdn.me/getSmile?smileId=c23a918ef4) no-repeat;width:192px;height:192px"][DECOR=";display:none"] [/DECOR][/DECOR]

2.  
   

   [DECOR="url(//i.mycdn.me/getSmile?smileId=c23a92edf4) no-repeat;width:192px;height:192px"][DECOR=";display:none"] [/DECOR][/DECOR]

3.  
   

   [DECOR="url(//i.mycdn.me/getSmile?smileId=c23a9207f4) no-repeat;width:192px;height:192px"][DECOR=";display:none"] [/DECOR][/DECOR]

4.  
   

   [DECOR="url(//i.mycdn.me/getSmile?smileId=c23a902df4) no-repeat;width:192px;height:192px"][DECOR=";display:none"] [/DECOR][/DECOR]

5.  
   

   [DECOR="url(//i.mycdn.me/getSmile?smileId=c23a9211f4) no-repeat;width:192px;height:192px"][DECOR=";display:none"] [/DECOR][/DECOR]

6.  
   

   [DECOR="url(//i.mycdn.me/getSmile?smileId=c23a91bff4) no-repeat;width:192px;height:192px"][DECOR=";display:none"] [/DECOR][/DECOR]

7.  
   

   [DECOR="url(//i.mycdn.me/getSmile?smileId=c23a92f5f4) no-repeat;width:192px;height:192px"][DECOR=";display:none"] [/DECOR][/DECOR]

8.  
   

   [DECOR="url(//i.mycdn.me/getSmile?smileId=c23a9367f4) no-repeat;width:192px;height:192px"][DECOR=";display:none"] [/DECOR][/DECOR]

9.  
   

   [DECOR="url(//i.mycdn.me/getSmile?smileId=c23a9323f4) no-repeat;width:192px;height:192px"][DECOR=";display:none"] [/DECOR][/DECOR]

10.  
    

    [DECOR="url(//i.mycdn.me/getSmile?smileId=c23a938cf4) no-repeat;width:192px;height:192px"][DECOR=";display:none"] [/DECOR][/DECOR]

11.  
    

    [DECOR="url(//i.mycdn.me/getSmile?smileId=c23a93c7f4) no-repeat;width:192px;height:192px"][DECOR=";display:none"] [/DECOR][/DECOR]

12.  
    

    [DECOR="url(//i.mycdn.me/getSmile?smileId=c23a91d7f4) no-repeat;width:192px;height:192px"][DECOR=";display:none"] [/DECOR][/DECOR]

13.  
    

    [DECOR="url(//i.mycdn.me/getSmile?smileId=c23a93fef4) no-repeat;width:192px;height:192px"][DECOR=";display:none"] [/DECOR][/DECOR]

14.  
    

    [DECOR="url(//i.mycdn.me/getSmile?smileId=c23a93e9f4) no-repeat;width:192px;height:192px"][DECOR=";display:none"] [/DECOR][/DECOR]

15.  
    

    [DECOR="url(//i.mycdn.me/getSmile?smileId=c23a94acf4) no-repeat;width:192px;height:192px"][DECOR=";display:none"] [/DECOR][/DECOR]

16.  
    

    [DECOR="url(//i.mycdn.me/getSmile?smileId=c23a94cff4) no-repeat;width:192px;height:192px"][DECOR=";display:none"] [/DECOR][/DECOR]

17.  
    

    [DECOR="url(//i.mycdn.me/getSmile?smileId=c23a94ebf4) no-repeat;width:192px;height:192px"][DECOR=";display:none"] [/DECOR][/DECOR]

18.  
    

    [DECOR="url(//i.mycdn.me/getSmile?smileId=c23a959bf4) no-repeat;width:192px;height:192px"][DECOR=";display:none"] [/DECOR][/DECOR]

19.  
    

    [DECOR="url(//i.mycdn.me/getSmile?smileId=c23a955bf4) no-repeat;width:192px;height:192px"][DECOR=";display:none"] [/DECOR][/DECOR]

20.  
    

    [DECOR="url(//i.mycdn.me/getSmile?smileId=c23a9417f4) no-repeat;width:192px;height:192px"][DECOR=";display:none"] [/DECOR][/DECOR]

21.  
    

    [DECOR="url(//i.mycdn.me/getSmile?smileId=c23a934af4) no-repeat;width:192px;height:192px"][DECOR=";display:none"] [/DECOR][/DECOR]

22.  
    

    [DECOR="url(//i.mycdn.me/getSmile?smileId=c23a9379f4) no-repeat;width:192px;height:192px"][DECOR=";display:none"] [/DECOR][/DECOR]

23.  
    

    [DECOR="url(//i.mycdn.me/getSmile?smileId=c23a9544f4) no-repeat;width:192px;height:192px"][DECOR=";display:none"] [/DECOR][/DECOR]

24.  
    

    [DECOR="url(//i.mycdn.me/getSmile?smileId=c23a9552f4) no-repeat;width:192px;height:192px"][DECOR=";display:none"] [/DECOR][/DECOR]

25.  
    

    [DECOR="url(//i.mycdn.me/getSmile?smileId=c23a9688f4) no-repeat;width:192px;height:192px"][DECOR=";display:none"] [/DECOR][/DECOR]

26.  
    

    [DECOR="url(//i.mycdn.me/getSmile?smileId=c23a9538f4) no-repeat;width:192px;height:192px"][DECOR=";display:none"] [/DECOR][/DECOR]

27.  
    

    [DECOR="url(//i.mycdn.me/getSmile?smileId=c23a9682f4) no-repeat;width:192px;height:192px"][DECOR=";display:none"] [/DECOR][/DECOR]

28.  
    

    [DECOR="url(//i.mycdn.me/getSmile?smileId=c23a968af4) no-repeat;width:192px;height:192px"][DECOR=";display:none"] [/DECOR][/DECOR]

[ErikPshat]

1.  
   

   [DECOR="url(//i.mycdn.me/getSmile?smileId=9b439a389b) no-repeat;width:128px;height:128px"][DECOR=";display:none"] [/DECOR][/DECOR]

2.  
   

   [DECOR="url(//i.mycdn.me/getSmile?smileId=9b439b0d9b) no-repeat;width:128px;height:128px"][DECOR=";display:none"] [/DECOR][/DECOR]

3.  
   

   [DECOR="url(//i.mycdn.me/getSmile?smileId=9b4399ae9b) no-repeat;width:128px;height:128px"][DECOR=";display:none"] [/DECOR][/DECOR]

4.  
   

   [DECOR="url(//i.mycdn.me/getSmile?smileId=9b439b439b) no-repeat;width:128px;height:128px"][DECOR=";display:none"] [/DECOR][/DECOR]

5.  
   

   [DECOR="url(//i.mycdn.me/getSmile?smileId=9b439a439b) no-repeat;width:128px;height:128px"][DECOR=";display:none"] [/DECOR][/DECOR]

6.  
   

   [DECOR="url(//i.mycdn.me/getSmile?smileId=9b4399e19b) no-repeat;width:128px;height:128px"][DECOR=";display:none"] [/DECOR][/DECOR]

7.  
   

   [DECOR="url(//i.mycdn.me/getSmile?smileId=9b439b679b) no-repeat;width:128px;height:128px"][DECOR=";display:none"] [/DECOR][/DECOR]

8.  
   

   [DECOR="url(//i.mycdn.me/getSmile?smileId=9b439ad49b) no-repeat;width:128px;height:128px"][DECOR=";display:none"] [/DECOR][/DECOR]

9.  
   

   [DECOR="url(//i.mycdn.me/getSmile?smileId=9b439aeb9b) no-repeat;width:128px;height:128px"][DECOR=";display:none"] [/DECOR][/DECOR]

10.  
    

    [DECOR="url(//i.mycdn.me/getSmile?smileId=9b439a639b) no-repeat;width:128px;height:128px"][DECOR=";display:none"] [/DECOR][/DECOR]

11.  
    

    [DECOR="url(//i.mycdn.me/getSmile?smileId=9b439a6f9b) no-repeat;width:128px;height:128px"][DECOR=";display:none"] [/DECOR][/DECOR]

12.  
    

    [DECOR="url(//i.mycdn.me/getSmile?smileId=9b439ae49b) no-repeat;width:128px;height:128px"][DECOR=";display:none"] [/DECOR][/DECOR]

13.  
    

    [DECOR="url(//i.mycdn.me/getSmile?smileId=9b439b019b) no-repeat;width:128px;height:128px"][DECOR=";display:none"] [/DECOR][/DECOR]

14.  
    

    [DECOR="url(//i.mycdn.me/getSmile?smileId=9b439ac39b) no-repeat;width:128px;height:128px"][DECOR=";display:none"] [/DECOR][/DECOR]

15.  
    

    [DECOR="url(//i.mycdn.me/getSmile?smileId=9b439a559b) no-repeat;width:128px;height:128px"][DECOR=";display:none"] [/DECOR][/DECOR]

16.  
    

    [DECOR="url(//i.mycdn.me/getSmile?smileId=9b4399ed9b) no-repeat;width:128px;height:128px"][DECOR=";display:none"] [/DECOR][/DECOR]

17.  
    

    [DECOR="url(//i.mycdn.me/getSmile?smileId=9b439b519b) no-repeat;width:128px;height:128px"][DECOR=";display:none"] [/DECOR][/DECOR]

18.  
    

    [DECOR="url(//i.mycdn.me/getSmile?smileId=9b439a4f9b) no-repeat;width:128px;height:128px"][DECOR=";display:none"] [/DECOR][/DECOR]

19.  
    

    [DECOR="url(//i.mycdn.me/getSmile?smileId=9b439b309b) no-repeat;width:128px;height:128px"][DECOR=";display:none"] [/DECOR][/DECOR]

20.  
    

    [DECOR="url(//i.mycdn.me/getSmile?smileId=9b439b5f9b) no-repeat;width:128px;height:128px"][DECOR=";display:none"] [/DECOR][/DECOR]

21.  
    

    [DECOR="url(//i.mycdn.me/getSmile?smileId=9b439b399b) no-repeat;width:128px;height:128px"][DECOR=";display:none"] [/DECOR][/DECOR]

22.  
    

    [DECOR="url(//i.mycdn.me/getSmile?smileId=9b43ee364a) no-repeat;width:128px;height:128px"][DECOR=";display:none"] [/DECOR][/DECOR]

23.  
    

    [DECOR="url(//i.mycdn.me/getSmile?smileId=9b439b199b) no-repeat;width:128px;height:128px"][DECOR=";display:none"] [/DECOR][/DECOR]

24.  
    

    [DECOR="url(//i.mycdn.me/getSmile?smileId=9b439b6f9b) no-repeat;width:128px;height:128px"][DECOR=";display:none"] [/DECOR][/DECOR]

25.  
    

    [DECOR="url(//st.mycdn.me/static/emoji/3-0-2/32/1f1f7-1f1fa.png) no-repeat;width:32px;height:32px"][DECOR=";display:none"] [/DECOR][/DECOR]

26.  
    

    [DECOR="url(//i.mycdn.me/getSmile?smileId=9b079b4136) no-repeat;width:32px;height:32px"][DECOR=";display:none"] [/DECOR][/DECOR]

27.  
    

    [DECOR="url(//i.mycdn.me/getSmile?smileId=9b3c2d1af7) no-repeat;width:32px;height:32px"][DECOR=";display:none"] [/DECOR][/DECOR]

28.  
    

    [DECOR="url(//i.mycdn.me/getSmile?smileId=9b079a3836) no-repeat;width:32px;height:32px"][DECOR=";display:none"] [/DECOR][/DECOR]

29.  
    

    [DECOR="url(//i.mycdn.me/getSmile?smileId=6b0cb77e54) no-repeat;width:40px;height:32px"][DECOR=";display:none"] [/DECOR][/DECOR]

30.  
    

    [DECOR="url(//i.mycdn.me/getSmile?smileId=76b45120a8) no-repeat;width:40px;height:30px"][DECOR=";display:none"] [/DECOR][/DECOR]

31.  
    

    [DECOR="url(//i.mycdn.me/getSmile?smileId=2ab16445aa) no-repeat;width:28px;height:32px"][DECOR=";display:none"] [/DECOR][/DECOR]

32.  
    

    [DECOR="url(//i.mycdn.me/getSmile?smileId=2a94ec7fab) no-repeat;width:40px;height:32px"][DECOR=";display:none"] [/DECOR][/DECOR]

[Padre12]

 
[DECOR="url(//vk.com/sticker/1-10671-128) no-repeat;width:128px;height:128px"][DECOR=";display:none"] [/DECOR][/DECOR]

Ну вот как то так получается со стикерами из вк
И Вот вам 10 смайликов
 
[DECOR="url(//vk.com/sticker/1-1-128) no-repeat;width:128px;height:128px"][DECOR=";display:none"] [/DECOR][/DECOR]
 
[DECOR="url(//vk.com/sticker/1-2-128) no-repeat;width:128px;height:128px"][DECOR=";display:none"] [/DECOR][/DECOR]
 
[BACKDARK][DECOR="url(//vk.com/sticker/1-3-128) no-repeat;width:128px;height:128px"][DECOR=";display:none"] [/DECOR][/DECOR][/BACKDARK]
 
[BACKDARK][DECOR="url(//vk.com/sticker/1-4-128) no-repeat;width:128px;height:128px"][DECOR=";display:none"] [/DECOR][/DECOR][/BACKDARK]
 
[BACKDARK][DECOR="url(//vk.com/sticker/1-5-128) no-repeat;width:128px;height:128px"][DECOR=";display:none"] [/DECOR][/DECOR][/BACKDARK]
 
[BACKDARK][DECOR="url(//vk.com/sticker/1-6-128) no-repeat;width:128px;height:128px"][DECOR=";display:none"] [/DECOR][/DECOR][/BACKDARK]
 
[BACKDARK][DECOR="url(//vk.com/sticker/1-7-128) no-repeat;width:128px;height:128px"][DECOR=";display:none"] [/DECOR][/DECOR][/BACKDARK]
 
[BACKDARK][DECOR="url(//vk.com/sticker/1-8-128) no-repeat;width:128px;height:128px"][DECOR=";display:none"] [/DECOR][/DECOR][/BACKDARK]
 
[DECOR="url(//vk.com/sticker/1-9-128) no-repeat;width:128px;height:128px"][DECOR=";display:none"] [/DECOR][/DECOR]
 
[DECOR="url(//vk.com/sticker/1-10-128) no-repeat;width:128px;height:128px"][DECOR=";display:none"] [/DECOR][/DECOR]

[Padre12]

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

[Padre12]

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