avuremybe
Администрация XGM

Цвета рамок (уровни)

Добавлен
Концепт
Цветовая палитра взята с пиктограмм металлов World of Warcraft.
Для градации уровней использована знакомая всем геймерам логика редкости предметов:
Уровень Редкость Цвет Металл
1-10 Trash Серый Темное Железо
11-20 Common Зеленый Оскверненное Железо
21-30 Uncommon Голубой Истинное Серебро
31-40 Rare Синий Титановая Сталь
41-50 Mythic Фиолетовый Этерний
51-60 Legendary Оранжевый Медь
v4
  • Уравнял расстояние между цветами всех шести групп.
  • Убавил яркости зелёному, голубому и немного фиолетовому.
  • Общее расстояние между цветами сокращено на 40% (относительно v3).
  • Сместил переход градиента от центра ближе к краю.
  • В выпадающем меню используется текущая система градиента на базе box-shadow.
/* tread avatars border */
background: linear-gradient(145deg, var(--gradient-top) 60%, var(--gradient-btm) 100%);

/* user profile */
background: linear-gradient(105deg, var(--gradient-top) 45%, var(--gradient-btm) 100%);

/* dropdown menu */
background: var(--gradient-top);
box-shadow: inset 0 0 12px 0 var(--gradient-btm);
Dark Iron 
// 1-10
// dark iron
#46413d  // --gradient-top
#67615e	// --gradient-btm
Fel Iron 
// 11-20
// fel iron
#2c9002 // --gradient-top
#5bbb08 // --gradient-btm
True Silver 
// 21-30
// true silver
#63b6c4 // --gradient-top
#8ad8de // --gradient-btm
Titan Steel 
// 31-40
// titan steel
#276497 // --gradient-top
#3290c5 // --gradient-btm
Ethernium 
// 41-50
// ethernium
#7d33a7 // --gradient-top
#9c4ed1 // --gradient-btm
Copper 
// 51-60
// copper
#b94209	// --gradient-top
#cf7524	// --gradient-btm
16 сен 2024
27
`
ОЖИДАНИЕ РЕКЛАМЫ...
0
22
0
Вот сейчас, когда они все вместе, понимаю что истинное серебро нужно менять. Слишком слабо отличается от соседних...
0
38
0
Да, в целом надо думать над этим. Но должны различаться и, что самое важное, быть видны на обеих цветовых схемах, включая фон в меню профиля и фон полосы прогресса
0
22
0
Не так просто оказалось согласовать цвета сразу под темную и белую схему.
Я сейчас пытаюсь во-первых сделать оттенки более сочными, как это получилось с медью. Одинокие яркие элементы хорошо разбавляют общий тон страницы.
Для наглядности
Во-вторых, чтобы все цвета явно отличались, не создавая никакой путаницы.
Общая идея набора цветов останется прежней, но они будут по-другому отсортированы.
Думаю использовать знакомую всем игромэнам (а здесь тусят именно они) градацию от предметов:
  • серый / trash
  • зеленый / common
  • бледно-голубой / uncommon
  • синий / rare
  • фиолетовый / mythic
  • оранжевый / legendary
Цвета, которые я изначально отобрал, практически идеально попадают в эту градацию. Может торий придется заменить на оскверненное железо, чтобы сам цвет был ярче. Посмотрим.
Загруженные файлы
Ответы (5)
0
38
0
avuremybe, большой линейный градиент - это дизайн из нулевых, попробуй аккуратный переход, с минимальным расстоянием между цветами
P.s. Имеется ввиду расстояние в цветовом пространстве, а не в геометрическом
0
22
0
ScorpioT1000, пока выложил то, что переделал.
Смотрите/обсуждайте/предлагайте.
Могу завтра попробовать поэкспериментировать сделать градиент покороче.
Лично мое мнение - это не будет выглядеть как дизайн из нулевых, потому что это 1-2 градиентных элемента на страницу (ну или больше, но сильно маленьких - если это рамки аватаров)
0
22
0
ScorpioT1000, могу накатить сам себе эти изменения через stylish и полазить пару дней по сайту, посмотреть как будет восприниматься..
Но сначала хотелось бы фидбек.
0
38
0
avuremybe, цвета мне нравятся, но градиент... мы совсем недавно ушли от этого. Попробуй снизить разницу от A до B
Ну и там где голубой и зеленый - белый на их фоне не читается
0
22
0
ScorpioT1000, принято.
0
22
0
ScorpioT1000, Вот пример.
Расстояние между цветами обрезано на 20% и 40% относительно варианта в шапке.
Границы смещены равномерно. Можно попробовать сдвинуть на тот же %, но ближе к светлому, например.
Открыть
Какой прорабатывать?
Загруженные файлы
Ответы (3)
0
38
0
avuremybe, третий
мне все еще не нравится линейный градиент в меню и аватарах
попробуй взять ту геометрию градиента, который сейчас есть, но вставить туда третий вариант. Светлый должен быть снаружи
или попробуй сделать выделяющимся только угол - типа 0 - 25%, потом сплошной
надо смотреть, читать тренды
0
22
0
ScorpioT1000, с текущей системой там будет практически сплошной цвет. А накручивать туда прозрачность, как я понимаю, ограничит совместимость со старыми браузерами.
Сделал -30% со смещением в светлую сторону и придавил переход к углу.
На рамках аватаров действительно интересно смотрится:
Открыть
С таким резким переходом, правда, расстояние между цветами и правда надо снижать.
Вот с -40% и теми же настройками. Выглядит лучше:
Открыть
Для дропдаун меню можно соорудить по текущему принципу, с box-shadow.
Там оно действительно лучше выглядит.
Открыть
Загруженные файлы
Полный список
0
22
0
ScorpioT1000, если новых идей не будет - завтра попробую подогнать цвета под последний вариант.
План таков:
  • dropdown-меню по текущей системе с box-shadow. С найстройками поиграюсь.
  • рамки - смещаю градиент к углу, как на последнем скрине и еще чуть понижу расстояние между цветами.
  • аватар в профиле - лично мне нравится вариант -40% расстояние и немного смещенный переход.
0
22
0
Обновил первый пост
  • Уравнял расстояние между цветами всех шести групп.
  • Убавил яркости зелёному, голубому и немного фиолетовому.
  • Общее расстояние между цветами сокращено на 40% (относительно v3).
  • Сместил переход градиента от центра ближе к краю.
  • В выпадающем меню используется текущая система градиента на базе box-shadow.
Возможно, стоит убавить яркость var(--gradient-btm) для темной темы, но это не точно.
У меня уже глаз замылился, чтоб это всё адекватно оценивать))
Жду комментариев
Ответы (3)
0
38
0
avuremybe, слушай, вот это прям то что надо, спасибо, вернусь скоро буду пробовать
0
22
0
ScorpioT1000, мне тоже этот вариант нравится больше, чем изначальный.
Твоя идея со смещением перехода градиента к углу - прям очень хорошо выглядит.
0
38
0
avuremybe, вообще предлагал сместить к левому-верхнему как у иконок windows 11, но и так хорошо
Чтобы оставить комментарий, пожалуйста, войдите на сайт.