Пишет quirischa:
11.12.2019 в 12:10
Обратите внимание, что в отличие от табличного и блочного дизайнов, которые в каком-то смысле взаимозаменяемы, адаптивный дизайн дневника — это совершенно новый, я бы сказал, отдельный вид оформления.URL комментария
Нельзя просто так сменить тип оформления на адаптивный, и всё адаптируется. Увы, но адаптивный дизайн нужно создавать с нуля.
Кроме того, сейчас пока нормально не работает и предпросмотр дизайна в настройках. Но мы скоро это починим.
* * *
Настройки цветовой гаммы делятся на "Цвет текста" и "Цвет фона".
Во вкладке "Цвет текста":
- "Текст" - цвет основного текста записей
- "Меню" - цвет элементов на плашке меню (лого, иконки, ссылки)
- "Акценты" - это цветовые акценты страницы (заголовки, ссылки, бордеры — всё то, что выделяется на фоне остального)
- "Прочее" - то, что по смыслу на второстепенном плане (служебные ссылки, иконки и т.д.)
Во вкладке "Цвет фона"
- "Фон дневника" - цвет фона ниже плашки меню. Может быть незаметен, если закачана фоновая картинка.
- "Фон записи" - цвет подложки под постами, заголовками и прочее.
- "Фон меню основной" - цвет плашки меню
- "Фон меню дополнительный" - цвет средней (юзерской) части меню и выпадающих блоков.
* * *
Можно придерживаться вот таких общих советов по применению цветовой схемы:
1. Старайтесь по возможности минимизировать количество используемых цветов.
Например, цвет Акцентов и цвет Текста делать одинаковыми. Также одинаковыми можно фоны Основного и Дополнительного меню.
2. Второстепенные элементы страницы (Оформление → Цвет текста → Прочее) лучше устанавливать в бледное/ненасыщенное/неяркое значение.
3. Фон дневника и Фон записи устанавливать в одинаковые значения, визуальных разделителей между записями и так хватает.
4. Устанавливать Фон записи только если задана фоновая картинка.
5. При использовании фонового рисунка устанавливать нейтральные цвета дневника (оттенки серого).
6. Вкладка Шрифты. Обычно размер заголовка устанавливается на пару пунктов больше размера основного текста, тогда проще считывается визуальная иерархия текстов.
* * *
Для адаптивного дизайна доступны свои настройки CSS. С их перечнем можно ознакомиться в статье Справки.
08.01.2020 в 00:59
08.01.2020 в 01:09
08.01.2020 в 01:11
08.01.2020 в 01:24
08.01.2020 в 01:26
В связи с написанием этого кода родилось предложение: https://design2019.diary.ru/p218840061.htm Если есть желающие, можете поддержать
08.01.2020 в 01:30
08.01.2020 в 01:30
08.01.2020 в 01:34
08.01.2020 в 01:35
Фон дневника:
#3e4e5b
Фон меню осн.:
#3e4e5b
Фон записи:
#3e4e5b
Фон меню доп.:
#4c011a
08.01.2020 в 01:36
08.01.2020 в 10:52
Речь про цвет основного текста относительно фона, т.е. #000 на #3e4e5b. Тут либо осветлять текст, либо фон. Например, белый цвет текста #fff. Если это слишком ярко, то цвет текста хотя бы #c2c2c2 даст уровень «миниальный контраст».
08.01.2020 в 14:00
09.01.2020 в 17:26
Чтобы для совсем чайника объяснили, как сделать фон записи прозрачным, как изменять градиент прозрачности и цвет прозрачного фона. И можно ли сделать в новом дизе вверху поста красивую финтифлюшку, по-моему, это называется экстратоп. И если можно, то как.
09.01.2020 в 17:54
Цвет с прозрачностью задаётся следующим образом в CSS (это значение свойства, без названия): rgba(rr, gg, bb, aa)
где rr — 0-255 красный компонент цвета;
gg — 0-255 зелёный компонент цвета;
bb — 0-255 синий компонент цвета;
aa — 0-1 непрозрачность (не обязательно целое число, например, 0.9 — слегка прозрачный).
Градиент: linear-gradient(to right, цвет, цвет, цвет, цвет...)
где to right — направление градиента, может быть и to left, to bottom to top. А можно и просто в градусах, например, 45deg (to в этом случае не пишется, если что).
цвет — любой CSS цвет, либо в формате #rrggbb, либо как выше с rgba().
Градиент считается изображением, а не цветом, поэтому ставится туда, куда встают картинки в CSS. Например, background-image.
Чтобы убрать/изменить фон из постов, нужно редактировать свойства .post-list .item и #epigraph. Например:
Хотя не исключено, что ещё у каких-нибудь блоков (в т.ч. внутри) может быть указан какой-либо цвет фона.
Также у градиентов можно указывать фиксированные позиции для стоп-точек, если это нужно, например: linear-gradient(130deg, #fff, #dcffcd 20%, #a6afff 70%, #a62d2f);
09.01.2020 в 18:45
09.01.2020 в 18:53
09.01.2020 в 19:52
26.01.2020 в 00:09
Я вроде собрала все, что могла. Но картинка в эпиграфе теперь стала меньше, чем должна быть. Не пойму, в чем затык - скопировала тут коды для эпиграфа (взяла выше).
26.01.2020 в 00:37
В дополнение к тому, что выше:
Так было?
26.01.2020 в 00:40
05.02.2020 в 14:57
05.02.2020 в 17:46
05.02.2020 в 18:11
05.02.2020 в 19:29
priest_sat, да, просто туда вставить, в это окошко css
05.02.2020 в 20:24