Css %d1%84%d0%b8%d0%b3%d1%83%d1%80%d1%8b PNG, векторы, PSD и пнг для бесплатной загрузки

Рисуем треугольные фигуры средствами CSS

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

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

Преимущества метода

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

Для справки отметим, что треугольные объекты могут создаваться в графических редакторах и вставляться в код в виде изображения. Также треугольный знак присутствует в наличии списка спецсимволов HTML. Треугольники еще могут быть нарисованы посредством тега canvas или через среду SVG.

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

Суть метода

Мы рассмотрим, простой способ создания треугольных блоков, который основывается на свойстве border. При правильном обращении, указанное свойство разделит блок на равные треугольники с одинаковыми углами. Рассмотрим пример кода

CSS

.trigon {
    border-color: #47afca #5977b5 #ac3a39 #ff8931;
    border-style: solid;
    border-width: 200px 200px 200px 200px;
    height: 0px;
    width: 0px;
    display:block;
    margin:0px auto;/*центруем*/
}

В итоге на экране видим следующую картинку

Особенности метода

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

• метод позволяет рисовать только фигуры с острыми углами
• при явном не соблюдении равенства граней фигуры может возникнуть эффект искажения линий, которые и являются этими же гранями. Такой эффект ощутим в браузерах Opera и Internet Explower.
• комбинации треугольных фигур могут образовывать сложные многоугольники
• свойство box-shadow конфликтует с треугольными элементами, созданными по данной методике.

В каких браузерах работает?

Оценок: 3 (средняя 5 из 5)

Понравилась статья? Расскажите о ней друзьям:

Курсы по CSS (в открытом доступе)

Средний

Еще интересное

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

Так как верстка страниц становится все более сложной, разработчикам требуется доступ к большему количеству единиц измерений, чтобы воплотить дизайн в жизнь. Кроме привычных процентов, 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.

Автор урока Dudley Storey

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

Смотрите также:

CSS позиционирование (CSS position) // «Фрилансер по жизни»

StaticПо умолчанию

Relative +top,left

Relative

Absolute+ position: relative; у родителя +top,left

Absolute+top,left

Fixed+width: 100%;+top,left

Sticky*

.block-1

.block-2

.block-3

Элементы отображаются как обычно. Использование свойств left, top, right, bottom и z-index не приводит к каким-либо результатам.

.mainblock{

}

.block-1{

}

.block-2{

}

.block-3{

}

.block-1

.block-2

Положение элемента устанавливается относительно его исходного положения в коде. Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения.

CSS код:

.mainblock{

}

.block-1{

}

.block-2{

}

.block-3{

}

.block-1

.block-2

.block-3

Каждый элемент может находиться как ниже, так и выше других объектов веб-страницы, их размещением по z-оси и управляет z-index. Это свойство работает только для элементов, у которых значение position задано как absolute, fixed или relative.

CSS код:

.mainblock{

}

}

.block-2{

}

.block-3{

}

.block-1

.block-2

.block-3

Элемент якобы вырывается из кода и зависайт в воздухе. Он перестает влиять на остальные элементы. Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону относительно родителя у колого задан параметр position: relative;

CSS код:

.mainblock{

}

.block-1{

}

.block-2{

}

.block-3{

}

.block-1

.block-2

.block-3

Элемент якобы вырывается из кода и зависайт в воздухе. Он перестает влиять на остальные элементы. Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону относительно родителя у колого задан параметр position: relative; Если такого нет то элемент позиционируется относительно окна браузера.

CSS код:

.mainblock{

}

.block-1{

}

.block-2{

}

.block-3{

}

.block-1

.block-2

.block-3

Элемент якобы вырывается из кода и зависайт в воздухе. Фиксируется, то есть не скролится вместе с содержимым. Он перестает влиять на остальные элементы. Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону относительно окна браузера.

CSS код:

.mainblock{

}

.block-1{

}

.block-2{

}

.block-3{

}

.block-1

.block-2

.block-3

Это гибридное сочетание значений static и fixed. Изначально єлемент ведет себя как static но после того как скролл доходит до его границы он становиться fixed и прилипает к указанной позиции top или bottom.

* Смотри поддержку браузерами

** Для демонстрации работы нужно проскролить контент внутри блока

CSS код:

.mainblock{

}

.block-1{

}

.block-2{

}

.block-3{

}

CSS Shapes Level 1 Sample

Доступно в Chrome 37+

Определение формы

Благодаря свойству shape-outside css, установленному на элемент слева, этот абзац обтекает многоугольник форма, определенная в значении этого свойства.

Поддерживаются четыре основные формы: многоугольник (), круг (), эллипс (). и вставка () .Этот круг определяется с помощью радиуса ( 80 пикселей ) и центральное положение ( при 50% 50% ).

inset () используется для создания прямоугольных форм. внутри элемента. Это полезно для определения некоторых округлых уголки для поплавковой зоны.

Вы можете использовать альфа-канал изображения для размещения текста вокруг него. Передайте URL-адрес изображения в свойство shape-outside .Форма определяется пикселями, альфа-значение которых больше, чем порог, указанный в shape-image-threshold .

Шаг формы

shape-margin создает пространство между формой, определенной в Форма снаружи и обтекаемый текст вокруг нее.

Фигуры CSS используют поле ссылки для определения точного макета площадь плавания.Помимо ширины и высоты элемента по умолчанию, поле , поле , Можно использовать поле padding-box и border-box . Эта форма использует поле поля , определенное в форма вне собственности.

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

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

Эта фигура использует content-box , определенный в форма вне собственности. Контент выделен красным, граница желтого цвета, а область поля — голубого цвета

Формы на чистом CSS 3 способа

Это выпуск №22 из серии, посвященной современным решениям CSS для проблем, которые я решал за последние 13 с лишним лет работы фронтенд-разработчиком .

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

• границы
• линейный градиент
• клипса

Метод 1: Границы #

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

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

Чтобы проиллюстрировать, как это работает, мы предоставим разные цвета границ для каждой стороны:

 . Треугольник {
 граница: сплошной синий цвет 10 пикселей; 
 граница-правая-цвет: красный; 
 цвет нижней границы: черный; 
 граница-левый-цвет: зеленый; 
}  

Что дает следующее, в котором вы можете видеть, что мы, по сути, уже достигли 4 треугольных форм:

Чтобы вместо этого создать единый треугольник, мы сначала решаем, в каком направлении мы хотим указывать треугольник.Итак, если мы хотим, чтобы он указывал вправо, подобно значку «play», мы хотим, чтобы левая граница оставалась видимой. Затем мы устанавливаем цвета других границ на , прозрачный , например:

 . Треугольник {
 граница: сплошная прозрачная 10 пикселей; 
 граница-левый-цвет: синий; 
}  

В демонстрационном изображении ниже я добавил красный контур , чтобы увидеть ограничивающую рамку, чтобы мы могли обсудить некоторые улучшения.

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

  .треугольник {
 border-style: solid; 
 цвет рамки: прозрачный; 
 ширина границы: 7 пикселей 0 7 пикселей 10 пикселей; 
 граница-левый-цвет: синий; 
}  

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

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

  .треугольник {
 border-style: solid; 
 цвет рамки: прозрачный; 
 ширина границы: 0 7 пикселей 10 пикселей 7 пикселей; 
 цвет нижней границы: синий; 
}  

Результат:

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

Метод 2:

градиентов CSS создаются как значений фонового изображения.

Сначала давайте настроим нашу сцену, если хотите, определив размеры блока и предотвратив повторение фона :

 . Треугольник {
 ширина: 8em; 
 высота: 10em; 
 фон-повтор: без повтора; 
 контур: сплошной красный 1px; 
}  

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

  background-image: linear-gradient (45deg, синий 50%, rgba (255,255,255,0) 50%);  

Теперь, если бы наш элемент был квадратным, казалось бы, он срезан от угла к углу, но в конечном итоге нам нужно немного другое соотношение сторон, как мы делали раньше.

Наша цель — создать треугольник с таким же видом, как при использовании нашего метода границы.Для этого нам нужно будет настроить значения background-size и background-position .

Первая корректировка — изменить размер фона . В сокращении первое значение — это ширина, а второе — высота. Мы хотим, чтобы у нашего треугольника было 100% ширины, но только 50% высоты, поэтому добавьте следующее:

  размер фона: 100% 50%;  

С нашим предыдущим linear-gradient без изменений, вот результат:

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

Я не математик, поэтому пришлось немного поэкспериментировать с DevTools, чтобы найти правильное значение 😉

Обновите значение linear-gradient до следующего:

  linear-gradient (32deg, синий 50%, rgba (255,255,255,0) 50%);  

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

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

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

  background-image: 
 linear-gradient (32deg, blue 50%, rgba (255,255,255,0) 50%), 
 linear-gradient (148deg, синий 50%, rgba (255,255,255,0) 50%);  

Но — мы еще не доработали эффект, как видно на изображении прогресса:

Причина перекрытия заключается в том, что положение обоих градиентов по умолчанию — 0 0 , иначе известное как вверху слева .Это нормально для нашего исходного градиента, но нам нужно настроить второй.

Для этого нам нужно установить несколько значений на background-position . Они идут в том же порядке, что и background-image :

  background-position: вверху слева, внизу слева;  

И вот желаемый результат:

Обратной стороной этого метода является то, что он довольно негибкий для изменения соотношения сторон без пересчета градусов.

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

Чтобы получить мастер-класс по градиентам CSS для форм и полных иллюстраций, ознакомьтесь с A Single Div by Lynn Fisher

.

Метод 3:

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

Вот наша отправная точка для нашего элемента, это размеры блока и цвет фона :

 . Треугольник {
 width: 16px; 
 высота: 20 пикселей; 
 цвет фона: синий; 
}  

Концепция clip-path заключается в том, что вы используете его для рисования многоугольника (или круга, или эллипса) и размещения его внутри элемента. Любые области за пределами clip-path эффективно не отрисовываются браузером, таким образом «обрезая» внешний вид только до границ clip-path .

Чтобы проиллюстрировать это больше и сгенерировать желаемое определение clip-path , воспользуйтесь онлайн-генератором: Clippy

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

Для наших целей это треугольник, указывающий вправо:

  clip-path: многоугольник (0 0, 0% 100%, 100% 50%);  

С clip-path вы определяете координаты для каждой точки, которую вы размещаете вдоль пути.Итак, в этом случае у нас есть точка вверху слева ( 0 0 ), внизу слева ( 0% 100% ) и справа по центру ( 100% 50% ).

И вот наш результат:

Хотя clip-path очень гибок для многих форм, а также является наиболее масштабируемым из-за адаптации к любому ограничивающему прямоугольнику или соотношению сторон, есть некоторые предостережения.

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

Вот видео-умник от Колби Фэйока, чтобы лучше понять clip-path и как вернуть эффекты, такие как box-shadow

Демо #

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

Стефани Эклс (@ 5t3ph)

CSS-форм: разрушая оковы прямоугольного дизайна

Возможности HTML5 и CSS3 полностью превосходят то, что мы могли делать в Интернете всего пять лет назад. Спецификация CSS Shapes Module Level 1 способна вырвать нас из прямоугольных ограничений Интернета и вывести веб-дизайн на новый уровень. Он позволяет стилизовать элементы в различных формах (представьте, что элементы в форме круга или пятиугольника), а текст обтекает элементы гораздо более естественным образом (оборачивайте текст по краям вашего пышного дизайна вместо того, чтобы придерживаться квадратных границ) .В этой статье будут рассмотрены возможности CSS-фигур с кучей небольших демонстраций, чтобы показать, что возможно, и помочь вам начать изучение!

О характеристиках форм

Спецификация является кандидатом в рекомендацию, которая является «явным обращением к тем, кто не входит в соответствующие рабочие группы или сам W3C, для реализации и технической обратной связи».

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

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

Что вам понадобится для экспериментов с фигурами CSS

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

Если вы используете Chrome (не Canary), вставьте это в адресную строку:

  chrome: // flags / # enable-experimental-web-platform-features  

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

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

Форма

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

В своих демонстрациях я буду оживлять несколько отрывков из книги «Детская сказочная география» или «Веселое путешествие по Европе» Ф. Уинслоу. Британский музей был настолько любезен, что выпустил кучу работ в общественное достояние, и эта детская книга оказалась одной из них (а также, как оказалось, содержит множество изображений разного размера!).

Наш первый и очень простой пример выглядит так:

HTML-код выглядит так:

   
 Лапландцы 
 

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

Мы добавим свойство shape-outside к CSS элемента изображения ( .lapland ):

  .lapland {
  плыть налево;
  форма снаружи: вставка (1% округлое 45%);
}  

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

А для тех, кто просматривает в поддерживающем браузере, вот демонстрация CodePen:

См. Демонстрацию № 2 CSS Shapes Pen от SitePoint (@SitePoint) на CodePen.

Мы более подробно рассмотрим этот пример и параметры функции inset далее в следующем разделе.

Какие виды фигур возможны?

Свойство shape-outside позволяет нам использовать несколько различных функций для определения формы:

Функция inset () позволяет определить внутренний прямоугольник внутри плавающей области. Это будет полезно, если у вас есть дизайн, в котором вы хотите, чтобы текст перекрывал часть прямоугольного изображения.Возможно, у вас есть небольшое размытие цвета вокруг изображения, которое вы не возражаете, чтобы текст перемещался в него, или вокруг изображения много белого пространства, которое вы хотели бы сохранить в некоторых случаях, но хотите стиль в других. Все это возможно с помощью функции inset !

Вы определяете верхнее, правое, нижнее и левое положение прямоугольника аналогично тому, как вы определяете поля или отступы:

  shape-outside: inset (10 пикселей, 5 пикселей, 10 пикселей, 5 пикселей);  

Вы можете сократить значение точно так же, как в значениях полей / отступов, поэтому следующее дает прямоугольник вставки, который составляет 1% от всех краев элемента:

  форма снаружи: вставка (1%);  

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

Если вы добавите «round», а затем укажете размер, используя обычный синтаксис border-radius , появятся вышеупомянутые возможности округленных контейнеров. Это то, что мы сделали в нашем примере с Лапландером выше.

Я дам несколько вариантов, чтобы немного подробнее объяснить наш предыдущий пример. Приведенный ниже код дает элементу 10px border-radius , который вставлен от края нашего изображения на 1%:

  shape-outside: inset (1% вокруг 10 пикселей);  

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

  форма снаружи: вставка (1% округлость 45%);  

Вы можете пойти дальше с этими настройками, задав ему разные border-radius на каждом углу.Следующее, например, даст верхний левый 5 пикселей, верхний правый 10 пикселей, нижний правый 5 пикселей и нижний левый 5 пикселей:

  shape-outside: inset (1% круглый 5px 10px 5px 5px);  

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

  форма снаружи: круг ();  

Чтобы продемонстрировать, как это работает, допустим, у нас есть следующее:

Добавив приведенный выше код к изображению в правом верхнем углу приведенного выше снимка экрана, мы получим:

Пример CodePen:

См. Pen BDqLe от SitePoint (@SitePoint) на CodePen.

Установка радиуса окружности

Вы можете установить радиус круга в первом аргументе функции circle () .

По умолчанию радиус круга равен половине ширины элемента:

  форма снаружи: круг (50%);  

Вы можете установить радиус на 25%, чтобы круговая плавающая область составляла четверть ширины элемента:

  форма снаружи: круг (25%);  

Примечание. Проценты в circle () вычисляются по формуле с использованием как ширины, так и высоты в тех случаях, когда элемент не является полным квадратом.(Спасибо Развану Калиману в комментариях за указание на это)

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

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

  форма-снаружи: круг (ближайшая сторона);  

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

Посмотреть на CodePen:

См. Демонстрацию №3 CSS Shapes Pen от SitePoint (@SitePoint) на CodePen.

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

  форма снаружи: круг (дальняя сторона);  

Это позволит нам обернуть текст такими элементами, как:

Посмотреть на CodePen:

См. Демонстрацию №4 CSS Shapes Pen от SitePoint (@SitePoint) на CodePen.

Перемещение центра круга

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

  форма снаружи: круг (крайняя сторона слева);  

Мы можем создать круг, центр которого находится слева от изображения, а высота которого соответствует высоте элемента:

На CodePen:

См. Демонстрацию № 5 CSS Shapes Pen от SitePoint (@SitePoint) на CodePen.

Вы можете использовать набор различных значений позиционирования для центра круга. Теоретически все, что позволяет синтаксис позиции CSS:

  форма снаружи: круг (ближайшая сторона в центре);
форма снаружи: круг (ближайшая сторона на 10% 10%);
форма снаружи: круг (ближайшая сторона в центре);  

Вы даже можете получить довольно конкретную информацию, указав радиус круга и положение. Например, приведенный ниже CSS создаст круг, который составляет половину ширины элемента, центр которого находится слева от элемента (0) и 25% сверху:

  форма снаружи: круг (25% при 0 25%);  

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

Следующий код:

  форма снаружи: эллипс ();  

Результатов в этом:

На CodePen:

См. Демонстрацию №6 CSS Shapes Pen от SitePoint (@SitePoint) на CodePen.

Установка размера эллипса

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

  форма снаружи: эллипс (25% 10%);  

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

Посмотреть на CodePen:

См. Демонстрацию №7 CSS Shapes Pen от SitePoint (@SitePoint) на CodePen.

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

  форма-снаружи: эллипс (ближайшая сторона ближайшая сторона);  

Перемещение центра эллипса

Центр эллипса можно переместить, используя тот же метод, что и для элемента окружности :

  форма снаружи: эллипс (25% 10% при 0 25%);  

Функция polygon () позволяет вам определять любое количество точек для вашей формы, позволяя вам заставить ваш текст плавно обтекать даже изображение самой неудобной формы!

Вы определяете полигоны, задавая координаты каждой точки.Координаты могут быть в пикселях или в процентах. Первая точка должна иметь возможность связываться с последней:

  shape-outside: многоугольник (x1 y1, x2 y2, x3 y3, x4 y4, x5 y5);  

Возьмем этот пример с очень красивой иллюстрацией, составляющей букву «D» в начале нашей страницы:

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

  форма снаружи: многоугольник (88% 0, 90% 15%, 83% 22%,
                       93% 31%, 100% 36%, 72% 73%,
                       35% 75%, 19% 100%, 0100%,
                       0 0);  

Это отрегулирует плавающую область так, чтобы наш текст обтекал определенный многоугольник, который мы определили:

На CodePen:

См. Демонстрацию № 8 CSS Shapes Pen от SitePoint (@SitePoint) на CodePen.

Но… Определить координаты многоугольника сложно!

Согласен. Когда дело доходит до сложных изображений, особенно сложно работать с процентами! Здесь вам поможет расширение Brackets.

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

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

Фигуры из изображений

Одна из очень удобных функций CSS Shapes заключается в том, что если у вас есть прозрачное изображение PNG или GIF, вы можете использовать альфа-канал для определения плавающей области.Это так просто, как эти две строки:

  shape-outside: url (b.png);
порог изображения-формы: 0,0;  

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

shape-image-threshold определяет уровень непрозрачности, который вы хотите получить.0.0 полностью прозрачен, а 1.0 полностью непрозрачен.

В моем примере я выбрал 0,0, так как мое изображение имеет полностью прозрачные области, определяющие плавающую область:

Пример кода сверху приведет к следующему:

А вот и демонстрация CodePen:

См. Демонстрацию № 9 CSS Shapes Pen от SitePoint (@SitePoint) на CodePen.

Обновление редактора: как мы обсуждали в комментариях, демонстрация CodePen выше при тестировании в Chrome Canary с соответствующим включенным флагом, похоже, не работает должным образом из-за ошибки перекрестного происхождения в Chrome или CodePen.Это сработает, если вы обновите страницу несколько раз, но пока вы можете обратиться к демонстрации Патрика за рабочей версией.

Один важный момент — если вы загружаете HTML из своей файловой системы (например, file: ///Users/philkensebben/Web/yourfile.html ), а не с веб-сервера, вы столкнетесь с общим доступом к ресурсам. ошибка вроде этой:

  Изображение из источника 'file: //' заблокировано для загрузки политикой совместного использования ресурсов из разных источников: получен недопустимый ответ.Следовательно, к источнику 'null' доступ не разрешен.  

Поэтому обязательно протестируйте это на удаленном веб-сервере, чтобы избежать путаницы в том, почему он не работает!

Формы из коробки Модель

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

Вы можете использовать различные области блочной модели в качестве плавающей области. Я добавил изображение ниже, чтобы напомнить вам о различных частях блочной модели в CSS:

• Синяя область — это поле поля .Он состоит из поля элемента и находится за его пределами.
• Черная область — это рамка , граница . В приведенном выше примере у нас есть граница в 2 пикселя.
• Оранжевая область — это поле для заполнения . Это область, которая окружает ваш контент (например, наше изображение).
• Само изображение находится в поле содержимого . Это область прямоугольника, в которой находится наше изображение.

Вы можете использовать эти граничные области в качестве плавающей области, например:

  форма снаружи: поле поля;
форма-снаружи: граница-поле;
форма снаружи: набивка;
форма снаружи: поле содержимого;  

По сути, в зависимости от того, что вы определите, будет перенос текста.Если вы определите shape-outside как margin-box , то текст будет переноситься до края вашего поля (например, синяя область в приведенном выше примере). Если вы определите его как border-box , он будет переноситься до края вашей границы и так далее.

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

  радиус границы: 150 пикселей;
маржа: 5 пикселей;
форма-снаружи: поле-поля;  

Что выглядит так:

И на CodePen:

См. Демонстрацию № 10 Pen CSS Shapes от SitePoint (@SitePoint) на CodePen.

Тот же эффект с border-radius может быть получен с border-box , padding-box и content-box — он просто меняет то, насколько близко текст приближается к изображению.

Поле формы

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

В спецификации указано, что вы можете использовать длину (например, px, em. Rem и т. Д.), Проценты или значение функции calc () . В настоящее время только Chrome Canary поддерживает проценты, но стабильный Chrome поддерживает длины и функции calc () (если эти функции calc () не включают проценты). Вот несколько примеров:

  поле формы: 10 пикселей;
поле формы: 1em;
поле формы: 5%;
поле формы: calc (2em - 1px);  

Объедините несколько идей и исследуйте!

Пусть вас не обманывают старые иллюстрации в моих примерах — спецификацию можно использовать для более современного дизайна с фотографиями и тому подобным:

См. На CodePen (эта демонстрация слишком неудобна для встраивания).

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

Пожалуйста, примите участие, поэкспериментируйте и поделитесь своими выводами, чтобы помочь развить спецификацию во что-то, что мы можем уверенно и с радостью использовать в будущем. Вы можете оставить отзыв в W3C здесь или связаться с командой Adobe Web Platform.

Дополнительная информация

Если вы очень заинтересованы и хотите узнать больше о спецификации CSS Shapes, воспользуйтесь следующими ссылками:

25 интересных приемов использования форм CSS и SVG — Bashooka

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

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

Органическая анимация слоя формы SVG на основе работы Дианы Хлевняк «Градиентная топография». На платформе anime.js.

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

Как создавать очень крутые эффекты с помощью редко используемой функции.

Это перо показывает, как свойство CSS clip-path можно использовать для создания границ градиента различной формы.

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

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

Эффект декоративного фона веб-сайта, в котором фигуры SVG трансформируются и трансформируются при прокрутке.

Ана использует некоторые добросовестные уловки CSS, чтобы заставить градиент радуги повторять форму знака бесконечности.

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

Внешний вид может быть SVG.

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

Некоторые идеи для многослойных наложений фигур SVG, которые генерируются динамически с настраиваемыми свойствами для различных эффектов.

Рисование в CSS имеет множество ограничений, и если мы хотим рисовать в CSS, мы должны знать эти ограничения.

Яркий загрузочный спиннер в форме цветка с индикатором выполнения.

Это потрясающая работа над CSS-полигоном, дизайном и анимацией.

Рэйчел дает вам представление о возможности будущего, в котором мы можем буквально согнуть элементы DOM в соответствии с нашей волей с помощью CSS.

Используя shape-outside, вы можете обернуть текст вокруг формы, но добавление траектории обрезки позволяет вырезать форму из целого.

В этом методе используются две формы, установленные как shape-outside, чтобы имитировать функциональность формы внутри.Текст обтекает круг. Я также поместил его в тег SVG foreignobject, чтобы сделать фигуру масштабируемой.

Создайте свою геометрию с этим слайдером формы, вдохновленным дизайном материалов.

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

Экспериментируем с внешней формой в макете.

Базовая модель диаграммы Венна CSS, которая доступна, адаптивна и использует прогрессивное улучшение.

Вдохновленный разработкой материалов Google и кругами, создал этот круглый NAVBAR в стиле гамбургера, который можно добавить в дизайн вашего веб-сайта.

Доказательство концепции вращающегося слайдера. Использует clip-path и много математики.

CSS-форм

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

Выпущено