От автора: принципы макетирования (колонки и ряды, углы и строки), используемые для создания сайтов сегодня, во многом позаимствованы у своих печатных коллег. И хотя реализация сеток лишь совершенствуется, общий вид веб-макетов удручает по сравнению с печатными журналами, особенно в области потока контента.
В журналах и газетах всегда любили красиво размещать контент. Например, пускать текст вокруг элемента или внутри него, использовать непрямоугольные формы.
Давайте узнаем, как модуль CSS Shapes даст нам такую же свободу в макетировании в интернете.
Быстрое введение в CSS формы
CSS формы позволяют веб-дизайнерам создавать более абстрактные, геометрические макеты, выходящие за рамки простых прямоугольников и квадратов. Спецификация дает нам новые свойства shape-outside и shape-margin. Поддержка в браузерах нормальная, хотя на данный момент свойства доступны только в Chrome, Opera и Safari с префиксом –webkit-. То есть необходимо использовать -webkit-shape-outside.
Свойство shape-outside заставляет инлайновый контент обтекать элемент по кривой, а не по его блоковой модели. Первоначально появилось свойство shape-inside, с помощью которого можно поместить контент внутрь элемента. Текст внутри круга сам принимает форму круга. Однако реализация данного свойства была отложена до CSS Shapes Level 2.
Свойство shape-margin задает внешний отступ вокруг того элемента, к которому применено свойство shape-outside. Разберем пару примеров.
Как создать форму
Проще всего понять принцип работы CSS форм – это создать круг. У нас есть div (наш круг) и несколько параграфов.
|
1 2 3 4 |
<div class="circle"></div> <p>Lorem ipsum...</p> <p>Lorem ipsum...</p> <p>Lorem ipsum...</p> |
Ниже приведены базовые стили, в том числе ширина и высота круга, border-radius, задающий форму круга, и свойство float, чтобы параграфы текста обтекали элемент.
|
1 2 3 4 5 6 7 |
.circle { width: 250px; height: 250px; background-color: #40a977; border-radius: 50%; float: left; } |
Как мы и ожидали, теперь параграфы будут обтекать элемент. Но так как border-radius не задает настоящую форму элемента, текст обтекает круг не по контуру.
Если проинспектировать элемент через панель разработчика, мы увидим, что он все еще является блоком. Даже если div и выглядит, как круг, свойство border-radius никак не меняет настоящую форму элемента.
Чтобы наши параграфы обтекали элемент по контуру круга, нам нужно изменить реальную форму элемента при помощи свойства shape-outside. В нашем случае мы пропишем свойство и в качестве значения передадим функцию circle().
|
1 2 3 4 5 6 7 8 9 |
.circle { width: 250px; height: 250px; background-color: #40a977; border-radius: 50%; float: left; -webkit-shape-outside: circle(); shape-outside: circle(); } |
Теперь наш текст аккуратно обтекает круг по контуру.
Кроме того, если теперь заглянуть в панель разработчика, мы увидим, что элемент отрисовывается в виде круга.
Посмотрите, насколько макет будет лучше выглядеть, если добавить пару внешних отступов:
Настраиваем круг
Функция circle() принимает несколько значений для радиуса и центра координат: circle(r at x y). По умолчанию радиус вычисляется из размеров элемента. Если элемент имеет ширину 300px, к примеру, радиус будет 150px (радиус – половина диаметра круга).
Точно так же и координаты x и y вычисляются из размера элемента. По умолчанию координаты заданы в 50% 50%, то есть центр элемента.
Эти две координаты пригодятся в случаях, когда вам нужно изменить размер формы, сохранив реальный размер элемента, или когда вам нужно передвинуть форму, сохранив позицию элемента. В примере ниже мы уменьшаем радиус круга до 60px, а центр координат смещаем в точку 30% 70%. Это сдвинет круг в нижний левый угол блока элемента.
Стоит отметить, что при изменении круга необходимо явно задавать оба значения: центра координат и радиуса. Использовать что-то одно – неправильно.
|
1 2 3 |
circle( 60px at 30% 70% ) // правильно. circle( 60px ) // invalid. circle( at 30% 70% ) // неправильно. |
Блоковая модель формы
CSS формы наследуют те же самые принципы блоковой модели, которые присущи элементу, только применяются они за пределами самого элемента. Это позволяет нам отдельно указывать, например, border-box для элемента и padding-box для формы. Чтобы изменить блоковую модель формы, необходимо после функции использовать одно из ключевых слов: content-box, margin-box, border-box или padding-box.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.circle { width: 250px; height: 250px; background-color: #40a977; border-radius: 50%; float: left; padding: 10px; border: 20px solid #ccc; margin: 30px; -webkit-shape-outside: circle() padding-box; shape-outside: circle() padding-box; } |
По умолчанию блоковая модель формы задается в margin-box. В примере ниже мы изменили модель на padding-box, чтобы браузер исключил из расчетов размера формы margin. Теперь текст должен проходить сквозь рамку и касаться padding’а элемента.
Создаем еще больше форм
В спецификации CSS форм представлено еще несколько функций для создания форм:
ellipse(): из названия следует, что функция будет создавать эллипс. Мы можем настраивать радиус эллипса и перемещать координаты центра. В отличие от circle(), функция ellipse() принимает два радиуса: горизонтальный и вертикальный. ellipse( 100px 180px at 10% 20% ).
polygon(): эта функция позволяет создавать более сложные формы, как треугольники, шестиугольники, а также негеометрические формы. Работать с этой функцией не так просто, как создать круг, однако вам может помочь сервис Path to Polygon Converter.
Заключение
В этом уроке мы узнали о базовом применении CSS форм. Мы создали форму, настроили ее размер, расположение и блоковую модель. На момент написания статьи у CSS форм есть грубые недоработки. Может быть, именно из-за них мы еще не наблюдаем широкой поддержки в браузерах.
Как было сказано выше, свойство shape-inside, с помощью которого можно помещать контент внутрь элемента, было заморожено.
В спецификации CSS форм представлено отдельное свойство shape-box, с помощью которого можно указывать блоковую модель формы. На данный момент оно не работает ни в одном браузере.
В Safari требуется префикс –webkit, свойство является экспериментальным.
Тем не менее, несмотря на медленный прогресс и различия в браузерах, я с нетерпением жду хорошей поддержки CSS форм! Жду не дождусь креативных макетов, когда основные браузеры будут поддерживать эти свойства.
Автор: Louie R.
Источник: //webdesign.tutsplus.com/
Редакция: Команда webformyself.
