Сглаженные углы CSS используем Houdini, метод paint и пользовательские свойства


Содержание материала:

DrawImage Houdini CSS Paint API

Я передаю изображение через пользовательское свойство, как это:

и я использую уровень API свойств и значений CSS (включается через флаг функций Experimental Web Platform), чтобы зарегистрировать свойство изображения:

Затем я пытаюсь нарисовать это в своем рабочем листе:

для отображения worklet я сделал простой 500 * 500 div и добавил стиль:

Консоль говорит мне, что img является CSSImageValue, так что, похоже, он работает каким-то образом, но изображение не отрисовывается на фоне div.

Кому-нибудь удалось заставить это работать или некоторые функции, которые требуются для такого рода вещей, еще не реализованы?

Сглаженные закругленные углы без использования изображений

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

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

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

Итак, моя задача заключалась в реализации с помощью CSS вот такой рамки, абсолютно не используя изображения:

Увеличенное изображение угла выглядит следующим образом:

Я сделал абсолютно идентичный вариант с помощью CSS. За основу был взят предложенный ранее вариант. Чтобы добавить дополнительные пиксели, которые придадут углам сглаженность, я использовал несколько вложенных тегов, каждый из которых состоит из одной буквы ( b , i , q ). Это позволяет максимально оптимизировать HTML-код.

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

Примеры решения

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

Что мы имеем в результате:

  • валидный код CSS и HTML;
  • кроссбраузерность кода;
  • углы закруглены без использования графики;
  • углы сглажены.

Из минусов данной модели стоит отметить лишь несемантическую верстку и размер кода, который, имхо, не так существенен.

В нашей жизни, наполненной заботами, очень важно иметь возможность хорошо отдохнуть. Правильно подобранная и недорогая мебель для спальни от компании «МИРТ-СЕРВИС» поможет вам в этом.

Скругление углов. Обзор методов.

Сейчас прямо-таки эпоха скругленных уголков.

Где дизайнеры только их не используют: скругляют блоки

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

Но все ли так просто и безоблачно? Посмотрим на такой вот дизайн:

нужно скруглить фото расположенном на фоне с более, чем одним цветом (другая фото или градиент). Да еще учесть что блок может «плавать» по этому фону. Т.е. вырезать четыре картинки и разместить их по углам уже не получится.

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

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

  • быть простым в использовании
  • быть универсальным
  • минимум дополнительных тегов в коде (чтобы облегчить DOM и сохранить семантику)
  • минимум внешних файлов: картинок, javascript (сократить запросы к серверу)

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

Почти идеальное решение — CSS3 border-radius

В 2002 W3C начало рекомендовать разработчикам браузеров свойство border-radius, которое решало одним махом все проблемы со скруглениями.

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

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

Недостатки

  • на дворе весна 2010-го, а border-radius понимает только Opera 10.5 (подпольные браузеры в счет не беру). В чистом виде идеальное решение при всем оптимизме нам светит через 2-3 года. Частично проблему кроссбраузерности исправляют свойства -moz-border-radius (для mozilla) и -webkit-border-radius (для webkit-браузеров), но в сумме это не покрывает и половины пользователей.
  • браузеры на движке webkit вроде как делают скругление без сглаживания

update 30.09.2010 С появлением плагина CSS3 PIE ситуация изменилась: CSS3, расширения браузеров и этот плагин, теперь можно охватить около 90% пользователей. Для большинства проектов этого достаточно, тем более, что число старых браузеров с каждым месяцем становится ощутимо меньше, плюс скругления не являются критически важным элементом дизайна (сайта): пользователи всех браузеров информацию сайта увидят. Вот как это выглядит в CSS коде:

Заметки

  • таким способом скруглить картинку зачастую проще, если ее поместить в бэкграунд (background);
  • если картинка размещена в контейнере, который имеет скругленные углы, чтобы картинка не выходила за рамку родителя, следет ему (родителю) добавить overflow: hidden;
  • update 25.01.11 by Денис Кораблев Если применить скругление углов к таблице, ИЕ всех версий подвисает. Причем может проявиться только при обновлении страницы или переходе на другую. Решение — обернуть таблицу в дополнительный

Скругленные углы с помощью картинок

Метод предельно прост — каждый уголок будет картинкой, которую абсолютным позиционированием размещаем внутри блока по углам блока-родителя. Например, имеем по дизайну вот такой заголовок:

При этом он должен тянуться вертикально и горизонтально. Наши действия: вырезаем углы и склеиваем их в одну картинку чтобы минимизировать число отдельных файлов (изображение увеличено для наглядности)

Далее городим страшную конструкцию в HTML, а стилями расставляем углы по местам:

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

  • простота реализации
  • минимальное к-во внешних файлов

Недостатки

  • наличие внешнего файла(ов)
  • избыточность HTML кода, его не семантичность
  • при изменении цвета блока или радиуса скругления придется перерезать картинки заново, править стили
  • сложно, а иногда и невозможно сделать таким способом скругления (например, скруглить фото на неоднородном фоне — см. пример в начале)

Метод отлично рассмотрен на техногрете Сергеем Чикуенком.

Скругленные углы с помощью jQuery.corner

Плагин для jQuery, который позволяет сделать уголки разнообразной формы. На странице плагина можно оценить большое разнообразие доступных углов. Тут же доступна последняя версия плагина.

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

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

Недостатки

  • нет возможности сделать углы изображениям (в описании скрипта сказано, что применим только к блочным элементам)
  • не работает кроссбраузерно на неоднородном фоне
  • косяки, если скругляемый элемент имеет неоднородный фон
  • возможны косяки с расположением углов в IE6
  • углы реализуются с помощью миллиона динамически вставленных элементов в DOM (что-то мне подсказывает, что это не лучшим образом скажется на скорости анимаций на страницах)

Эти косяки вылезли за 10 минут тестирования. На самом деле думаю косяков больше — в топку такой плагин.

rocon — js библиотека для создания скругленных углов

Кто делает

Что делает

Скругляет углы у элементов с однородным фоном на любом фоне. Плюс есть возможность добавления скругленного бордюра. Примеры.

Как делает

Для mozilla и браузерах на движках webkit используются специфические CSS правила -moz-border-radius, -webkit-border-radius. Для Opera используется canvas, для IE VML. Детали в статье автора «rocon — подробности».

Где взять

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

  • быстро работает
  • довольно прост в применении
  • небольшой вес библиотеки
  • продумана возможность резиновости блоков
  • продумано динамическое добавление блоков со скруглениями
  • один внешний файл при любом числе углов

Недостатки

  • пока не реализованы скругления для блока с неоднородным фоном (например с градиентом)
  • не применимо для изображений ( )
  • местами еще сыровата библиотека

Верим, что Сергей найдет время доработать скрипт. Ждем этого дня не меньше, чем Нового года.

DD_roundies — еще одна библиотека для скругления углов

Кто делает

Как делает

Принцип несколько схож с библиотекой rocon — для mozilla и webkit используются CSS правила -moz-border-radius и -webkit-border-radius. Для IE используется VML, для Opera SVG. Главное отличие от rocon — скгругленный блок отрисовывается целиком, что делает резиновость блока довольно трудной (ресурсоемкой). В rocon каждый угол — это отдельный элемент.

Где взять

Скачать библиотеку, посмотреть примеры, прочитать о синтаксисе можно на странице скрипта.

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

  • прост в применении
  • работает на неоднородном фоне
  • есть возможность задания разных радиусов для разных углов

Недостатки

  • слабая кроссбраузерность (как минимум есть проблемы в IE8, Opera версии меньше 10)
  • с багами работает скругление блоков с неоднородным фоном
  • не применимо к картинкам
  • медленная работа в IE при изменении размеров блока из-за постоянного пересчета размера блока и перерисовки фигуры

Вывод

В реальных сайтах малоприменимо.

Скругление картинок на стороне сервера. Библиотека ImageMagick.

Что делает

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

Где почитать

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

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

Недостатки

  • применимо только к изображениям (img)
  • если изображение на веб странице должно быть расположено на неоднородном фоне, тогда придется картинки выдавать в формате png-24, что ощутимо может повлиять на вес изображения

Зачем этот способ знать верстальщику

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

CSS3 + вендорные префиксы + PIE

update 10.09.10: суть простая — используем CSS3 свойство border-radius для Opera 10.5+ и новых браузеров, которые будут появляться дальше, для некоторых продвинутых браузеров используем специфические (вендорные) свойства, для IE6-8 плагин PIE:

  • простота и скорость реализации;
  • чистый HTML код;
  • отсутствие картинок;
  • только IE6-8 будут подгружать дополнительный файл PIE.htc.
  • не все старые браузеры поддерживают вендорные префиксы (например, скругленные углы таким способом не увидят пользователи браузеров FF ниже версии 3.6, Opera версии ниже 10.5);
  • браузеры поддерживающие CSS скругления, несколько по разному могут отобразить скругленные углы.

Подытожим

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

Как сгладить градиент?

Друзья, прошу помощи. Есть див в котором есть градиент, вот скрин:
https://prnt.sc/h8prd1
Но почему то у него вместо ровной линии видны пиксели. Есть ли какой-то метод чтобы их сгладить?

Реализовывать сие чудо с помощью SVG можно, но не хочется нагружать код.
Заранее благодарен за ответы 🙂

  • Вопрос задан более года назад
  • 321 просмотр

Не рекомендую использовать CSS-градиенты по двум причинам:
1. Мыльный край является проблемой (возможно до сих пор):
https://stackoverflow.com/questions/26652661/blurr.
2. Старые браузеры, без поддержки или с плохой поддержкой CSS3 (тот же мыльный край). Говоря о старых браузерах можно иметь в виду даже браузер полугодичной версии.

Соответственно, повёрнутый псевдоэлемент будет «более лучшее», хотя никакой гарантии, что он будет без «лесенки». Но, возможно, её сгладит box-shadow 🙂

Пользовательские свойства CSS

Опрос Эшли Нолана в ноябре 2020 года показал, что 84% фронтенд-разработчиков используют CSS-препроцессор. В то же время самой полезной возможностью препроцессоров разработчики считают переменные. Это неудивительно. Переменные помогают упорядочить код, избежать дублирования, улучшают читаемость, делают проще рефакторинг.

У препроцессорных переменных есть ограничения: они ничего не знают о структуре DOM, не работают в псевдо-классах и медиа-запросах, их нельзя прочитать или изменить с помощью JavaScript.

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

На эту тему рекомендуем посмотреть доклад Вадима Макеева «Мой ванильный CSS»

Пользовательские свойства CSS (CSS custom properties) выполняют функцию нативных переменных в CSS и не имеют указанных ограничений. А с недавних пор они поддерживаются всеми современными браузерами. В этой статье мы научимся объявлять и использовать пользовательские свойства.

Объявление и использование

Объявить пользовательское свойство можно с помощью двойного дефиса (—):

Вы можете спросить, а почему не @ как в LESS, или $ как в Sass, ведь это гораздо приятнее глазу? Такой синтаксис позволяет использовать нативные переменные вместе с любым препроцессором, и они не будут компилироваться и попадут в неизменном виде в результирующий CSS.

Автор спецификации Таб Аткинс в своем блоге объясняет выбор синтаксиса для пользовательских свойств.

Если мы используем $ foo для переменных, мы не сможем использовать его для будущих «похожих на переменные» вещей.

Имя пользовательского свойства чувствительно к регистру. Свойство —main-color — это не то же самое, что —Main-color .

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

Допустимо даже такое значение свойства:

С точки зрения CSS это некорректное значение, но его потенциально можно прочитать и обработать из JavaScript. Это открывает простор для фантазии разработчиков.

Топ-пост этого месяца:  Группировка роутеров. Helpers. Slim PHP

Получить значение пользовательского свойства можно с помощью функции var().

Обратите внимание на второй аргумент функции var(). Его значение выполняет роль фоллбэка и применяется, когда переменная не определена. В качестве фоллбэка может использоваться значение другой переменной:

В примере выше мы намеренно не задали значение переменной с помощью выражения —color:; . Это означает, что переменная объявлена, но не определена. Не путайте с —color: ; — здесь значением переменной является пробел, а это некорректное значение.

Значение пользовательского свойства можно использовать для объявления другого свойства.

Значения пользовательских свойств можно складывать, вычитать, умножать и делить с помощью функции calc() .

Область видимости и наследование

Переменные в Sass, как и в других препроцессорах, существуют вне селектора. Такие переменные считаются глобальными. Пользовательские свойства можно объявлять только внутри селектора. Этот селектор ограничивает область видимости свойства. Спецификация рекомендует использовать псевдо-класс :root для объявления глобальных пользовательских свойств.

Пользовательские свойства подчиняются правилам каскада и наследуются до последнего потомка.

Использование ключевых слов

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

  • inherit — применяется значение родительского элемента.
  • initial — применяется начальное значение, определенное в спецификации CSS (пустое значение или ничего для пользовательских свойств CSS).
  • unset — применяется унаследованное значение, если свойство наследуется (как в случае пользовательских свойств) или начальное значение, если свойство не наследуется.
  • revert — сбрасывает свойство к значению по умолчанию, установленному таблицей стилей браузера (пустое значение в случае пользовательских свойств).

Установить для всех свойств начальное значение можно с помощью свойства all :

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

Отличия пользовательских свойств от препроцессорных переменных

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

Значения пользовательских свойств подставляются во время выполнения, поэтому могут изменяться «на лету» и использоваться в медиа-запросах.

— IMG —
Крис Койер показал пример использования пользовательских свойств в медиа-запросах.

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

Поскольку пользовательские свойства CSS — это такие же свойства, доступ к ним можно получить из JavaScript с помощью API CSSStyleDeclaration.

Поддержка

Desktop

Chrome Opera Firefox IE Edge Safari
49 36 31 No 15 9.1

Mobile

iOS Safari Opera Mobile Opera Mini Android Android Chrome Android Firefox
9.3 37 No 56 57 52

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

Можно трансформировать код с CSS-переменными, например, с помощью плагина postcss-custom-properties. Но, в отличие от компиляции препроцессором, плагин позволяет сохранить переменные м вызовы функции var() для тех браузеров, которые их поддерживают.

Дополнительные материалы

Отличные подробные статьи на английском языке:

Также советуем посмотреть доклад Павла Ловцевича «Пользовательские свойства как основа архитектуры CSS» с FrontTalks, где он подробно рассказывает о том, почему пользовательские свойства крутые.

В Firefox с 2014 года, в Chrome и Safari с марта 2020 года, в Edge с апреля 2020 года (Источник: CanIUse)

Нашли опечатку? Orphus: Ctrl+Enter

© getinstance.info Все права защищены. 2014–2020

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

CSS Shapes

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

Новая спецификация CSS Shapes меняет такое положение вещей. Представленная в середине 2012 года компанией Adobe , она имеет своей целью предоставить веб-дизайнерам новые возможности размещения контента, который теперь может обтекать сложные геометрические фигуры, как изнутри, так и снаружи — чего мы раньше не могли сделать даже с помощью JavaScript .

Например, обратите внимание, как текст обтекает круглое изображение в этом макете. Без Shapes , текст был бы просто прямоугольным блоком — возможность взаимодействия со сложными фигурами действительно открывает перед дизайнерами новые горизонты:

Давайте рассмотрим, как работает Shapes , и как вы можете начать его использовать.

Поддержка браузерами

В настоящее время CSS Shapes поддерживается только в Webkit Nightly и Chrome Canary , но его Модульный уровень 1 получил статус « рекомендовано к рассмотрению », то есть свойства и синтаксис, определенные в спецификации, вполне стабильны.

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

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

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

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

Когда же будут реализованы свойства CSS Shapes shape-inside , мы сможем сделать блок самого контента также ромбическим, и такие макеты, как тот, что приведен ниже, станут вполне возможны:

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

Создание CSS Shape

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

Фигуры могут быть созданы с помощью одной из следующих функций:

Каждая фигура определяется набором точек. Некоторые функции принимают точки в качестве параметров; другие принимают смещения — но все они в конечном итоге рисуют фигуры в виде набора точек. Мы рассмотрим параметры для каждой из этих функций в приведенных ниже примерах.

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

Изображение должно быть совместимо с CORS . Если предоставляемое изображение по какой-либо причине не может быть отображено (например, если оно не существует), то не будет применяться ни одна из фигур.

Список свойств фигуры, которые принимают указанные выше функции в качестве значений:

  • shape-outside : укладывает контент вокруг (вне) фигуры;
  • shape-inside : укладывает контент внутри фигуры.

Вы можете использовать свойство shape-outside в сочетании со свойством shape-margin, чтобы добавить отступ от краев фигуры, этот отступ отодвинет текстовый контент от границ фигуры, создавая между ними свободное пространство. Аналогично сочетание свойств shape-inside и shape-padding отодвигает контент от границ фигуры изнутри, создавая внутренний отступ.

С помощью свойств и функций фигур, объявить фигуру, применяемую к элементу, можно одной строкой CSS -кода:

Даже если вы примените этот CSS -код к элементу, форма не будет применена, если не будут выполнены два условия:

  • Элемент должен быть плавающим. Будущие уровни CSS Shapes предоставят нам возможность определять фигуры и для не плавающих элементов, однако пока мы не можем сделать это;
  • Элемент должен иметь внутренние размеры. Высота и ширина, установленные в элементе, будут использоваться для создания системы координат этого элемента.

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

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

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

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

Исходный бокс Shapes

C SS Shapes определяется и создается внутри исходного бокса ( reference box ), который используется, чтобы нарисовать фигуру в элементе. Кроме высоты и ширины элемента, бокс содержит: бокс границы, бокс смещения, бокс отступа, бокс контента, — они также используются в качестве основы для определения характеристик фигуры элемента.

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

Ключевое слово padding-box в приведенном выше коде указывает, что форма применяется, и она ограничивается боксом заполнения (областью заполнения) элемента. Функция circle() определяет фигуру круга, его размер и положение в элементе.

Определение Shapes с помощью функции фигуры

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

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

Вы можете спросить: « Почему бы не использовать border-radius для круглого изображения? » Ответ таков — свойство border-radius не влияет на обтекание контентом внутри или вокруг элемента, к которому применяется — оно не влияет на область контента внутри элемента или обтекание областью контента вокруг элемента. Оно влияет только на границы элемента и фоны.

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

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

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

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

С помощью этого кода текст будет « видеть » круглую фигуру, примененную к изображению и укладываться вокруг него, как это было показано на первом скриншоте. (Сам результат вы можете увидеть здесь .) В браузерах, не поддерживающих Shapes , будет применяться код, который выводит контент так, как показано на втором скриншоте.

Вы можете использовать функцию circle() , как есть, или путем передачи в нее параметров. Ее официальный синтаксис следующий:

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

Вы можете указать радиус окружности, используя любые единицы длины ( px , em , pt и т.д.) Вы также можете указать радиус, используя либо furthest-side , либо closest-side , но по умолчанию используется параметр closest-side , что означает, что браузер будет использовать расстояние от центра элемента до ближайшей к нему стороны, как длину радиуса. farthest-side использует расстояние от центра до самой дальней стороны элемента:

Функция ellipse() действует так же, как функция circle() , с теми же значениями, за исключением того, что вместо одного параметра радиуса, она принимает два: один для длины радиуса по оси х , второй — по оси у :

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

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

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

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

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

Реальный пример вы можете увидеть здесь .

И еще одна функция Shape — polygon() , она определяет более сложные произвольные фигуры, используя любое количество точек. Функция принимает набор пар координат, каждая из которых указывает положение одной точки. Множество точек в совокупности определяют фигуру.

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

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

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

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

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

Для того чтобы визуализировать форму многоугольника, который мы создали, мы должны « обрезать » части изображения вне этой фигуры. В этом нам поможет свойство clip-path из CSS Masking Module .

Свойство clip-path принимает те же функции фигуры и значения, что и свойства фигуры. Если мы передадим в свойство clip-path ту же фигуру многоугольника, которую мы использовали в свойстве shape-outside , мы обрежем все части изображения, которые находятся вне определенной фигуры:

Результат будет следующим:

Свойство clip-path на сегодняшний день поддерживается с помощью префиксов, поэтому оно работает в Chrome через добавление к свойству префикса -webkit- . Реальный пример вы можете увидеть здесь .

Топ-пост этого месяца:  Как Проверить Скорость Интернета (Спидтест, Интернетометр от Яндекса)

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

Функция polygon() также может принимать (необязательно) ключевые слова nonzero или evenodd . С их помощью указывается, как располагаются относительно друг друга области внутри фигуры многоугольника, которые имеют пересекающиеся сектора.

Больше об этом вы можете узнать в разделе свойства SVG fill-rule .

Определение фигуры с помощью изображения

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

Фигура определяется пикселями, чьи альфа-значения больше, чем определенное крайнее значение. Этот порог по умолчанию равен 0,0 (полностью прозрачный), или вы можете установить собственное значение с помощью свойства shape-image-threshold . Таким образом, любой непрозрачный пиксель будет использоваться как часть определенной формы из изображения.

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

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

С помощью свойства shape-outside со значением url() , указывающим на это изображение фотографии, мы можем задать обтекание контентом вокруг элемента в форме листа:

Конечно, если бы вы применяли к элементу фон, его нужно было бы обрезать вне определенной фигуры. Так как clip-path не принимает альфа-изображение в качестве значения, это можно сделать с помощью свойства mask-image (с соответствующими префиксами) из Masking Module . Результат выглядит следующим образом:

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

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

CSS Shapes в адаптивном дизайне

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

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

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

Инструменты Shape

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

Беар Трэвис создал коллекцию Shape Tools , которая позволяет визуально задавать многоугольные фигуры. Затем инструмент автоматически генерирует для нас функцию фигуры. Это довольно удобно, но данные инструменты имеют определенные ограничения.

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

Более продвинутый и гибкий инструмент Shapes был разработан командой Adobe Web Platform . Инструмент был недавно выпущен в качестве расширения для бесплатного редактора Brackets компании.

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

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

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

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

Будущее: CSS Exclusions

Спецификация CSS Shapes раньше использовалась и как спецификация CSS Shapes , и как Exclusions , но позже они были разделены.

В то время как CSS Shapes определяет свойства shape-inside и shape-outside , CSS Exclusions будет определять свойства, которые позволяют нам уложить контент вокруг элементов, которые не являются плавающими, например, элементов с заданным абсолютно расположением.

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

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

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

Дальнейшее развитие Shapes

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

Сегодня редакторы спецификации ориентированы на работу с shape-outside , и еще до конца 2014 года мы, вероятно, увидим широкое применение CSS Shapes .

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

Вы также можете расширить тест Modernizr с помощью этого скрипта , чтобы проверить поддерживается ли shape-outside или скачать пользовательские сборки, включающие этот скрипт.

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

Что бы вас не заинтересовало — макеты неправильной формы или анимированные Shapes — пришло время попробовать их на практике и поэкспериментировать.

Данная публикация представляет собой перевод статьи « CSS Shapes 101 » , подготовленной дружной командой проекта Интернет-технологии.ру

5 CSS свойств для изображений, которые вам необходимо знать

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

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

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

Давайте рассмотрим каждый из них подробнее.

Усиление резкости изображений с image-rendering

Поддержка браузерами — 90,82% (на 11.2020)

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

Это широко поддерживаемое свойство контролирует алгоритм, применяемый браузером при масштабировании. Оно имеет 2 значения: crisp-edges и pixelated .

Значение crisp-edges удерживает цветовой контраст между пикселями. Другими словами, никакого сглаживания не производится, что отлично подходит для создания контраста.

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

Если вы внимательно посмотрите на края цветов на gif-изображении, представленном ниже, вы сможете увидеть разницу между изображениями: обычным и с примененным CSS-свойством image-rendering: pixelated .

Растягивание изображений с помощью object-fit

Поддержка браузерами — 89,7% (на 11.2020)

Значения contain, cover, fill похожи на аналогичные значения свойства background-size, которое указывает как фоновое изображение заполняет какой-либо элемент. Свойство object-fit очень похоже на упомянутое выше свойство background-size, так как оно также определяет размер изображения внутри его контейнера. Значение contain масштабирует изображение внутри контейнера. Cover делает тоже самое, но если соотношение сторон изображения и контейнера не совпадают, изображение обрезается. Fill заставляет изображение растягиваться и заполнять его контейнер. scale-down уменьшает изображение чтобы оно поместилось внутри контейнера.

Сдвиги изображений с помощью object-position

Поддержка браузерами — 89,7% (на 11.2020)

Аналогично дополняющему background-position свойству background-size, существует свойство object-position , которое дополняет object-fit . Свойство object-position позволяет сдвинуть изображение внутри его контейнера. Координаты можно указывать в абсолютных и относительных величинах, использовать ключевые слова или комбинировать различные значения ( top 20px right 5px, center right 80px ).

Выравнивание изображений с помощью vertical-align

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

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

Добавляем тень, используя filter: drop-shadow()

Тени, применяемые к тексту и блочным элементам, могут сделать ваши страницы более привлекательными. То же самое относится и к изображениям. Значения, которые передаются filter: drop-shadow() очень похожи на значения CSS-свойств для создания тени ( text-shadow, box-shadow ). Первые 2 указывают вертикальный и горизонтальный отступ тени от изображения, третий и четвёртый – степень размытия и радиус распространения тени, а последнее, пятое значение – цвет тени.

Как text-shadow и drop-shadow тень добавляется к объектам, к которым применяется этот фильтр. При использовании filter: drop-shadow() к изображениям во внимание принимаются прозрачные участки в изображении и тень отбрасывается с их учётом.

Как сгладить углы?

Уточните вопрос — сегментов изначально мало и интерсует как кол-во увеличить или хочется сгладить, но поликов много не делать?

В-первом случае — выделить грани и через champfer
Во-втором — можно повесить модификатор типа TurboSmooth со значением 0, а 1 или 2 поставить в render iters. Тогда кол-во поликов увеличиться только при рендере. Если модификатор чильно изменит форму, то надо будет поставить галочки на SmoothResult и вручную назначить уникальные группы сглаживания на грани

Хы. Тут просто как два полигона сгладить
Накинь модификатор Smooth в и галочку поставь. Потом можно этот модификатор сколлдапсить

НО более правильно в режиме редактирования полигонов выделить все и назначить одну группу сглаживания

Say Hello to Houdini and the CSS Paint API

I haven’t been this excited about a new browser tech in a long time.

Houdini is an ambitious project to give developers more power over CSS than we’ve ever had before. The first piece of this project to emerge is the CSS Paint API. This article will explain why Houdini is so exciting, then show you how to get started with the Paint API.

The Classic Disappointment

How many times have you heard about a killer new CSS feature and thought:

“Wow, that’s awesome! Can’t wait to use it… in 2 years, when browsers actually support it.”

Sometimes we don’t want to wait, so we turn to CSS polyfills. But these are often complex beasts behind the scenes, trying to emulate every nuance of the feature being polyfilled. This leads to a lot of potential for edge case bugs. There are also performance implications, as a polyfill’s JavaScript is unable to compete with the efficiency of a browser’s native implementation.

If you need more convincing, check out the dark side of polyfilling CSS.

A New Hope

So that’s mildly depressing, but what if I told you that one day, you’ll hear about a new CSS feature and think:

“Wow, that’s awesome! Can’t wait to use it… right now!”

This is what Houdini is striving to deliver. Houdini, in the spirit of the Extensible Web Manifesto, gives developers direct access to the browser’s CSS engine. This gives developers the power to create their own custom CSS features that run efficiently within the browser’s native rendering pipeline.

These custom CSS features are defined in worklets, which are just JavaScript files that you deploy to your website like any other JavaScript file (they execute differently, but we’ll talk more about that later). Then anyone that visits your site will be able to see the custom CSS feature, just as if it was built into their browser.

This means that new CSS features can be implemented via Houdini long before browser vendors implement them. Or you can scratch your own itches by making CSS features that you want, but browser vendors would never implement.

Browser Support

The good news is that Houdini is backed by Apple, Google, Microsoft, Mozilla, and Opera. The bad news is that only Google’s Chrome has implemented anything so far. Here’s the browser support chart at the time of writing.

Update: Houdini continues to progress, so be sure to check the updated chart to see where things stand with various browsers.

That chart throws a lot at you, so let me explain.

Houdini is a collection of APIs that are different pieces of the puzzle, so to speak. The Layout API lets you control how elements are laid out with CSS, the Parser API lets you augment how CSS expressions are parsed, and so forth. As you can see, Houdini is very much a work in progress.

But there’s one Houdini API that you can start playing with today: the CSS Paint API. This API lets you draw images for use with CSS properties that expect them — for example, background-image and list-style-image .

For now, you’ll need Chrome to play with the Paint API. It’s enabled by default in the latest version of Chrome. If you’re using a version earlier than Chrome 65 (Android phone perhaps?) then the Paint API is still behind a flag — go to chrome://flags and enable Experimental Web Platform features.

To check for Paint API support via JavaScript, use this.

And to check via CSS, use this.

The demo below uses both methods to check if your browser supports the Paint API. If you see double checkmarks, then you’re good to go!

Топ-пост этого месяца:  Новый WordPress будет поддерживать rel=ugc

Technical Notes

An important caveat is that the Paint API only works over https or on localhost . If you’re developing locally, http-server makes it super easy to view your pages on localhost .

Worklets (which we’ll talk more about in a minute) are cached by your browser, so be sure to disable the cache to see code updates take effect.

Also know that you can’t set breakpoints or use the debugger statement with code ins >console.log() .

A Simple Paint Worklet

Let’s make something with the Paint API! We’ll start with something simple that draws an X across an element. We can use this to make placeholder boxes, commonly seen in mockups/wireframes to represent where images will go. Here’s the demo.

The drawing code goes into a paint worklet, which lives in its own JavaScript file. Paint worklets have limited scope and functionality. They can’t access the DOM and many global functions (like setInterval ) are not available. This helps keep them efficient and potentially multi-threadable (not done yet, but it’s on the wishlist).

The paint() function is called whenever the element needs to be (re)painted. It gives us a couple incoming parameters to work with. ctx is the object we draw on, just like a CanvasRenderingContext2D object (documentation here) but with some limitations (like no text drawing). size gives us the width and height of the element being painted.

Next, we tell the page about our paint worklet. Let’s also add a

Finally, we connect the paint worklet to the

And that’s it. Congratulations, you’re using the Paint API!

Using Input Properties

As it stands now, our little paint worklet hardcodes the thickness and color of the X. Wouldn’t it be nice if it automatically used the thickness and color of the element’s border?

We can accomplish this with input properties, provided by the Typed Object Model (or Typed OM). It’s another part of Houdini, but unlike the Paint API, it’s still behind a flag. Enable it by going to chrome://flags and enabling Experimental Web Platform features.

You can check for Typed OM support in code with this.

Now let’s update the code for our paint worklet.

We’ve added inputProperties to tell the paint worklet which CSS properties to look for. After that, the paint() function can use a third incoming parameter, props , to access the values for these properties. And now our placeholder boxes are a little smarter.

It’s fine to use border in our CSS, but keep in mind that it’s actually shorthand for 12 different CSS properties.

The paint worklet needs us to be specific, so for the purposes of this demo, we use border-top-width and border-top-color .

Something cool to note is that border-top-width is converted to pixels as it’s passed into the paint worklet. This is perfect, since that’s the unit of measurement that ctx.lineWidth expects. As proof, the third placeholder box in the demo above has a border-top-width of 1rem , but the paint worklet is given 16px .

Crafting a Jagged Edge

For our next trick, we’ll make a paint worklet that draws a jagged edge. Here’s the demo.

And here’s the code for the paint worklet.

We’re using inputProperties again, this time to control the w >—tooth-width and —tooth-height are custom properties (also known as CSS variables). This often makes more sense than hijacking an existing CSS property, but it does require another step.

You see, the browser knows that certain built-in CSS properties are length values (like with border-top-width from earlier). But a custom property can be used for all sorts of stuff. Your browser can’t assume a custom property is being used for length, so we have to tell it.

The Properties and Values API lets us do just that. It’s yet another piece of Houdini and also requires the Experimental Web Platform features flag be enabled at chrome://flags.

You can check for Properties and Values API support in code with this.

Once enabled, we can add the following JavaScript (outside of the paint worklet file).

Now we can use all sorts of length values with —tooth-width and —tooth-height and your browser will understand them and convert them to pixel values for our paint worklet. We can even use calc() expressions. Crazy! And if we forget to set them or give them inval >initialValue .

isn’t the only syntax allowed, as you can see here. So we could also register a —tooth-color property of syntax , but I have something better in mind. By using -webkit-mask-image with our paint worklet, we can “knockout” the jagged edge shape with whatever background we want. The CSS looks like this.

The paint worklet code is exactly the same. Now check out our new fancy jagged edges.

Input Arguments

You can also pass values into your paint worklet by using input arguments. These allow you to specify arguments in CSS like so.

The paint worklet declares what it expects via inputArguments . Then the paint() function can grab those arguments from a fourth incoming parameter, an array named args as seen below.

I’m honestly not a fan of input arguments. Custom properties are a lot more versatile. They also help create better self-documenting CSS, since you can use descriptive property names.

New Ways to Animate

Let’s do one last project. Using familiar concepts we’ve already covered, we can create this nifty fading polka dot pattern.

We start by registering some custom properties to control the polka dots.

Then our paint worklet can use these custom properties, along with a bunch of math, to draw the polka dot pattern.

Lastly, here’s the CSS that sets the custom properties and references the paint worklet.

Now for a twist. We can animate the values of registered custom properties in CSS. As the values change, the paint worklet using them will be called upon to repaint with the updated values.

Let’s animate —dot-fade-offset and —dot-color via a keyframes animation (transition would work, too).

Hover/tap the demo below to see the animation in action.

The potential here is really exciting! We can use paint worklets with custom properties to create completely new types of animation.

Pros and Cons

Let’s review some of the good things about Houdini (and the CSS Paint API in particular).

  • Gives you the freedom to create your own visual effects.
  • Doesn’t rely on adding extra elements or pseudo-elements to the DOM.
  • Executes as part of your browsers rendering pipeline for greater efficiency.
  • More efficient and less buggy than polyfills.
  • Provides an alternative to using complex/hacky CSS to achieve certain results.
  • Serves as a method of abstraction and modularization by containing visual logic within a paint worklet.
  • Lets you create completely new types of animation.
  • Solves future browser support issues by allowing developers to use new features before browsers implement them.
  • All five major browser vendors intend to support Houdini.

Of course, there are shortcomings as well.

  • Large pieces of Houdini are still in development.
  • Houdini itself requires good browser support before it can start alleviating future browser support issues.
  • Browsers have to load a paint worklet file before being able to use it, which can cause style pop-in.
  • Current dev tools do not support setting breakpoints or using the debugger statement in a paint worklet (although you can still use console.log() ).

Conclusion

Houdini has the potential to radically change how we approach CSS. It’s still a work in progress, but even just the few working parts we have so far are incredibly interesting. Keep an eye on Houdini.

All the demos from this article are available in this GitHub repo. For more demos, check out this awesome collection by @iamvdo.

Thanks for reading!

Hey, you reached the end!

Feel free to check out my other blog posts or subscribe to my RSS feed. You can also click a tag below to see related blog posts.

Закруглённые углы (свойство border-radius) | CSS

Генератор border-radius CSS

Как сделать закругленные углы CSS

Использование свойства CSS border-radius (w3.org) позволяет закруглить углы элемента HTML даже без применения свойства border. Оно действует и на background, и на box-shadow. Но не на outline и border-image.

background box-shadow outline [решение] border-image [решение]

Круглые углы у картинки

border-radius легко справится и с этой задачей, достаточно его добавить к HTML коду изображения.

Закруглить края у видео на YouTube

HTML таблица с закругленными углами

Закруглить таблицу можно, но с border-collapse: separate;

1 2 3
1.1 2.1 3.1
1.2 2.2 3.2

border-radius у вложенных элементов

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

CSS скругление углов у border-image

Чтобы сделать скругленные углы у border-image можно применить родительский блок. Вернее два родительских блока, один из которых округляет внешние края рамки, а другой — внутренние.

Округление outline

Firefox поддерживает -moz-outline-radius. Но пока его нет в w3.org, outline почти полноценно заменяется box-shadow (см. образец).

Закругление углов в примерах

HTML овал

HTML круг

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

HTML цилиндр

Закругленные три края, HTML капля

HTML полукруг

HTML лист

HTML яйцо

Камушек HTML

29 комментариев:

Tanka Спасибо! Очень интересно =) витько Польза.
Приятный сайт,полезная статья Анонимный Спасибо большое! Давно искала такой материал. Супер сайт. Наталка Михайлівна Зуб Я как всегда ничего не поняла (ну далекая я от всего этого). Скажите пожалуйста, можно ли в моем шаблоне(путешествие) сделать закругленные углы, чтобы было как в шаблоне Венецианское окно (вариант 2).Там еще на главной странице каждое сообщение отделено один от одного, а у меня идет одним потоком и где заканчивается одно сообщение и начинается второе можно узнать только по дате.
Мой блог http://revival2012nataliz.blogspot.com/ NMitra Посмотрите эту страницу http://shpargalkablog.ru/2010/12/pomenyat-fon-gadzhetov-blogger.html Наталка Михайлівна Зуб Спасибо большое!С закругленными углами для гаджетов не получилось, так как тяжело потом подобрать цвет фона под блог и встроенные гаджеты не очень(погодный информер глобус и т.д.)Но главное что получилось с сообщениями.Еще раз спасибо за помощь!Я часто пользуюсь Вашей помощью и Ваш блог мне очень помогает! Сергей А этот код поддерживается во всех браузерах? Хочу сделать округлые пункты меню http://antiloh.net в шапке сайта. Сергей В IE не работает, не критично — для информации NMitra Последние версии IE поддерживают это свойство. См http://caniuse.com/#search=border-radius Космо Мизраил «Чтобы сделать круг, нужно использовать квадрат.»
Мой мозг х) Наталья, может, стоит написать «использовать блок квадратной формы»? 🙂 NMitra Ха-ха-ха.. Подправила. Евгений Курочкин Отличная статья!
Для скругления в IE 6-8 есть доп коды — http://css3pie.com/, например. Не пренебрегайте IE, так как много пользователей работают именно с ним. NMitra На мой взгляд, увидит человек скруглённые уголки или нет не сильно повлияет на работоспособность сайта. Поэтому именно в этом случае можно пренебречь поздними версиями IE. Гораздо хуже, если человек не сможет воспользоваться формой заказа, потому что использован document.querySelector.

Вот позиция Гугл мне нравится: наплевали они на всех, кто ранние версии браузеров используют. Хочешь красивого вида сайта — нажми кнопку «Обновить». Анонимный Мне понравилась фига — фавикон сайта =) NMitra Мне тоже)) Жаль, что её некоторые путают с другой частью тела. Родион Спасибо огромное! NMitra Пожалуйста! Анна Сычева Спасибо огромное! нашла то, что искала, и даже лучше! рамка из тени — это просто праздник 🙂 NMitra Рада слышать! Анонимный бабки давай сюда! Fedor Timofeev Как сделать что бы стили не конфликтовали?
Не работает стиль
/*Круглые углы у таблицы */
div.radius <
border-radius: 15px;
background: #e7d5c0;
>
/*Круглые углы у таблицы конец */

Если ставлю стиль
img.grayscale <
width: 200px;
height: 200px;
border-radius: 50%;
для другого див NMitra Пример на https://jsfiddle.net/ выложите и его ссылку дайте в комментариях, а лучше свою страницу. Можете сами попробовать разобраться в селекторах. Приоритетный тот, что длиннее http://shpargalkablog.ru/2011/08/kak-ispolzovat-css.html
Вам что нужно: 15px или 50%? Fedor Timofeev Здравствуйте.
мне нужны и 15px и 50%? так как используются в абсолютно разных случаях.
Может из как то переименовать?

ссылка на страницу, где применяются оба класса: http://ex-hort.ru/

CSS: /*обесцвечивание круглой картинки */

img.grayscale <
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
-moz-transition: all 1s ease;
-webkit-transition: all 1s ease;
transition: all 1s ease;
cursor: pointer;
>
img.grayscale:hover <
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
filter: grayscale(0%);
filter:none;
>
.grayscale.grayscale-replaced > svg <
transition: opacity 1s ease;
opacity: 1;
>
.grayscale.grayscale-replaced.grayscale-fade:hover > svg <
opacity: 0;
>
img.grayscale <
width: 200px;
height: 200px;
border-radius: 50%;
>

/*обесцвечивание круглой картинки конец */

CSS: /*Круглые углы у таблицы */
div.radius <
border-radius: 15px;
background: #e7d5c0;
>
/*Круглые углы у таблицы конец */
Fedor Timofeev что все дивы куда то подевались. NMitra Здравствуйте, код в комментариях через http://shpargalkablog.ru/2010/12/napisat-kod-tekstom.html пропустите. И всё же я не поняла что не так. Как могут конфликтовать стили, если они привязаны к разным тегам? Расскажите, пожалуйста, на словах, например, так «Картинка с нарисованным попугаем должна быть закруглена на 15px, а она на 50%». Fedor Timofeev Так, ладно, на пальцах.
До того как в CSS вставил /*обесцвечивание круглой картинки */

img.grayscale <
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
-moz-transition: all 1s ease;
-webkit-transition: all 1s ease;
transition: all 1s ease;
cursor: pointer;
>
img.grayscale:hover <
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
filter: grayscale(0%);
filter:none;
>
.grayscale.grayscale-replaced > svg <
transition: opacity 1s ease;
opacity: 1;
>
.grayscale.grayscale-replaced.grayscale-fade:hover > svg <
opacity: 0;
>
img.grayscale <
width: 200px;
height: 200px;
border-radius: 50%;
>

ВОТ ЭТОТ СТИЛЬ, который ниже, РАБОТАЛ
CSS: /*Круглые углы у таблицы */
div.radius <
border-radius: 15px;
background: #e7d5c0;
>
/*Круглые углы у таблицы конец */
НО ПОСЛЕ ПОЯВЛЕНИЯ В CSS /*обесцвечивание круглой картинки */

Стиль border-radius: 15px; тупо не работает. NMitra Проверяйте ошибки в CSS. Я, например, увидела «яЛП»

img.grayscale <
width: 200px;
height: 200px;
border-radius: 50%;
>яЛП Fedor Timofeev Спасибо большое за содействие но проблема решилась и Ваша помощь тоже была очень нужна.
Здесь мне всё помогли:
http://goo.gl/BRNaui
С удовольствием размещу ссылку на Ваш ресурс без rel=»nofollow» на своем сайте без всяких условий с моей стороны.
Укажите как Вы хотите видеть свою ссылку.
На почту [email protected]

NMitra А я увидела в исходном коде не точку, а «яЛП»

По поводу ссылки: с каким пожелаете анкором, на какую захотите страницу. Всегда считала, что естественную ссылку может поставить только автор веб-проекта. А на «Шпаргалку блоггера» ведут в основном такие.

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