Динамические комиксы с помощью CSS clip-path

Дата публикации: 2016-04-13

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

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

Дизайн начинается с одной фотографии:

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

<div id="comicbookpanels">
    <img src="boxers.jpg" alt>
    <img src="boxers.jpg" alt="Two boxers fighting in a ring">
</div>

</div>

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

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

#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%);
}

#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. Добавьте код в самый конец документа:

<svg id="clippingpaths">
    <defs>
        <clipPath id="leftpanel" clipPathUnits="objectBoundingBox">
            <polygon points="0,0 .61,0 .49,1 0,1" />
        </clipPath>
        <clipPath id="rightpanel" clipPathUnits="objectBoundingBox">
            <polygon points="1,0 .61,0 .49,1 1,1" />
        </clipPath>
    </defs>   
</svg>

<defs>

</clipPath>

</clipPath>

</defs>

</svg>

Скопируйте стили ниже, чтобы сдвинуть вторую копию изображения, и чтобы 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%);
}

#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;
}

#clippingpaths {

height: 0;

}

Добавляем текст

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

<div id="comicbookpanels">
    <img src="boxers.jpg" alt>
    <img src="boxers.jpg" alt="Two boxers fighting in a ring">      
    <p>
        <span>The blows</span>
        <span>landed like</span>
        <span>a hammer…</span>
    </p>
</div>

<p>

<span>The blows</span>

<span>landed like</span>

<span>a hammer…</span>

</p>

</div>

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

#comicbookpanels p { 
    position: absolute;
    left: 50%;
    margin-top: 30%;
    font-size: 1.4rem;
}
#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;
}

#comicbookpanels p {

position: absolute;

left: 50%;

margin-top: 30%;

font-size: 1.4rem;

}

#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;

}

Как Джен Симмонс подчеркнула в серии своих крайне эмоциональных презентаций, веб-дизайн уже не просто несколько прямоугольников. Демо выполнено в духе комиксов, и мне действительно нравится, что у нас получилось. Надеюсь, эта работа вдохновит вас создать что-то свое в таком жанре. Демо

Источник: //thenewcode.com/

Редакция: Команда webformyself.

Метки: css