Сайты для вдохновения #2
Нам так нравится страница этого героя сайта, что нам действительно нужно найти какой-то бюджет для большего дисплея, просто чтобы посмотреть, что произойдет, если мы растянем ее дизайн еще больше. Сразу же отправляйтесь на ее сайт и проверьте его отзывчивость по максимуму. Это гораздо больше, чем просто потрясающе. Это также отличное место для того, чтобы проверить ее крутые веб-проекты, где она пишет о вещах и искусстве. Наконец, не пропустите ежегодный раздел обновления портфолио с хронологией обновления личного веб-сайта, который отражает некоторые интересные разработки веб-дизайна в целом.
humans.fyi
Тематическое исследование: lynnandtonic.com обновление 2019 года
26 ноября 2019 года я выпустила свое последнее обновление портфолио. Как и в предыдущие два года, я хотела создать опыт, который был улучшен путем изменения размера окна браузера. Версия 2017 года дала вам новый макет каждые 100 пикселей, а версия 2018 года создала кадр за кадром анимации .
В этом году я изначально намеревалась сделать что-то с осью z и исследовать глубину и движение вперед/назад. Мне понравилась идея использовать многослойную иллюстрацию для имитации путешествия в пространстве. Что-то вроде Красавицы и Чудовища , но, возможно, вы путешествуете через разные миры или через крошечные двери, такие как Алиса в Стране Чудес.
Но что меня действительно взволновало, так это концепция русской матрешки. Вы открываете одно и то же, но внутри существует нечто совершенно иное.
Я начала с идеи автопортрета, который треснул, открывая новые лица, когда вы масштабировали браузер. Дальнейшее масштабирование будет увеличиваться, каждая внешняя голова становится размытой и в конечном итоге покидает кадр, когда вы двигаетесь вперед. Я надеялась, что он будет чувствовать себя динамичным, как если бы он существовал в трехмерном пространстве.
Я начала реализовывать это в HTML и CSS, чтобы увидеть, будет ли это выглядеть так, как я себе представляла. Я настроила его с относительной шириной и высотой, чтобы иллюстрации заполнили все окно браузера. Еще до того, как я смогла добавить некоторые тонкие преобразования и переходы, браузеры закричали в знак протеста. Сафари как будто говорил: "НЕТ!" и буквально перестал что-либо передавать.
Ну и ну... и что теперь?
Я пробовала вещи с абсолютными размерами пикселей, и все работало намного лучше. Меньшее количество вычислений для браузера, чтобы сделать, казалось, как верный путь вперёд. Так что вместо увеличения масштаба, возможно, на более широкой ширине вы могли бы видеть каждое лицо в странном горизонтальном стеке.
Подготовка художественного произведения
Когда я иллюстрировала разные лица, я поняла, что была ограничена в основном овальной формой оригинального портрета. Каждое последующее лицо скрыто за тем, что предшествует ему, и для поддержания “раскрытия” они должны оставаться скрытыми, пока не придет их очередь.
Это ограничение помогло мне довольно быстро двигаться с иллюстрациями. Я смогла найти вдохновение в вещах, которые мне нравятся, и в художественных стилях, которыми я восхищаюсь. Особенно забавными были почтения Лихтенштейна и Пикассо.
Сохранение головок в основном одинакового размера и формы также значительно упростило расчеты макета (хотя он может выглядеть довольно угловато в моих исходных файлах). Я буду погружаться в это еще немного.
Выкладываю все по порядку
Каждая грань состоит из контейнера div и двух изображений (по одному для каждой стороны грани). Разметка выглядит так:
<div class="face" id="blue">
<img src="left-blue.svg" class="left" />
<img src="right-blue.svg" class="right" />
</div>
Есть три основных стиля представления, чтобы создать эффект открытия. Каждый div из них имеет определенное min-width и каждое изображение позиционируется определенное значение слева и справа.
Итак, первоначальное синее лицо получает стилизацию, как это:
.face#blue {
width: 100vw;
min-width: 620px;
.left {
position: absolute;
left: 110px;
}
.right {
position: absolute;
right: 110px;
}
}
Вот диаграмма, которая может помочь визуализировать, как это выглядит.
Следующее лицо (череп) имел бы стиль, который выглядел примерно так:
.face#skull {
width: 100vw;
min-width: 840px;
.left {
position: absolute;
left: 220px;
}
.right {
position: absolute;
right: 220px;
}
}
Каждая последующая грань будет иметь скорректированные значения min-width, left, и right, чтобы они были расположены правильно для создания раскрытия в масштабе браузера.
Привязка к позиции
Маленькая деталь, которую я люблю, - это масштабирование лиц и небольшое движение, когда они открываются. Это создает эффект "привязки", который добавляет некоторое измерение.
Это достигается для каждой грани с помощью двух медиа-запросов в быстрой последовательности и преобразований CSS.
@media screen and (min-width: 621px) {
.face#blue .left {
transform: scale(1.07) translate(-6px,0);
}
.face#blue .right {
transform: scale(1.07) translate( 6px,0);
}
}
@media screen and (min-width: 629px) {
.face#blue .left {
transform: scale(1.07) translate(-6px,7px);
}
.face#blue .right {
transform: scale(1.07) translate( 6px,7px);
}
}
Это может показаться мелочью, но она многое добавляет.
Тени и маскировка
Одним из самых сложных аспектов этой концепции было заставить тени вести себя так, как я хотела.
Когда лица перекрывали друг друга, я хотела, чтобы каждое отбрасывало тень на лицо под ним. CSS-маскировка делает это возможным. Как вы можете видеть в gif ниже, тень должна отображаться только на поверхности черепа, но она должна быть “приклеена” к синему лицу, когда они движутся. У меня есть полный linear-gradient и маска в оранжевом цвете, показанная слева, и эффект, который она создает справа.
Я изначально планировала добавить маску к каждому <div class="face"> и использовать :after ее для тени, но есть забавная ошибка браузера, с которой мне пришлось работать. В Chrome position: fixed не работает, если у родителя этого элемента применено преобразование (помните эту оснастку?). И position: fixed был обязан получить тот эффект, который я хотела.
Таким образом, разметка для каждой маски заканчивалась так: как родное лицо соответствующего лица.
<span class="mask">
<div class="left" ></div>
<div class="right"></div>
</span>
<div class="face" id="pizza">
...
</div>
На левой и правой div стороне нанесена маска. Это SVG, который помещается в те же левые/правые значения, что и лицо (в данном случае череп). :after Псевдо-элемент, который рисует тень.
.mask {
bottom: 200px;
}
.mask .left {
mask-image: url('left-skull-mask.svg');
mask-position: left 220px top 0;
mask-size: auto 400px;
}
.mask .right {
mask-image: url('right-skull-mask.svg');
mask-position: right 220px top 0;
mask-size: auto 400px;
}
.mask .left:after {
position: fixed;
left: 220px;
background-image: linear-gradient(to right, rgba(0,0,0,.3) 50%, transparent 57%);
}
.mask .right:after {
position: fixed;
right: 220px;
background-image: linear-gradient(to left, rgba(0,0,0,.3) 50%, transparent 57%);
}
Из-за этой ошибки Chrome мне приходится немного вручную менять каждую маску, чтобы учесть snap-преобразование:
@media screen and (min-width: 841px) {
.mask {
bottom: 186px;
}
.mask .left {
mask-position: left 207px top 0;
mask-size: auto 428px;
}
.mask .right {
mask-position: right 207px top 0;
mask-size: auto 428px;
}
}
@media screen and (min-width: 849px) {
.mask {
bottom: 178px;
}
}
Тени, работающие таким образом, дают некоторую глубину и размерность каждому слою, когда он движется впереди и позади других.
Препроцессоры-это замечательно
У меня есть упрощенный CSS здесь, чтобы показать основы того, как все работает. Но если вы посмотрите на мой Файл stylus для этой страницы, все немного по-другому настроено. Я не буду слишком углубляться в это, чтобы спасти все наши мозги, но вот краткий обзор.
Поскольку вычисления были довольно последовательными для разных лиц, я смогла установить переменные и создать миксины, которые вычисляли все различные значения poitioning для меня. Поэтому для ширины лица я устанавливаю переменные, такие как это:
$face-1 = 620px $face-2 = $face-1 + 220 $face-3 = $face-2 + 220 $face-4 = $face-3 + 220 $face-5 = $face-4 + 220 ...
И тогда мой mixin мог бы выглядеть так:
face(num,width,width2)
min-width: width
bottom: var(--face-y)
z-index: (32 - (num * 2))
img.right
right: (100px * num + 10 * num)
img.left
left: (100px * num + 10 * num)
@media screen and (min-width: width + 1)
img.right
transform: scale(1.07) translate( 6px,0)
img.left
transform: scale(1.07) translate(-6px,0)
@media screen and (min-width: width + 9)
img.right
transform: scale(1.07) translate( 6px,7px)
img.left
transform: scale(1.07) translate(-6px,7px)
@media screen and (max-width: width2)
opacity: 0
(Я использую пользовательское свойство var (--face-y) здесь, чтобы расположить грани из нижней части браузера для различных вертикальных запросов мультимедиа):
:root
@media screen and (max-height: 550px)
--face-y: 50px
@media screen and (min-height: 551px)
--face-y: 200px
@media screen and (min-height: 820px)
--face-y: 400px
@media screen and (min-height: 1100px)
--face-y: 570px
Но вернемся к этой mixin.
Затем я смогла создать каждое лицо с этим коротким стилем объявления. Настройка вещей, подобных этому, :nth-of-type позволила мне изменить порядок и удалить / добавить лица в разметке без необходимости настраивать какой-либо CSS. (Это также является причиной того, что грани и маски являются различными типами элементов, divs и spans соответственно.)
.face:nth-of-type(1)
face(1,$face-1,0)
.face:nth-of-type(2)
face(2,$face-2,$face-1)
.face:nth-of-type(3)
face(3,$face-3,$face-2)
.face:nth-of-type(4)
face(4,$face-4,$face-3)
.face:nth-of-type(5)
face(5,$face-5,$face-4)
...
Маски также получают mixin (что немного сложнее). Математика, amirite?
$shadow-h = 428px
mask(num,name,width,width2)
min-width: width
z-index: (32 - (num * 2) + 1)
bottom: var(--face-y)
@media screen and (min-width: width + 1)
bottom: calc(var(--face-y) - 14px)
@media screen and (min-width: width + 9)
bottom: calc(var(--face-y) - 22px)
.left,
.right
min-width: width
@media screen and (min-width: width + 1)
height: $shadow-h
mask-size: auto $shadow-h
.left
mask-image: url('/assets/images/left-' + name + '-mask.svg')
mask-position: left (100px * num + 10 * num) top 0
@media screen and (min-width: width + 1)
mask-position: left (100px * num + 10 * (num - 1) - 3) top 0
&:after
left: (100px * num + 10 * num)
.right
mask-image: url('/assets/images/right-' + name + '-mask.svg')
mask-position: right (100px * num + 10 * num) top 0
@media screen and (min-width: width + 1)
mask-position: right (100px * num + 10 * (num - 1) - 3) top 0
&:after
right: (100px * num + 10 * num)
@media screen and (max-width: width2)
opacity: 0
С помощью этого mixin я могу создать каждую маску с короткой декларацией (внутри @supports для хорошей меры).
@supports(mask-image: url(''))
.mask:nth-of-type(2)
mask(2,skull,$face-2,$face-1)
.mask:nth-of-type(3)
mask(3,pizza,$face-3,$face-2)
.mask:nth-of-type(4)
mask(4,pops,$face-4,$face-3)
.mask:nth-of-type(5)
mask(5,mustache,$face-5,$face-4)
...
Есть еще несколько забавных Stylus вещей, которые делают этот процесс забавным и управляемым для меня. Если вы хотите покопаться в этом, взгляните на GitHub .
Прочие детали
Там есть множество вещей для меня, чтобы наслаждаться и для вас, чтобы открыть для себя что-то интересное в этом обновлении, но я скажу, что одна из моих любимых частей - это комбинация шлема и лица киборга. Я знала, что хочу где-то поиграть с прозрачностью, и мне нравится, как изменение размера шлема раскрывает еще больше возможностей для этого.
И конечно, я люблю крошечную эластичную Линн в центре всего этого. Протянутая рука была последним дополнением и блестящим предложением от моего друга Ричарда. Левые / правые механические рычаги и шкивы не могли использовать мои хорошие миксины, поэтому мне пришлось написать что-то дополнительное для них. Я понимаю, что не у всех есть гигантский монитор, чтобы увидеть это, но я действительно любил его и хотел включить.
И конечно, я люблю крошечную эластичную Линн в центре всего этого. Протянутая рука была последним добавлением минуты и блестящим предложением от моего друга Ричарда . Левые / правые механические руки и шкивы не могли использовать мои хорошие миксины, поэтому мне пришлось написать что-то дополнительное для них . Я понимаю, что не у всех есть гигантский монитор, чтобы увидеть это, но я действительно полюбила это и хотела включить.
Кроме того, вертикальные медиа-запросы + щенки. ❤
Много хороших вещей выучила
Я всегда узнаю что-то новое с этими обновлениями, и этот не был исключением.
Я должна попробовать маскировку и обнаружить все странные проблемы браузера с ней (Edge, почему вы оставляете артефакты?). Я стала довольно хороша в позиционировании и поломала мозги, выясняя повторяющиеся схемы вычислений.
Я нашла предел того, что браузер может отображать при изменении размера. И я получила лучшее понимание того, когда я должна использовать пользовательские свойства CSS против переменных препроцессора.
Кроме того, я должна попробовать стилизовать сайт для темного режима.
Я закончу это с дружественным напоминанием о том, что предыдущие версии сайта все еще можно просмотреть в архиве .
До обновления следующего года. 👋 Спасибо, что следишь за нами!
Источник ↗
Посмотреть сайт ↗
Это и ещё многое другое о веб-разработке вы можете найти в нашем телеграм канале nahtml!