^

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

+159

20230824170809_36aa7629.png

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

20230826200018_17cec10e.png

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

То есть если нужно что-то поменять, то просто прописываем свои числа в блоке :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 (3469 просмотров)
Комментарии
+20

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

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

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

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

+40

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

оффтоп

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

 

+19

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

+40

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

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

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

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

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

+60

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

+86

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

Спойлер

20231222035539_45dd9ad8.png

+60

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

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