Як часто ви звертаєтесь до CSS background-size власність? Якщо ви схожі на мене — і, ймовірно, на багатьох інших людей, що працюють із зовнішнім виглядом — зазвичай це відбувається тоді, коли ви background-size: cover зображення для заповнення простору цілого елемента.
Що ж, переді мною постало цікаве завдання, яке вимагало більш розширеного розміру фону: фонові смуги, які змінюються при наведенні курсора. Перегляньте це та наведіть на нього курсор:
Там відбувається набагато більше, ніж розмір фону, але це був трюк, який мені потрібен, щоб змусити смуги переходити. Я подумав показати вам, як я до цього дійшов, не лише тому, що я вважаю, що це дійсно гарний візуальний ефект, але тому, що він вимагав від мене творчого підходу до градієнтів і режимів змішування, які, я думаю, вам можуть сподобатися.
Почнемо з дуже простих налаштувань, щоб все було просто. Я говорю про одного
у HTML, оформленому як зелений квадрат:
div {
width: 500px;
height: 500px;
background: palegreen;
}Налаштування фонових смуг
Якщо ваш розум перейшов прямо до лінійного градієнта CSS, коли ви побачили ці смуги, тоді ми вже на одній сторінці. У цьому випадку ми не можемо точно створити повторюваний градієнт, оскільки ми хочемо, щоб смуги займали нерівномірну кількість простору та переходили між ними, але ми можемо створити п’ять смуг, об’єднавши п’ять фонів поверх існуючого фонового кольору та розмістивши їх угорі -праворуч від контейнера:
div {
width: 500px;
height: 500px;
background:
linear-gradient(black, black) top right,
linear-gradient(black, black) top 100px right,
linear-gradient(black, black) top 200px right,
linear-gradient(black, black) top 300px right,
linear-gradient(black, black) top 400px right,
palegreen;
}Я зробив горизонтальні смуги, але ми також могли б піти вертикальними з підходом, який ми тут розглядаємо. І ми можемо трохи спростити це за допомогою спеціальних властивостей:
div {
--gt: linear-gradient(black, black);
--n: 100px;
width: 500px;
height: 500px;
background:
var(--gt) top right,
var(--gt) top var(--n) right,
var(--gt) top calc(var(--n) * 2) right,
var(--gt) top calc(var(--n) * 3) right,
var(--gt) top calc(var(--n) * 4) right,
palegreen;
}Таким чином, --gt значенням є градієнт і --n це константа, яку ми використовуємо, щоб підштовхнути смуги вниз, щоб вони були зміщені вертикально. І ви, можливо, помітили, що я не встановив справжній градієнт, а суцільні чорні смуги в linear-gradient() функція — це навмисно, і ми трохи з’ясуємо, чому я це зробив.
Ще одна річ, яку ми повинні зробити, перш ніж рухатися далі, це запобігти повторенню нашого фону; інакше вони заповнять весь простір плиткою:
div {
--gt: linear-gradient(black, black);
--n: 100px;
width: 500px;
height: 500px;
background:
var(--gt) top right,
var(--gt) top var(--n) right,
var(--gt) top calc(var(--n) * 2) right,
var(--gt) top calc(var(--n) * 3) right,
var(--gt) top calc(var(--n) * 4) right,
palegreen;
background-repeat: no-repeat;
}Ми могли встановити background-repeat в background скорочення, але я вирішив розбити це тут, щоб було легко читати.
Зміщення смуг
Технічно у нас є смуги, але це досить важко визначити, оскільки між ними немає відстані, і вони покривають весь контейнер. Це більше схоже на суцільний чорний квадрат.
Ось де ми можемо використовувати background-size власність. Ми хочемо встановити як висоту, так і ширину смуг, і властивість підтримує синтаксис двох значень, що дозволяє нам робити саме це. І ми можемо об’єднати ці розміри в ланцюжок, розділяючи їх комами так само, як ми це робили background.
Почнемо з простого, спочатку встановивши ширину. Використання синтаксису з одним значенням для background-size встановлює ширину та висоту за замовчуванням auto. Я використовую абсолютно довільні значення, тому встановіть значення, які найкраще підходять для вашого дизайну:
div {
--gt: linear-gradient(black, black);
--n: 100px;
width: 500px;
height: 500px;
background:
var(--gt) top right,
var(--gt) top var(--n) right,
var(--gt) top calc(var(--n) * 2) right,
var(--gt) top calc(var(--n) * 3) right,
var(--gt) top calc(var(--n) * 4) right,
palegreen;
background-repeat: no-repeat;
background-size: 60%, 90%, 70%, 40%, 10%;
}Якщо ви використовуєте ті самі значення, що й я, ви отримаєте це:
Не зовсім схоже, що ми встановили ширину для всіх смуг, чи не так? Це через auto поведінка висоти синтаксису з одним значенням. Друга смуга ширша за інші під нею і прикриває їх. Ми повинні встановити висоту, щоб ми могли бачити нашу роботу. Усі вони мають бути однакової висоти, і ми можемо фактично повторно використовувати наші --n змінна, знову ж таки, щоб все було просто:
div {
--gt: linear-gradient(black, black);
--n: 100px;
width: 500px;
height: 500px;
background:
var(--gt) top right,
var(--gt) top var(--n) right,
var(--gt) top calc(var(--n) * 2) right,
var(--gt) top calc(var(--n) * 3) right,
var(--gt) top calc(var(--n) * 4) right,
palegreen;
background-repeat: no-repeat;
background-size: 60% var(--n), 90% var(--n), 70% var(--n), 40% var(--n), 10% var(--n); // HIGHLIGHT 15
}Ах, набагато краще!
Додавання проміжків між смугами
Це абсолютно необов’язковий крок, якщо ваш дизайн не вимагає проміжків між смугами, але мій зробив, і він не надто складний. Змінюємо висоту кожної смуги background-size трохи, зменшуючи значення, щоб вони не заповнили весь вертикальний простір.
Ми можемо й надалі використовувати наш --n змінна, але відніміть невелику кількість, скажімо 5px, Використовуючи calc() щоб отримати те, що ми хочемо.
background-size: 60% calc(var(--n) - 5px), 90% calc(var(--n) - 5px), 70% calc(var(--n) - 5px), 40% calc(var(--n) - 5px), 10% calc(var(--n) - 5px);Це багато повторень, які ми можемо усунути за допомогою іншої змінної:
div {
--h: calc(var(--n) - 5px);
/* etc. */
background-size: 60% var(--h), 90% var(--h), 70% var(--h), 40% var(--h), 10% var(--h);
}Маскування та змішування
Тепер поміняємося місцями palegreen колір фону, який ми використовували для візуальних цілей до цього моменту для білого.
div {
/* etc. */
background:
var(--gt) top right,
var(--gt) top var(--n) right,
var(--gt) top calc(var(--n) * 2) right,
var(--gt) top calc(var(--n) * 3) right,
var(--gt) top calc(var(--n) * 4) right,
#fff;
/* etc. */
}Такий чорно-білий візерунок ідеально підходить для маскування та змішування. Для цього ми спочатку загорнемо наш
у новий батьківський контейнер і додайте другий
під ним:
Тут ми зробимо невеликий рефакторинг CSS. Тепер, коли у нас є новий батьківський контейнер, ми можемо передати виправлений width та height властивості, які ми використовували на нашому
там:
section {
width: 500px;
height: 500px;
} Я також збираюся використовувати CSS Grid для позиціонування обох
елементів один на одного. Це той самий трюк, який використовує Темані Афіф для створення свого супер круті галереї зображень. Ідея полягає в тому, що ми розміщуємо обидва div над повним контейнером за допомогою grid-area властивість і вирівняти все до центру:
section {
display: grid;
align-items: center;
justify-items: center;
width: 500px;
height: 500px;
}
section > div {
width: inherit;
height: inherit;
grid-area: 1 / 1;
}Тепер перевірте це. Причина, чому я раніше використовував суцільний градієнт, який переходить від чорного до чорного, полягає в тому, щоб налаштувати нас на маскування та змішування двох
шари. Це не справжнє маскування в тому сенсі, як ми це називаємо mask але контраст між шарами визначає, які кольори будуть видимі. Область, покрита білим, залишиться білою, а область, покрита чорним, просочується. Документація MDN щодо режимів змішування має гарне пояснення того, як це працює.
Щоб це запрацювало, я застосую реальний градієнт, який ми хочемо бачити на першому
застосовуючи правила стилю з нашого початку
на новому, використовуючи :nth-child() псевдоселектор:
div:nth-child(1) {
background: linear-gradient(to right, red, orange);
}
div:nth-child(2) {
--gt: linear-gradient(black, black);
--n: 100px;
--h: calc(var(--n) - 5px);
background:
var(--gt) top right,
var(--gt) top var(--n) right,
var(--gt) top calc(var(--n) * 2) right,
var(--gt) top calc(var(--n) * 3) right,
var(--gt) top calc(var(--n) * 4) right,
white;
background-repeat: no-repeat;
background-size: 60% var(--h), 90% var(--h), 70% var(--h), 40% var(--h), 10% var(--h);
}Якщо ми зупинимося на цьому, ми фактично не побачимо жодної візуальної відмінності від того, що було раніше. Це тому, що ми ще не зробили фактичного змішування. Отже, давайте зробимо це зараз, використовуючи screen режим змішування:
div:nth-child(2) {
/* etc. */
mix-blend-mode: screen;
}Я використав бежевий колір фону в демонстрації, яку показав на початку цієї статті. Цей дещо темніший вид брудно-білого забарвлення дозволяє невеликій кількості кольору просвічувати решту фону:
Ефект наведення
Останньою частиною цієї головоломки є ефект наведення, який розширює смуги на всю ширину. Спочатку напишемо наш селектор для нього. Ми хочемо, щоб це відбувалося, коли батьківський контейнер (
у нашому випадку) наводиться. При наведенні курсора ми змінимо розмір фону смуг, які містяться в другому
:
/* When is hovered, change the second div's styles */
section:hover > div:nth-child(2){
/* styles go here */
} Ми захочемо змінити background-size смуг на всю ширину контейнера, зберігаючи однакову висоту:
section:hover > div:nth-child(2){
background-size: 100% var(--h);
}Це «прив’язує» фон до повної ширини. Якщо додати трохи transition до цього ми бачимо, як смуги розширюються при наведенні:
section:hover > div:nth-child(2){
background-size: 100% var(--h);
transition: background-size 1s;
}Ось ще раз остання демонстрація:
Я лише додав текст, щоб показати, як це може виглядати, якщо використовувати це в іншому контексті. Якщо ви робите те саме, то варто переконатися, що між кольором тексту та кольорами, використаними в градієнті, достатньо контрасту, щоб відповідати Рекомендації WCAG. І хоча ми коротко торкаємося доступності, це того варте враховуючи переваги користувача щодо обмеженого руху коли справа доходить до ефекту наведення.
Це обгортка!
Досить акуратно, правда? Я звичайно так думаю. Що мені також подобається в цьому, так це те, що його можна підтримувати та налаштовувати. Наприклад, ми можемо змінити висоту, кольори та напрямок смуг, змінивши кілька значень. Ви навіть можете змінювати ще кілька речей, як-от кольори та ширину, щоб зробити його ще більш доступним для налаштування.
Мені справді цікаво, якби ви підійшли до цього по-іншому. Якщо так, будь ласка, поділіться в коментарях! Було б чудово подивитися, скільки варіацій ми можемо зібрати.
