Есть два вида рисования на этом сайте и они никогда не разрешены касаться друг друга. Это правило звучит драгоценно когда я пишу это как это, но это вещь что на самом деле заставила заголовок и фон остановить сражение за внимание.
проблема это решает
Рано, всё на странице было нарисовано одинаково: спрайты пиксельной сетки, жёсткие края, один SVG <rect> за ячейку. Гора заголовка, птицы, всё. Это выглядело нормально вверх близко и полностью плоско как только ты добавляешь что-то предназначенное сидеть дальше назад, как фоновый силуэт позади текстовой колонны. Блочные пиксели читаются как «далёкая гора в дымке» не работает, расстояние в реальном видении мягкое, не блочное. Но иди полностью гладко везде убил вещь я действительно любил про пиксель-арт, что это читается как намеренное и сделано вручную вместо иллюстрации стока вектора.
Исправление не было выбрать один стиль. Было решать, намеренно, какие элементы получают быть хрустящими и какие получают быть мягкими, и никогда не позволяют элементу пересекать оба.
близко: всё что ты смотришь прямо
Начало и конец пути горизонта, маленькие глифы навигации рядом с каждой ссылкой раздела, монограмма BMK горная марка, 404 тупик, луна/солнце значки на переключателе темы, и каждая птица и рыба что действительно летает или плывёт через небо и берег. Все пиксельная сетка. Все построены одинаково: я набрасываю форму как сетка ASCII в комментарии в верхней части компонента, один символ за ячейку, перед написанием единственной строки SVG:
// ......................RRR.MM.....................
// .....................RRRRRMM.....................
// .....................RRRRRR.....................
// ....................RRRRRRRR.....................Это действительный верх высокого горизонта заголовка, R для скалы, . для открытого неба, M для луны что только показывает в тёмном режиме. Как только сетка читается правильно как ASCII, я переводил это в объединённые <rect> пробеги (соседние же-цвета ячейки в строке схлопываются в один более широкий rect вместо одного за ячейку, что держит DOM от вздутия на 48-колонной сетке) с preserveAspectRatio="none" так весь полоса растягивается заполнить его контейнер край к краю без когда-либо пролива на странный ширину видно.
далеко: всё предназначено сидеть назад
Силуэт фонового острова противоположный всему этому. Это одна непрерывная форма, обведённая кубическими кривыми-Безье от реального справочного фото я взял Lovundfjellet, не набросанная ячейка за ячейкой:
const MOUNTAIN_PATH =
'M145,300' +
'C160,250 175,210 195,180' +
'C210,158 225,140 240,133' +
'C258,140 275,155 290,170' +
'C305,195 320,225 335,260' +
...То же реальное снаряжение, одинаковый истинный двух-пиковый профиль (я действительно обвёл версию пиксельная сначала, в точно тех же колонках и рядов координатах, потом преобразовал те якорные точки в гладкие кривые для этого прохода вместо начинания превыше из нуля) но визуализировано как одна мягкая масса вместо ступенчатого силуэта. Сидя позади колонны контента на низкой непрозрачности, это читается как атмосфера, способом что реальная гора делает когда есть деревня и растяжение воды между тобой и ею. Ночь слой созвездия работает то же дорогой, настоящие позиции звезды, но нарисованные как мягкие заполненные круги вместо пиксельных квадратов, потому что «далёкое» звёздное поле сделанное из жёстких пиксельных точек выглядит как баг, не небо.
почему линия имеет значение
Правило я держу себя к что ничто не пересекает оба регистра. Спрайт птицы может быть либо пиксельная-ячейка птица летающая поперёк близкого слоя или мягкий силуэт циркулирующий фоновый остров, никогда половина каждого. Момент ты смешиваешь их внутри одного элемента, твой глаз не может решить как далеко от предполагается быть вещь, и вся иллюзия глубины сваливается. Это дешёвый трюк как только ты видишь оно: хрустящие вещи читаются близко, мягкие вещи читаются далеко, и ты не нуждаешься настоящий параллакс или размытие фильтры售卖 «расстояние», ты просто нуждаешься в согласованной обработке за элемент и никогда не ломай твоё собственное правило полдороги через.
Я сломал оно ровно один раз, рано в переделе, рисующий мягкий фоновый птица с парой жёстких пиксельных ударений на кончике крыла потому что я думал это будет «основание» силуэт немного:
<!-- what I tried: smooth silhouette body, pixel-square wingtip accents -->
<path d={SILHOUETTE_PATH} class="soft-fill" />
<rect x="34" y="12" width="2" height="2" class="pixel-accent" />
<rect x="36" y="12" width="2" height="2" class="pixel-accent" />Это просто выглядело как ошибка рендеринга, как ресурс что не нагружается правильно. Взял ударения назад в то же самое заседание один раз я глянул в это снова следующее утро со свежим глазом, назад к одному непрерывному мягкому пути заполнения и ничто иное касаясь его.
часть я не ожидал
Я вошёл в это думая его как чисто визуальный трюк, близко против далеко, передний план против фона. Что действительно售卖 меня в сохранении правила строгом это что оно также совпадает как внимание работает на странице. Близкие регистровые элементы все вещи я хочу читателя глаз к действительно регистру как деталь смежная контенту, nav глифы говорящие тебе какой раздел ты в, птицы давая странице жизнь. Далёкие регистровые вещи явно декоративные, aria-hidden, pointer-events: none, предназначены быть ощущаемые нежели взглянули на. Держание два визуально отличный обернулся также держать их функционально отличный, что я не планировал но я счастлив случилось.