Как использовать CSS формы в своем веб-дизайне

Как использовать CSS формы в своем веб-дизайне

От автора: принципы макетирования (колонки и ряды, углы и строки), используемые для создания сайтов сегодня, во многом позаимствованы у своих печатных коллег. И хотя реализация сеток лишь совершенствуется, общий вид веб-макетов удручает по сравнению с печатными журналами, особенно в области потока контента.

В журналах и газетах всегда любили красиво размещать контент. Например, пускать текст вокруг элемента или внутри него, использовать непрямоугольные формы.

Давайте узнаем, как модуль 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 (наш круг) и несколько параграфов.

<div class="circle"></div>
<p>Lorem ipsum...</p>
<p>Lorem ipsum...</p>
<p>Lorem ipsum...</p>

Ниже приведены базовые стили, в том числе ширина и высота круга, border-radius, задающий форму круга, и свойство float, чтобы параграфы текста обтекали элемент.

.circle { 
    width: 250px;
    height: 250px;
    background-color: #40a977;
    border-radius: 50%;
    float: left;
}

Как мы и ожидали, теперь параграфы будут обтекать элемент. Но так как border-radius не задает настоящую форму элемента, текст обтекает круг не по контуру.

Если проинспектировать элемент через панель разработчика, мы увидим, что он все еще является блоком. Даже если div и выглядит, как круг, свойство border-radius никак не меняет настоящую форму элемента.

Чтобы наши параграфы обтекали элемент по контуру круга, нам нужно изменить реальную форму элемента при помощи свойства shape-outside. В нашем случае мы пропишем свойство и в качестве значения передадим функцию circle().

.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%. Это сдвинет круг в нижний левый угол блока элемента.

Стоит отметить, что при изменении круга необходимо явно задавать оба значения: центра координат и радиуса. Использовать что-то одно – неправильно.

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.

.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.

Источник: https://webdesign.tutsplus.com/

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

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree