CSS-оформление SF+

+167

Предлагаю желающим вариант обновлённого оформления страничек, который разрабатывался с февраля этого года. Его особенность — в том, что вся стандартная разметка сайта остаётся на месте (ничего не сдвинуто ни на пиксель) — просто добавлены полупрозрачность и возможность быстро задавать свои цвета.

Цвета всех элементов связаны при помощи переменных — и объединены всего в шесть групп. Их настройки вынесены в самый верх кода — своеобразное «пользовательское меню».

То есть если нужно что-то поменять, то просто прописываем свои числа в блоке :root, вставляем ссылку на свои обои между пустых кавычек в блоке body — и наслаждаемся. Ниже линии решёток следует весь основной код, и если мы неважно в этом разбираемся, то просто не трогаем ничего дальше этой линии.

Собственно, весь ключевой цвет задаётся пунктом --color-04. Это ссылки и рамки. Остальные цвета можно не менять. Стандартная непрозрачность страницы (0.65, то есть 65%) в большинстве случаев как раз достаточна.

По умолчанию это оформление — такое же, как на данной странице: чёрно-голубое.

Фон просмотрщика изображений тоже сделан чёрным, и пусть вас не пугает вся эта мрачность, потому что на тёмных фонах становится лучше видно много мелких деталей, а это — главное.

Примеры разноцветных оформлений:

http://squarefaction.ru/game/bytovoj-podvig

http://squarefaction.ru/game/ace-combat-3-electrosphere

http://squarefaction.ru/game/panzer-front

Скопировать данный код можно из-под самого нижнего спойлера здесь: http://squarefaction.ru/userlist/159337

Затем вставляем код в консольку, которая всплывает по кнопке «Оформление» в меню управления страницей игры, после чего — сохраняем. Вкладка «CSS» доступна с 10-го уровня.

Какое-то время всё ещё может дорабатываться, хотя за полгода все заметные неполадки вроде бы устранены.

Автор Aleksandrоv 24 августа 2023, 16:00 (4571 просмотр)

Комментарии

Ranmabaka 24 августа 2023, 16:29

+20

Думаю, что к обоям можно сразу добавить background-attachment: fixed и background-size: cover. Хотя на странице для обоев есть отдельный элемент background-image, но я так им ни разу сам и не воспользовался

P.S. Если планируются какие-нибудь изменения в коде, то возможно стоит вынести оформление в отдельный файл и загрузить его на какой-нибудь ресурс с поддержкой изменения файла без изменения ссылки (я для этого использую dropbox). Тогда в случае обновления пользователям не придется по всем страницам лазать и обновлять код ;)

Aleksandrоv 24 августа 2023, 16:32

Ranmabaka, оно уже и есть; body ещё дублируется ниже решётки. Просто на самом верху — только ходовые настройки, а эти функции — так сказать, константы :)

Ranmabaka 24 августа 2023, 16:37

Aleksandrоv, Ауч, соррян, не заметил :(

AGITatOr 24 августа 2023, 16:33

+40

Нет од, позже отмечу. Круто что развивается обучение нубов, типа меня.

оффтоп
Ладно, пойду свои три бутылочки с кучей закуса пить и чё-нить смотреть.

Aleksandrоv 24 августа 2023, 16:34

+19

AGITatOr, приятного аппетита. Я и сам всего пару лет назад ничего не понимал — чуток освоился, подсматривая у других и иногда заглядывая в справочники.

Harle 24 августа 2023, 16:40

+40

А у меня такой макет для инди-игр :).

Aleksandrоv 24 августа 2023, 16:44

Harle, тоже хорошо и легковесно, но что-то с кнопками списков пользователей — белые на светло-сером :)

Щепыч 24 августа 2023, 16:53

Ну это лучше, чем ярко белое на абсолютно черном. Не так глаза режет контрастностью.

Harle 24 августа 2023, 16:58

Aleksandrоv, поди отвалилось.

Aleksandrоv 24 августа 2023, 17:14

Harle, теперь всё отлично :)

Aleksandrоv 27 ноября 2023, 22:51

+60

Сделал знак онлайна на портретах в комментариях простым кружочком и объединил его цвет с цветом плюсов. Не знаю, почему по умолчанию там скруглённый квадрат — так ведь красивее намного. Если кому тоже нужно, то можете обновить у себя код.

Aleksandrоv 22 декабря 2023, 03:54

+86

Добавил в «меню настроек» новую переменную для перекраски всплывающих окон, теперь они отвязаны от цвета страницы. На случай, если нам не нравилась прозрачность здесь:

Спойлер

Aleksandrоv 24 декабря 2023, 05:44

+60

Знаю, надоел, но ещё парочка обновлений:

Комментарии, рейтинги статей и другие мелкие окна теперь всюду в тонких рамках с фонами, как в этом блоге. По-моему, симпатично;
Громоздкая обводка по четырём box-shadow заменена на новый метод outline;
Рамки и линии стали бесцветнее и прозрачнее, чтобы привлекали внимание не они, а информация (можно настраивать по соответствующим переменным).

Aleksandrоv 29 мая 2024, 16:21

+40

Вернул фон для поля с датой публикации, в конце статей и блогов. Без него было что-то не так, недоставало нужной границы. Объединён с оформлением комментариев и т.п. Если статей у ваших страниц нет, то на эту правку можно не обращать внимания.