У печатных носителей, в отличие от электронных, есть большая гибкость в верстке и отображении содержимого. Из-за способа структурирования электронного содержимого довольно сложно поместить текст в рамки необычных форм, как в журналах.
Источник изображения: верстка журнала Ronel van Heerden
Тем не менее, команда CSS3 работает над тем, чтобы сделать такое возможным для электронного содержимого с помощью свойства shape-inside (форма текста).
Это свойство все еще новое, и сейчас работает только в браузере Chrome и с приставкой производителя в браузерах на движке Webkit, таких как Opera и Safari, включая и мобильные версии этих браузеров, но некоторые функции еще не поддерживаются.
Рекомендованное чтение: Создание круговых и эллиптических градиентов с использованием CSS3
Давайте рассмотрим, как это работает.
Как использовать свойство формы текста
Свойство формы текста позволяет задать четыре формы: прямоугольник, круг, полигон и эллипс, хотя вроде бы сейчас работает только полигон. В примере ниже попробуем создать треугольник:
.basic-shape {
font-size: 12px;
width: 300px;
height: 300px;
overflow: hidden;
text-align: justify;
-webkit-hyphens: manual;
-webkit-shape-inside: polygon(0px 0px, 0 300px, 300px 300px);
}
Этот код создаст такую форму:
Если Вам нужно создать текст сложной формы, но Вы не знаете, как задать координаты, это можно сделать следующим образом.
Для начала нужно создать форму в редакторе векторной графики, таком как Adobe Illustrator или Inkscape. Затем сохранить ее в формат SVG и открыть в текстовом редакторе.
После этого найдите координаты, задайте каждой из них значение в единицах измерения px или %. Скопируйте их и вставьте как значения полигона. В этом примере создан простой шестиугольник:
.svg-shape {
-webkit-shape-inside: polygon(75.778px 272.829px, 1.555px 144.271px, 75.778px 15.713px, 224.222px 15.713px, 298.444px 144.271px, 224.222px 272.829px);
}
Результат будет выглядеть так:
Теоретически возможно использовать непосредственно файл SVG для создания формы текста. К сожалению, пока что это не работает, и браузерам еще нужно это внедрить.
Заключение
Не каждому веб-сайту пригодится это свойство. Но с такими улучшениями верстка электронного содержимого в будущем станет более утонченной.
За дополнительной информацией можно обратиться к следующим источникам:
- Формы CSS3 – W3C
- Области и исключения CSS на мобильных устройствах – Adobe
Автор урока Thoriq Firdaus
Перевод — Дежурка
Смотрите также: