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

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

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

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

Кадрирование панелей

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

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

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

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

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

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

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree