Этот сайт использует файлы cookies. Вы даете разрешение на использование?
Да, разрешаю
jdvsn 
Использование цветов в собственных темах
Дневной и ночной режимы экрана
На сайте Sstories.space существуют дневной и ночной режимы экрана.
Пока мы создаём свои блоги/темы, не используя разметку, задающую цвета шрифта и фона, наши тексты отображаются сайтом контрастно: чёрный шрифт на белом фоне в дневном режиме и белый шрифт на чёрном фоне в ночном режиме; при этом, также корректно отображается разметка стилей текста (жирный, наклонный, перечёркнутый и пр.)
Но если мы начнём задавать шрифту или отдельным предложениям/словам цвет, то могут возникнуть проблемы.—
Например, если мы зададим шрифту тёмно-синий цвет, то он будет плохо различим на чёрном фоне в ночном режиме; а если мы зададим светло-серый цвет шрифта, то его будет сложно читать на белом фоне дневного режима.
В таких случаях рекомендуется задавать ещё и цветовой фон всей теме или отдельным блокам текста, чтобы они отображались так, как мы задумали, независимо от дневного и ночного режимов экрана.
Теги цвета шрифта и фонa
Для задания цвета шрифту и фону на сайте Sstories.space существуют два тега:
Для задания цветового оформления всему тексту или отдельному блоку, эти теги используются одновременно - один тег вкладывается в дугой, а в середину помещается текст:
теперь эта фраза будет отображаться одинаково, не зависимо от ночного и дневного режима экрана.
(☠️Плюсы перед color и bcolor ставить не нужно.
Я пишу их в примерах, для того чтобы теги не работали и оставались видимыми)
⚠️Важно! Обратите внимание на то, что закрывающие теги идут в обратной последовательности по отношению к открывающим, потому что теги именнно вложены друг в друга. Можно показать это нагляднее, как в языках программирования:
Здесь видно, что фраза [+color=#FFFFFF]это — белый шрифт на чёрном фоне[+/color] вложена между тегами [+bcolor] и [+/bcolor];
но писать разметку так не нужно: переносы строк и лишние пробелы будут напечатаны и растянут тему по вертикали, как гармошку :-)
Рекомендации из Дзен по выбору цветов для оформления Ваших тем:
• Выберите от 2 до 5 цветов. Однотонная цветовая гамма может смотреться блекло, но и слишком пестрый блог тяжело воспринимать. Лучше выбрать от двух до пяти цветов и пользоваться ими;
• Составьте палитру. Для этого можно воспользоваться цветовым кругом. Хорошо сочетаются друг с другом цвета, которые находятся на нем рядом или, наоборот, друг напротив друга;
• Пользуйтесь правилом «60-30-10». Есть основной цвет, дополнительный и акцентные. Основным выкрашено до 60% обложек и иллюстраций, дополнительным — 30%, а 10% уходит на акценты. Акцентные цвета часто более яркие или контрастные, чем основной и дополнительный;
• Автоматизируйте подбор. Если идей нет совсем, можете воспользоваться сервисами, которые генерируют палитры автоматически. Например,
На сайте Sstories.space существуют дневной и ночной режимы экрана.
Пока мы создаём свои блоги/темы, не используя разметку, задающую цвета шрифта и фона, наши тексты отображаются сайтом контрастно: чёрный шрифт на белом фоне в дневном режиме и белый шрифт на чёрном фоне в ночном режиме; при этом, также корректно отображается разметка стилей текста (жирный, наклонный, перечёркнутый и пр.)
Но если мы начнём задавать шрифту или отдельным предложениям/словам цвет, то могут возникнуть проблемы.—
Например, если мы зададим шрифту тёмно-синий цвет, то он будет плохо различим на чёрном фоне в ночном режиме; а если мы зададим светло-серый цвет шрифта, то его будет сложно читать на белом фоне дневного режима.
В таких случаях рекомендуется задавать ещё и цветовой фон всей теме или отдельным блокам текста, чтобы они отображались так, как мы задумали, независимо от дневного и ночного режимов экрана.
Теги цвета шрифта и фонa
Для задания цвета шрифту и фону на сайте Sstories.space существуют два тега:
[+bcolor=#000000]это — чёрный фон[+/bcolor]
[+color=#FFFFFF]это — белый шрифт[+/color]
Для задания цветового оформления всему тексту или отдельному блоку, эти теги используются одновременно - один тег вкладывается в дугой, а в середину помещается текст:
[+bcolor=#000000][+color=#FFFFFF]это — белый шрифт на чёрном фоне[+/color][+/bcolor]
теперь эта фраза будет отображаться одинаково, не зависимо от ночного и дневного режима экрана.
(☠️Плюсы перед color и bcolor ставить не нужно.
Я пишу их в примерах, для того чтобы теги не работали и оставались видимыми)
⚠️Важно! Обратите внимание на то, что закрывающие теги идут в обратной последовательности по отношению к открывающим, потому что теги именнно вложены друг в друга. Можно показать это нагляднее, как в языках программирования:
[+bcolor=#000000]
+ [+color=#FFFFFF]это — белый шрифт на чёрном фоне[+/color]
[+/bcolor]
Здесь видно, что фраза [+color=#FFFFFF]это — белый шрифт на чёрном фоне[+/color] вложена между тегами [+bcolor] и [+/bcolor];
но писать разметку так не нужно: переносы строк и лишние пробелы будут напечатаны и растянут тему по вертикали, как гармошку :-)
Рекомендации из Дзен по выбору цветов для оформления Ваших тем:
• Выберите от 2 до 5 цветов. Однотонная цветовая гамма может смотреться блекло, но и слишком пестрый блог тяжело воспринимать. Лучше выбрать от двух до пяти цветов и пользоваться ими;
• Составьте палитру. Для этого можно воспользоваться цветовым кругом. Хорошо сочетаются друг с другом цвета, которые находятся на нем рядом или, наоборот, друг напротив друга;
• Пользуйтесь правилом «60-30-10». Есть основной цвет, дополнительный и акцентные. Основным выкрашено до 60% обложек и иллюстраций, дополнительным — 30%, а 10% уходит на акценты. Акцентные цвета часто более яркие или контрастные, чем основной и дополнительный;
• Автоматизируйте подбор. Если идей нет совсем, можете воспользоваться сервисами, которые генерируют палитры автоматически. Например,
создает палитры из пяти случайных цветов, которые сочетаются друг с другом.
Ещё «сахар»:
Ещё «сахар»:
А если есть желание подбирать цвета вручную или брать их с картинок, которые Вы используете в оформлении, то лучше скачать маленькое приложение для этого, которое будет работать без интернета, например —
(Tаких приложений много — выбирайте то, которое Вам больше нравится)
Гармонии и Контрасты
Как правильно пользоваться цветовым кругом Иттена, можно прочитать здесь:
Гармонии и Контрасты
Как правильно пользоваться цветовым кругом Иттена, можно прочитать здесь:
В комментах к этой статье рекомендуется ознакомиться с книгой — вот Вам книга:
Подраздел: ГАЙД по сайту SSTORIES.SPACE
Раздел: FAQ по сайту SSTORIES.SPACE
Файлы темы
Комментарии 0
Пока нет комментариев
Извините, для вас комментирование недоступно
Назад
Администрация
Контакты
Обратная связь
Информация
Верификация
Правила
Тех.поддержка
Онлайн: 1
Гостей: 2