CSS фигуры — будущее Web.

Перевод статьи:  CSS Shapes the future of the web.
Автор:  Ben Moss.

Если существующая на данный момент в веб-разработке тенденция плоского дизайна и показывает что-нибудь, так это то, насколько ограниченны в своих действиях веб-дизайнеры, когда дело касается компоновки. И теперь, поскольку нас больше не беспокоит вопрос создания эффектов объемности, таких как скосы граней элементов, градиенты и глянец поверхности, становится очевидным, что единственное оставшееся препятствие, которое все еще приходится обходить веб-дизайнерам при составлении композиции — это прямоугольные области.

Существует великое множество способов компоновки прямоугольных элементов, которое можно сравнить разве что с числом пикселей на экране, однако, после того как вы учтёте обусловленные используемым типом шрифта требования, и необходимость проектирования для устройств с различным разрешением экрана, то с удивлением обнаружите, что ваши возможности в оформлении страницы весьма ограничены.

Всем нам еще со школьной скамьи хорошо известно, что в природе нет правильных углов и идеально прямых линий. Между прочим, некоторые наиболее экстравагантные дизайны прошлого столетия уже успели сломать устоявшуюся тенденцию сеточного шаблона и начали свой путь в другом направлении с использованием дуг и углов различной величины, включая таким образом в дизайн элемент растяжения, что в свою очередь вызывает чувство драмы и восхищения. Если говорить о дизайне в сфере печати, то там это решается очень просто. Откройте документ в InDesign, выберите инструмент "ellipse tool" и нарисуйте круг, далее активируйте текстовый инструмент "type tool", щёлкните по окружности и вставьте свой текст. Вот и всё. А теперь попробуйте сделать тоже самое с помощью CSS. Ну, смелее, а я пока приготовлю себе кофе…

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

Меры по решению данной проблемы уже принимаются W3C консорциумом, который занимается разработкой нового модуля CSS Shapes («CSS фигуры»). 20 июня этого года была опубликована первая версия рабочего проекта стандарта — CSS Shapes Module Level 1, которая детально описывает способы использования форм, отличных от прямоугольных в контексте их взаимодействия с моделью бокса и свойством обтекания элементов. На данный момент, когда проект находится в стадии разработки, вносимые в CSS стандарт изменения допускают использование прямоугольных, врезных прямоугольных, круглых, эллипсоидных и многоугольных видов фигур.

Первый шаг внедрения в область веб-разработки разнообразия фигур допускает реализацию лишь оборки их текстом. Для того, чтобы добиться такого эффекта, мы должны применить свойство shape-outside, примерно вот так:

<style type='text/css'>
#circle {
shape–outside: circle(–400px,–400px,400px); /* (x, y, radius) */
float:left;
}

<div id='circle'></div>
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum
dolor sit amet, consectetur adipiscing elit. Duis mollis, est non commodo
luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
Aenean lacinia bibendum nulla sed consectetur. Sed posuere consectetur est
at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor mauris
condimentumnibh, ut fermentum massa justo sit amet risus.</p>

В результате применения этого кода мы получим идеальную окружность диаметром 800px (указанный радиус x2) с центром в точке 0, 0, а размещаемый в рамках абзаца текст будет «обтекать» полученную фигуру таким образом:

Оборка текстом окружности.

Еще больше воодушевляет обещание, что «CSS фигуры» будут полностью предоставлять свойственный Photoshop механизм маски́рования, а это значит, что мы получим возможность создания изображения с сохранением для него альфа канала, посредством которого и будет определяться внешняя форма изображения.

И, несмотря на то, что пока не совсем понятно собираются ли производители браузеров обеспечивать возможность управления масками с помощью SVG или путем применения фильтров, тем не менее, даже начальный уровень реализации просто поражает своими возможностями. Вообразите себе разделенное на два слоя изображение, которые образуют его передний и задний план в сочетании с завёрстанным по форме переднего плана текстом и тыльной частью изображения, используемой в качестве фона. Поразительный потенциал, неправда ли?

В принципе, оборка фигуры неправильной формы текстом будет выглядеть следующим образом:

Оборка текстом сложной фигуры.

Поддержка браузерами.

Что касается поддержки браузерами, то здесь, к сожалению, имеет место всем нам давно известная история — её просто нет. Эта функциональность лишь предлагается к реализации и на данный момент пока нигде не реализована.

Тем не менее, возросший за последние несколько лет уровень соблюдения веб-стандартов обнадёживает. Более того, между производителями браузеров замечено даже соперничество за право быть первым в реализации компонентов W3C спецификации (происходящее на фоне снижения интереса к развитию собственных технологий) и поэтому, скорее всего представление функционала CSS Shapes не заставит себя долго ждать.

А при условии полномасштабной поддержки CSS фигуры имеют все шансы стать предвестником новой эры веб-дизайна, в которой больше нет места ограничениям, навязываемым прямоугольной моделью бокса. И это будущее, в определенном, достаточно буквальном смысле действительно находится за углом.

Один комментарий на CSS фигуры — будущее Web.

  1. Очень интересным и захватывающим обещанием является то, что будет поддержка Photoshop, в котором можно будет без проблем получить CSS код любой фигуры. По моему очень полезно.

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

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