Фигуры на CSS: вводный курс. Создание идеальных адаптивных фигур с помощью единицы измерения CSS vw Фигуры css3

Так как верстка страниц становится все более сложной, разработчикам требуется доступ к большему количеству единиц измерений, чтобы воплотить дизайн в жизнь. Кроме привычных процентов, em и rem, и пикселей существуют более новые единицы измерения vw и vh, и родственные им vmin и vmax, предоставляющие более мощные способы создания адаптивного дизайна, которые нередко могут помочь отказаться от использования точек перехода @media.

Выходим за пределы использования процентов

Традиционные единицы измерения CSS создают следующие проблемы в веб-дизайне:

  • Единица измерения процент не всегда работает, как ожидается. Разработчикам приходится помнить о внешних отступах, задавая размеры элементам. Не следует использовать единицу измерения процент для задания высоты элементу body. Запись font-size: 50% задает тексту размер, равный половине его стандартного размера, а не устанавливает зависимость между размером текста и размером содержащего его элемента.
  • Почти невозможно создавать фигуры идеальной формы для разных размеров окна браузера. Очень сложно добиться того, чтобы элемент был идеально квадратным и в то же время адаптивным.

Единицы измерения vw и vh в значительной мере решают все эти проблемы.

Поддерживание идеальных пропорций

С помощью единиц измерения vw и vh очень легко создать идеальные фигуры на веб-страницах. Эти единицы измерения можно использовать для задания значений размеров почти всех свойств CSS. Поэтому если нужно создать элемент, который при любых размерах окна браузера занимает 20% его ширины и при этом остается квадратным, нужно задать одинаковые значения свойствам ширины и высоты, используя единицу измерения vw:

Div.twentysquare { background : #999 ; width : 20vw; height : 20vw; }

Посмотрите демонстрацию этого примера ниже, перейдите по ссылке и попробуйте изменить размер блока просмотра, чтобы увидеть изменение размера фигур.

Используя тот же способ, можно легко создать прямоугольник, высота которого вдвое больше его ширины при любых размерах окна браузера:

Div.onetworect { width : 20vw; height : 40vw; }

Задать баннеру идеальное соотношение размеров очень просто с помощью следующего кода CSS:

Div.goldenrect { width : 100vw; height : 61 .8vw ; background : red ; }

Для оптимального масштабирования текста в адаптивном блоке, занимания всего предоставленного ему объема с разбивкой на строки, нужно всего лишь задать размер шрифта в единицах измерения vw.

Перевод — Дежурка

Влад Мержевич

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

Рис. 1. Треугольники в веб-дизайне

Напрямую сделать треугольник средствами CSS нельзя, поэтому доступны два метода, позволяющих его добавить - через border и transform .

Использование border

Хотя границы, создаваемые через свойство border , напрямую не имеют отношения к треугольникам, именно border используется для этого наиболее часто. Если задать нулевую ширину и высоту элемента, а также установить достаточно толстую границу, то мы увидим набор из четырёх треугольников (рис. 2). Для наглядности границы на всех сторонах установлены разного цвета.

Рис. 2. Добавление border к элементу

Оставляя только нужную границу, а остальные делая прозрачными, мы получим треугольник нужного цвета (рис. 3).

Рис. 3. Элемент с прозрачными границами

В примере 1 показано добавление треугольника к блоку через псевдоэлемент ::after .

Пример 1. Блок с треугольником

Треугольник

Для абсолютно позиционированных элементов нулевую ширину и высоту указывать не обязательно.

За счёт комбинирования границ можно получить ещё четыре вида треугольников, что в сочетании с уже упомянутыми даёт нам восемь вариантов. Их вид и требуемый код приведён в табл. 1.

Табл. 1. Возможные виды треугольников
Вид Стиль
border: 20px solid transparent; border-top: 20px solid green;
border: 20px solid transparent; border-right: 20px solid green;
border: 20px solid transparent; border-bottom: 20px solid green;
border: 20px solid transparent; border-left: 20px solid green;
border: 20px solid transparent; border-top: 20px solid green; border-right: 20px solid green;
border: 20px solid transparent; border-right: 20px solid green; border-bottom: 20px solid green;
border: 20px solid transparent; border-bottom: 20px solid green; border-left: 20px solid green;
border: 20px solid transparent; border-left: 20px solid green; border-top: 20px solid green;

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

Треугольник можно делать и другой формы, если задать разную толщину границ. Так, код создания блока, показанного на рис. 4, приведён в примере 2.

Рис. 4. Острый треугольник

Пример 2. Острый треугольник

Треугольник

С помощью border мы получаем сплошные цветные треугольники, для создания рамки показанной на рис. 5 приходится идти на хитрость и накладывать один элемент поверх другого с небольшим смещением. Опять же здесь нам помогут псевдоэлементы :before и :after (пример 3).

Рис. 5. Рамка с уголком

Пример 3. Наложение треугольников

Треугольник

Глокая куздра штеко будланула бокра и кудрячит бокрёнка.

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

Использование трансформации

С помощью трансформации мы можем повернуть квадратный элемент на 45º и получить из него ромб. Это ещё не треугольник как таковой, поэтому нужную нам выступающую часть оставляем на виду, а остальное прячем за другим элементом (пример 4).

Пример 3. Трансформация

Треугольник

Глокая куздра штеко будланула бокра и кудрячит бокрёнка.

Результат данного примера показан на рис. 6.

Рис. 6. Треугольник с тенью

Проблема

Обрезка изображений до ромбовидной формы - распространенный прием в визуальном дизайне, но реализовать его на CSS далеко не просто. На самом деле до недавнего времени это было практически невозможно.

Поэтому для воплощения своих задумок дизайнерам приходилось сперва обрезать требуемые изображения в графическом редакторе. Разумеется, не нужно и говорить, что такой вариант применения эффекта означает огромные сложности в сопровождении веб-сайта и гарантированную неразбериху в будущем, если кто-то пожелает изменить стилизацию изображений. Определенно, сегодня у нас уже должен быть способ получше. В действительности таких способов целых два!

Решение на основе трансформации

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

, а затем применить к нему противоположную трансформацию rotate()
HTML



.picture {
width: 400px;
transform: rotate(45deg);
overflow: hidden;
}
.picture > img {
max-width: 100%;
transform: rotate(-45deg);
}
Однако, как вы видите на рисунке, у нас не получилось с наскока добиться требуемой стилизации. Конечно, если вы планировали обрезать изображение по форме восьмиугольника, то можете сказать, что работа сделана, и заняться чем-то еще. Но для того чтобы обрезать картинку по форме ромба, придется еще попотеть.

Противоположных трансформаций rotate() недостаточно для достижения нужного эффекта (блок div с названием.picture обозначен пунктирным контуром)
Главная проблема кроется в объявлении max-width: 100% . 100% относится к стороне нашего контейнера.picture . Однако мы хотим, чтобы ширина итогового изображения была равна диагонали исходного, а не его стороне. Вы уже догадались, что нам опять требуется помощь теоремы Пифагора (если вам необходимо освежить ее в памяти, то объяснение вы найдете в секрете ). Как гласит теорема, диагональ квадрата равна его стороне, умноженной на .

Следовательно, имеет смысл задать значение max-width , равное 2 × 100% ≈ 141,4213562% или, округляя, 142% , так как мы ни в коем случае не хотим, чтобы изображение уменьшилось (а если оно окажется чуть больше, то все в порядке, поскольку мы все равно его обрезаем).

В действительности еще лучше увеличивать изображение посредством трансформации scale() , и тому есть две причины: мы хотим, чтобы в ситуации, когда трансформации CSS не поддерживаются, размер изображения оставался равным 100%;
При увеличении изображения посредством трансформации scale() оно масштабируется от центра (если не указано иное значение transform-origin). Если вы будете увеличивать его путем изменения значения свойства width, то оно будет масштабироваться от верхнего левого угла и для того, чтобы переместить его, нам понадобится использовать отрицательные значения полей. Складывая все вместе, получаем такой финальный вариант кода:
.picture {
width: 400px;
transform: rotate(45deg);
overflow: hidden;
}
.picture > img {
max-width: 100%;
transform: rotate(-45deg) scale(1.42);
}
Как видно на рисунке, это наконец-то дает нам желаемый результат.

ПОПРОБУЙТЕ САМИ!
http://play.csssecrets.io/diamond-images

Решение с обтравочным контуром

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


В действительности существует намного лучший способ достичь желаемого результата. Основная идея заключается в использовании свойства clip-path - еще одной возможности, позаимствованной из SVG. Это свойство теперь можно применять и к HTML-содержимому (по крайней мере, в поддерживающих браузерах), причем с использованием приятного и читабельного синтаксиса, в отличие от эквивалента в SVG, печально известного своим умением доводить людей до бешенства.

У него есть лишь один недостаток (на момент написания этой главы) - ограниченная поддержка браузерами. Однако данное решение изящно откатывается до упрощенной визуализации (без обрезки), так что это достойная кандидатура для рассмотрения. Скорее всего, вы уже знакомы с обтравочными контурами благодаря приложениям для редактирования изображений, таким как Adobe Photoshop. Обтравочные контуры позволяют обрезать элемент до любой формы, какую вы только пожелаете. В данном случае мы собираемся использовать фигуру polygon() .

Мы будем определять ромб, но в целом эта фигура позволяет задать любой многоугольник последовательностью точек, разделенных запятыми. Можно даже использовать проценты - итоговые значения будут вычисляться относительно габаритных размеров элемента. Код очень простой:
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);

Верите или нет, но это все! Но вместо двух элементов HTML и восьми строк запутанного кода CSS мы достигли желаемого с помощью всего лишь одной простой строки. Но этим чудесные способности clip-path не ограничиваются. Это свойство поддерживает даже анимацию - при условии, что мы анимируем переход между двумя одинаковыми функциями фигур (в нашем случае polygon()) с одинаковым количеством точек. Таким образом, если мы хотим плавно раскрывать полное изображение при наведении указателя мыши, это можно реализовать таким способом:
img {
clip-path: polygon(50% 0, 100% 50%,
50% 100%, 0 50%);
transition: 1s clip-path;
}
img:hover {
clip-path: polygon(0 0, 100% 0,
100% 100%, 0 100%);
}
Кроме того, этот метод прекрасно приспосабливается к неквадратным изображениям, Ах, радости современного CSS…
ПОПРОБУЙТЕ САМИ!

Онлайн CSS3-генератор для создания крутых графических эффектов и получения их CSS кода. Можно отдельно изменять стили для различных состояний таких как:hover, :active и т.д. В ваши руки попадает интерфейс для создания сложных теней, градиентов, 3D эффектов, эффектов с текстом и многого другого. У проекта имеется своя галерея эффектов с которых можно начинать свою разработку. Отличительной чертой проекта является то, что можно получить стили для отдельного элемента, например для тени или градиента.

При первом заходе на сайт нам предлагаю создать заготовку для поля ввода, кнопки, блока или выбрать готовый шаблон из галереи проекта. Начнем с чего-то простого, например, с галереи геометрических фигур. Выбираем из галереи знак Инь-Янь и жмем "Get The Code" в правом верхнем углу:

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

Пошарив по разделам галереи мы видим кнопки, текстовые поля, эффекты непосредственно для текста, вышеупомянутые фигуры и наборы градиентов. Поиграемся с эффектами текста:

сайт - wow it"s 3D!

Должен заметить, что генерируемый CSS на удивление очень чист и читабелен, что очень радует. Давайте посмотрим на какую-нибудь симпатичную кнопочку:

сайт cool button

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

При использовании нестандартных шрифтов с Google Fonts EnjoyCSS автоматически добавляет их в пример HTML. В моем случае для текст и кнопки это выглядит так:

Итоговый CSS довольно объемный, поэтому привожу его только в конце статьи:

Yin-yang {
float:left;
width: 96px;
height: 48px;
position: relative;
border: 2px solid #f81;
border-bottom-width: 50px;
-webkit-border-radius: 100%;
border-radius: 100%;
color: rgba(0,0,0,1);
-o-text-overflow: clip;
text-overflow: clip;
-webkit-transform: rotateZ(-45deg) scaleX(1) scaleY(1) scaleZ(1) ;
transform: rotateZ(-45deg) scaleX(1) scaleY(1) scaleZ(1) ;
transform-origin: 50% 50% 0;

Yin-yang::before {
width: 12px;
height: 12px;
position: absolute;
content: "";
top: 50%;
left: 0;
border: 18px solid #f81;
-webkit-border-radius: 100%;
border-radius: 100%;
font: normal normal normal 100%/normal Arial, Helvetica, sans-serif;
color: rgba(0,0,0,1);
-o-text-overflow: clip;
text-overflow: clip;
background: rgba(255,255,255,1);
text-shadow: none;

-webkit-transform-origin: 50% 50% 0;
transform-origin: 50% 50% 0;
}

Yin-yang::after {
width: 12px;
height: 12px;
position: absolute;
content: "";
top: 50%;
left: 50%;
border: 18px solid rgba(255,255,255,1);
-webkit-border-radius: 100%;
border-radius: 100%;
font: normal normal normal 100%/normal Arial, Helvetica, sans-serif;
color: rgba(0,0,0,1);
-o-text-overflow: clip;
text-overflow: clip;
background: #f81;
text-shadow: none;
-webkit-transform: scaleX(1) scaleY(1) scaleZ(1) ;
transform: scaleX(1) scaleY(1) scaleZ(1) ;
-webkit-transform-origin: 50% 50% 0;
transform-origin: 50% 50% 0;
}

Enjoy-css-3dtext {
cursor: pointer;
border: none;
font: normal normal normal 72px/normal "Passero One", Helvetica, sans-serif;
color: rgba(255,255,255,1);
text-align: center;
-o-text-overflow: clip;
text-overflow: clip;
text-shadow: 0 1px 0 rgb(204,204,204) , 0 2px 0 rgb(201,201,201) , 0 3px 0 rgb(187,187,187) , 0 4px 0 rgb(185,185,185) , 0 5px 0 rgb(170,170,170) , 0 6px 1px rgba(0,0,0,0.0980392) , 0 0 5px rgba(0,0,0,0.0980392) , 0 1px 3px rgba(0,0,0,0.298039) , 0 3px 5px rgba(0,0,0,0.2) , 0 5px 10px rgba(0,0,0,0.247059) , 0 10px 10px rgba(0,0,0,0.2) , 0 20px 20px rgba(0,0,0,0.14902) ;
-webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
-moz-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
-o-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
-webkit-transform: scaleX(1) scaleY(1) scaleZ(1) ;
transform: scaleX(1) scaleY(1) scaleZ(1) ;
-webkit-transform-origin: 50% 50% 0;
transform-origin: 50% 50% 0;
}

Enjoy-css-3dtext:hover {
color: rgba(169,214,169,1);
text-shadow: 0 1px 0 rgba(255,255,255,1) , 0 2px 0 rgba(255,255,255,1) , 0 3px 0 rgba(255,255,255,1) , 0 4px 0 rgba(255,255,255,1) , 0 5px 0 rgba(255,255,255,1) , 0 6px 1px rgba(0,0,0,0.0980392) , 0 0 5px rgba(0,0,0,0.0980392) , 0 1px 3px rgba(0,0,0,0.298039) , 0 3px 5px rgba(0,0,0,0.2) , 0 -5px 10px rgba(0,0,0,0.247059) , 0 -7px 10px rgba(0,0,0,0.2) , 0 -15px 20px rgba(0,0,0,0.14902) ;
-webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
-moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
-o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
}

Feedback-button {
display: inline-block;
float: left;
position: relative;
cursor: pointer;
margin: 0 2% 0 0;
padding: 12px 22px;
overflow: hidden;
border: none;
font: normal normal bold 1.6em/normal "Syncopate", Helvetica, sans-serif;
color: #ecf0f1;
-o-text-overflow: clip;
text-overflow: clip;


-webkit-
background-origin: padding-box;
background-clip: border-box;
background-size: auto auto;
-webkit-box-shadow: 0 10px 0 0 rgba(178,49,49,1) ;
box-shadow: 0 10px 0 0 rgba(178,49,49,1) ;
text-shadow: 0 0 0 rgb(196,80,78) , 1px 1px 0 rgb(196,80,78) , 2px 2px 0 rgb(196,80,78) , 3px 3px 0 rgb(196,80,78) , 4px 4px 0 rgb(196,80,78) , 5px 5px 0 rgb(196,80,78) , 6px 6px 0 rgb(196,80,78) , 7px 7px 0 rgb(196,80,78) , 8px 8px 0 rgb(196,80,78) , 9px 9px 0 rgb(196,80,78) , 10px 10px 0 rgb(196,80,78) , 11px 11px 0 rgb(196,80,78) , 12px 12px 0 rgb(196,80,78) , 13px 13px 0 rgb(196,80,78) , 14px 14px 0 rgb(196,80,78) , 15px 15px 0 rgb(196,80,78) , 16px 16px 0 rgb(196,80,78) , 17px 17px 0 rgb(196,80,78) , 18px 18px 0 rgb(196,80,78) , 19px 19px 0 rgb(196,80,78) , 20px 20px 0 rgb(196,80,78) , 21px 21px 0 rgb(196,80,78) , 22px 22px 0 rgb(196,80,78) , 23px 23px 0 rgb(196,80,78) , 24px 24px 0 rgb(196,80,78) , 25px 25px 0 rgb(196,80,78) , 26px 26px 0 rgb(196,80,78) , 27px 27px 0 rgb(196,80,78) , 28px 28px 0 rgb(196,80,78) , 29px 29px 0 rgb(196,80,78) , 30px 30px 0 rgb(196,80,78) , 31px 31px 0 rgb(196,80,78) , 32px 32px 0 rgb(196,80,78) , 33px 33px 0 rgb(196,80,78) , 34px 34px 0 rgb(196,80,78) , 35px 35px 0 rgb(196,80,78) , 36px 36px 0 rgb(196,80,78) , 37px 37px 0 rgb(196,80,78) , 38px 38px 0 rgb(196,80,78) , 39px 39px 0 rgb(196,80,78) , 40px 40px 0 rgb(196,80,78) , 41px 41px 0 rgb(196,80,78) , 42px 42px 0 rgb(196,80,78) , 43px 43px 0 rgb(196,80,78) , 44px 44px 0 rgb(196,80,78) , 45px 45px 0 rgb(196,80,78) , 46px 46px 0 rgb(196,80,78) , 47px 47px 0 rgb(196,80,78) , 48px 48px 0 rgb(196,80,78) , 1px 1px 0 rgba(196,80,78,0.980392) , 2px 2px 0 rgba(196,80,78,0.960784) , 3px 3px 0 rgba(196,80,78,0.941176) , 4px 4px 0 rgba(196,80,78,0.921569) , 5px 5px 0 rgba(196,80,78,0.901961) , 6px 6px 0 rgba(196,80,78,0.882353) , 7px 7px 0 rgba(196,80,78,0.862745) , 8px 8px 0 rgba(196,80,78,0.843137) , 9px 9px 0 rgba(196,80,78,0.819608) , 10px 10px 0 rgba(196,80,78,0.8) , 11px 11px 0 rgba(196,80,78,0.780392) , 12px 12px 0 rgba(196,80,78,0.760784) , 13px 13px 0 rgba(196,80,78,0.741176) , 14px 14px 0 rgba(196,80,78,0.721569) , 15px 15px 0 rgba(196,80,78,0.701961) , 16px 16px 0 rgba(196,80,78,0.682353) , 17px 17px 0 rgba(196,80,78,0.658824) , 18px 18px 0 rgba(196,80,78,0.639216) , 19px 19px 0 rgba(196,80,78,0.619608) , 20px 20px 0 rgba(196,80,78,0.6) , 21px 21px 0 rgba(196,80,78,0.580392) , 22px 22px 0 rgba(196,80,78,0.560784) , 23px 23px 0 rgba(196,80,78,0.541176) , 24px 24px 0 rgba(196,80,78,0.521569) , 25px 25px 0 rgba(196,80,78,0.498039) , 26px 26px 0 rgba(196,80,78,0.478431) , 27px 27px 0 rgba(196,80,78,0.458824) , 28px 28px 0 rgba(196,80,78,0.439216) , 29px 29px 0 rgba(196,80,78,0.419608) , 30px 30px 0 rgba(196,80,78,0.4) , 31px 31px 0 rgba(196,80,78,0.380392) , 32px 32px 0 rgba(196,80,78,0.360784) , 33px 33px 0 rgba(196,80,78,0.341176) , 34px 34px 0 rgba(196,80,78,0.317647) , 35px 35px 0 rgba(196,80,78,0.298039) , 36px 36px 0 rgba(196,80,78,0.278431) , 37px 37px 0 rgba(196,80,78,0.258824) , 38px 38px 0 rgba(196,80,78,0.239216) , 39px 39px 0 rgba(196,80,78,0.219608) , 40px 40px 0 rgba(196,80,78,0.2) , 41px 41px 0 rgba(196,80,78,0.180392) , 42px 42px 0 rgba(196,80,78,0.156863) , 43px 43px 0 rgba(196,80,78,0.137255) , 44px 44px 0 rgba(196,80,78,0.117647) , 45px 45px 0 rgba(196,80,78,0.0980392) , 46px 46px 0 rgba(196,80,78,0.0784314) , 47px 47px 0 rgba(196,80,78,0.0588235) , 48px 48px 0 rgba(196,80,78,0.0392157) , 50px 50px 0 rgba(196,80,78,0) ;
-webkit-transform: scaleX(1) scaleY(1) scaleZ(1) ;
transform: scaleX(1) scaleY(1) scaleZ(1) ;
-webkit-transform-origin: 50% 50% 0;
transform-origin: 50% 50% 0;
}

Feedback-button:hover {
text-align: center;
background: -webkit-linear-gradient(-90deg, #ce6161 0, #ef6664 100%);
background: -moz-linear-gradient(180deg, #ce6161 0, #ef6664 100%);
background: linear-gradient(180deg, #ce6161 0, #ef6664 100%);
background-position: 50% 50%;
background-origin: padding-box;
-webkit-background-clip: border-box;
background-clip: border-box;
-webkit-background-size: auto auto;
background-size: auto auto;
}

Feedback-button:active {
top: 5px;
background: -webkit-linear-gradient(-90deg, #ff8583 0, #ff5350 100%);
background: -moz-linear-gradient(180deg, #ff8583 0, #ff5350 100%);
background: linear-gradient(180deg, #ff8583 0, #ff5350 100%);
background-position: 50% 50%;
-webkit-background-origin: padding-box;
background-origin: padding-box;
-webkit-background-clip: border-box;
background-clip: border-box;
-webkit-background-size: auto auto;
background-size: auto auto;
-webkit-box-shadow: 0 5px 0 0 rgba(178,49,49,1) ;
box-shadow: 0 5px 0 0 rgba(178,49,49,1) ;

Всем привет. Сегодня мы заденем довольно необычную тему, а именно будущее веб — дизайна, это CSS фигуры.

Как известно, что сейчас очень модный , но в основном он состоит из прямоугольников, которые, в свою очередь, очень ограничивают кругозор дизайнеров. А тут ещё и адаптивность.. Которая очень ограничивает по поводу творчества. Но тут есть один огромный плюс — это обтекание текста вокруг прямоугольника, проще простого, а вот как сделать чтобы текст обтекал круглые или не ровные формы, вот это уже сложнее. Потому что картинки круглыми сделать нельзя.

Вот как раз в таком случае к нам на помощь бегут фигуры. Популярный сайт W3C CSS опубликовал первую документацию по фигурам. Вот этот пост на английском CSS Shapes Module Level 1 . Модуль этот вышел недавно 20 июня. Пока что это бета версия, которая включает в себя такие фигуры как прямоугольник, треугольник, эллипс, круг и многоугольник.

Теперь давайте подробнее рассмотрим, в чём же преимущество CSS фигур на примере.

Для начала возьмём не сложную HTML разметку за неё спасибо http://www.webdesignerdepot.com :

Это пример текста