Динамічні комікси з допомогою CSS clip-path

19

Від автора: у висновку серії статей «інтернет комікси», якою я займався останні кілька тижнів, я хотів би створити динамічний комікси з допомогою CSS. У звичайних коміксах зображення прямокутні, але в японській манзі і в експериментальних західних коміксах кінця 1970-их панелі під зображення брали всі можливі форми.

Одне зображення, дві фігури

Дизайн починається з однієї фотографії:

Динамічні комікси з допомогою CSS clip-path

Так як панелі зображення будуть відображатися в різних місцях, нам знадобиться дві копії зображення. Обидва зображення я помістив div з id:

Динамічні комікси з допомогою CSS clip-path
Динамічні комікси з допомогою CSS clip-path

Атрибут alt слід заповнювати тільки для одного зображення, так як вони будуть розташовуватися один над одним, і вони дублюють себе. З допомогою стандартної техніки відносного позиціонування розміщуємо зображення всередині контейнера і задаємо однакове абсолютне позиціонування:

#comicbookpanels {
position: relative;
}
#comicbookpanels img {
position: absolute;
}
#comicbookpanels img {
top: 0; left: 0;
width: 100%;
}

Кадрування панелей

Фото поділяється на дві частини за допомогою CSS clip-path і псевдокласу xth-of-type:

#comicbookpanels img:first-of-type {
clip-path: polygon(0 0, 61% 0, 49% 100%, 0 100%);
}
#comicbookpanels img:last-of-type {
clip-path: polygon(100% 0, 61% 0, 49% 100%, 100% 100%);
}

Зверніть увагу на те, що на даний момент для роботи в Chrome, Safari і Opera властивості clip-path потрібні вендорные префікси (я не став їх прописувати).

Я скористався сервісом Clip Path Maker з сайту Bennett Feely для генерації точок кадрування. У даного методу є перевага перед звичайним розрізанням зображення у фотошопі, і це адаптивність: змінити кут між панелями буде так само легко, як змінити одне значення властивості clip-path.

Властивість clip-path на даний момент не підтримується в Firefox і інших браузерах, тому ми додамо фолбэк SVG і обріжемо HTML контент. Синтаксис SVG використовує ті ж значення, що і clip-path, тільки поділені на 100. Додайте код в кінець документа:

Скопіюйте стилі нижче, щоб зрушити другу копію зображення, і щоб CSS clip-path заробив з SVG:

#comicbookpanels img:first-of-type {
clip-path: url(#leftpanel);
clip-path: polygon(0 0, 61% 0, 49% 100%, 0 100%);
}
#comicbookpanels img:last-of-type {
top: 2rem;
left: 1rem;
clip-path: url(#rightpanel);
clip-path: polygon(100% 0, 61% 0, 49% 100%, 100% 100%);
}

Незважаючи на те, що SVG містить тільки теги defs, він буде займати простір на сторінці, так як це замінний елемент. Щоб прибрати цей простір ми не зможемо скористатися display: none, т. к. тоді віддалиться і ефект кадрування; замість цього ми задамо нульову висоту елемента:

#clippingpaths {
height: 0;
}

Додаємо текст

Щоб створити текстові блоки, я додав параграф у div з потрібними словами, загорнутими у span:

Динамічні комікси з допомогою CSS clip-path
Динамічні комікси з допомогою CSS clip-path

The blows
landed like
a hammer…

Я використовував приголомшливий шрифт Sequentialist BB Нейта Пиэйкоса. Параграф абсолютно позиціонується, а теги span розташовані зі зрушенням:

#comicbookpanels p {
position: absolute;
left: 50%;
margin-top: 30%;
font-size: 1.4 rem;
}
#comicbookpanels span {
background: #fff;
border: 2px solid #000;
padding: .5rem;
display: block;
position: relative;
margin-top: 1rem;
}
#comicbookpanels p span:first-child {
margin-left: 1rem;
}
#comicbookpanels p span:last-child {
margin-left: -1rem;
}

Як Джен Сіммонс підкреслила у серії своїх вкрай емоційних презентацій, веб-дизайн вже не просто кілька прямокутників. Демо виконано в дусі коміксів, і мені дійсно подобається, що у нас вийшло. Сподіваюся, ця робота надихне вас створити щось своє в такому жанрі. Демо