• Главная
  • Карта сайта
Не найдено

CSS Masking - HTML5 Rocks

  1. Отсечение в CSS 2.1
  2. Свойство clip-path
  3. Анимация клипа
  4. маскировка
  5. Маска яркости
  6. Альфа маска
  7. Свойство маски
  8. Свойство mask-border
  9. Поддержка браузера
  10. Подтверждение

В компьютерной графике обычно используются две операции: вырезание и маскирование. Обе операции скрывают визуальные части элемента. Если вы работали с SVG или HTML Canvas раньше, эти операции, вероятно, не новы для вас. Отсечение определяет область видимого элемента. Все вокруг этого региона не отображается - оно «обрезается». При маскировании изображение маски комбинируется с элементом, влияющим на альфа-канал этого элемента. Части маскированного элемента становятся полностью или частично прозрачными. Новый CSS Masking спецификация направлена ​​на то, чтобы перенести эти две операции в мир HTML.

Отсечение в CSS 2.1

CSS 2.1 уже указано свойство клипа. Это свойство ограничено прямоугольным отсечением с помощью функции rect (), принимающей четыре аргумента расстояния для верхнего, правого, нижнего и левого краев. Раздражающая часть: свойство clip применяется исключительно к абсолютно позиционированным элементам. Свойство просто игнорируется для других элементов.

CSS:

img {position: absolute; клип: прямоугольник (10 пикселей, 290 пикселей, 190 пикселей, 10 пикселей); }

HTML:

<img src = "image.jpg" width = "568">

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

Свойство clip-path

Свойство clip-path можно применять ко всем элементам HTML, графическим элементам SVG и элементам контейнера SVG. Он либо ссылается на элемент <clipPath>, либо на одну из базовых фигур, представленных в CSS исключения ,

Элемент <clipPath> берет любой графический элемент из SVG и использует их в качестве области отсечения. Графическими элементами в SVG являются <rect>, <circle>, <ellipse>, <path>, <polygon>, <image> и <text>. <clipPath> также позволяет комбинировать несколько графических элементов. Объединение всех форм затем используется в качестве области отсечения. В следующем примере демонстрируется использование <clipPath>:

CSS:

img {clip-path: url (#clipping); }

HTML:

<svg> <defs> <clipPath id = "clipping"> <circle cx = "284" cy = "213" r = "213" /> </ clipPath> </ defs> </ svg> <img src = " image.jpg "width =" 568 ">

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

  • inset (&lt;top> <right> <bottom> <left> [round <border-radius>]?) определяет прямоугольник, аналогичный функции rect () клипа. Параметры описывают смещения сверху, справа, снизу и слева. Функция также имеет необязательные параметры радиуса с синтаксисом граница радиуса собственность для округлые ректы ,
  • circle (&lt;r>? [at <position>]?) определяет простой круг с необязательным параметром радиуса. Кроме того, необязательный параметр положения описывает центральную точку круга. <position> имеет тот же синтаксис, что и фон положение свойство.
  • эллипс (&lt;rx> <ry>? [at <position>]?) определяет эллипс с горизонтальным и необязательным вертикальным радиусом, а также центральную точку на основе фон положение Синтаксис свойства.
  • многоугольник (<x1> <y1>, <x2> <y2>, ..., <xn> <yn>) определяет многоугольник на основе параметров списка точек.

Ключевые слова, такие как content-box, border-box, margin-box, могут использоваться в сочетании с базовыми формами для позиционирования и определения размера указанного пути отсечения. Определяемые без базовых форм, ключевые слова сами действуют как обтравочный контур с учетом свойства border-radius.

Разметка CSS может выглядеть следующим образом:

img {clip-path: polygon (0px 208px, 146.5px 207px, 147px 141.2px, ...); }

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

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

  • Элемент списка 1
  • Элемент списка 2
  • Элемент списка 3
  • Элемент списка 4
  • Элемент списка 5
  • Элемент списка 6
  • Элемент списка 7
  • Элемент списка 8
  • Элемент списка 9

Прокрутите список, чтобы увидеть эффект.

Обратите внимание, что clip-path (так же как clip) обрезает любой аспект элемента, включая фоны, границы и любой механизм прокрутки.

Анимация клипа

Базовые фигуры и содержимое элемента <mask> можно анимировать. Следующий пример имеет анимацию в форме звезды:

Вот исходный код для анимации базовой фигуры:

img: hover {clip-path: polygon (0px 208px, 146.5px 207px, 147px 141.2px, ...); анимация: звезда 3с; } @keyframes star {0% {clip-path: polygon (0px 208px, 146.5px 207px, 147px 141.2px, ...); }, 100% {clip-path: polygon (0px 208px, 146.5px 207px, 147px 141.2px, ...); }}

маскировка

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

Маска яркости

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

Альфа маска

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

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

Спецификация CSS Masking определяет два сокращенных свойства для маскировки: mask и mask-border.

Свойство маски

Свойство mask объединяет маскирование изображения со ссылкой на маску следующим образом.

Первый способ - использование свойств mask-image, mask-repeat, mask-position, mask-clip, mask-origin и mask-size, которые задаются аналогично фону контраргумента с background-image. Как и для background-image, можно определить несколько источников маски. Каждый источник маски представляет собой изображение, определяемое CSS3 изображения , Все источники маски будут объединены в одно изображение маски. Это изображение маски используется для маскировки элемента и его содержимого, как описано выше. Возможные значения изображения - любой формат растрированного изображения, такой как JPG или PNG, графика SVG, или предварительно определенные значения изображения, такие как градиенты CSS.

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

img {mask-image: url (mask.svg); }

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

img {mask: url (mask.svg) вверху слева / обложка; }

Второй способ ссылается на элемент <mask>, как определено SVG 1.1 , Элемент <mask> берет любой графический элемент, а также группирует элементы из SVG и использует их для создания изображения маски.

CSS:

img {mask: url (#masking); }

HTML:

<svg> <defs> <linearGradient id = "градиент" x1 = "0" y1 = "00%" x2 = "0" y2 = "100%"> <stop stop-color = "black" offset = "0" /> <stop stop-color = "white" offset = "1" /> </ linearGradient> <mask id = "masking" maskUnits = "objectBoundingBox" maskContentUnits = "objectBoundingBox"> <rect y = "0.3" width = " 1 "height =". 7 "fill =" url (#gradient) "/> <circle cx =". 5 "cy =". 5 "r =". 35 "fill =" white "/> </ mask> </ defs> </ svg> <img src = "image.jpg" width = "568">

Который будет выглядеть следующим образом:

Свойство mask-border

Свойство mask-border позволяет разделить изображение маски на 9 плиток: четыре угла, четыре ребра и средний кусок. Эти кусочки могут быть нарезаны, масштабированы и растянуты различными способами, чтобы соответствовать размеру области изображения маски. Свойство заимствует функциональность у border-image и позволяет мощно маскировать края и углы содержимого. В следующем примере демонстрируется поведение свойства:

img {-webkit-mask-box-image: url ("stamp.svg") 35 повтора; маска-рамка: url ("stamp.svg") 35 повтора; }

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

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

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

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

Все браузеры поддерживают клип, как указано. Все браузеры поддерживают маску и свойства пути клипа, как указано в SVG 1.1 на элементах SVG. Но только один браузер позволяет применять свойства к элементам HTML: Firefox (вроде). Давайте углубимся в детали.

Clip-path и свойство mask со ссылками на элементы <clipPath> и <mask> работают в Firefox "из коробки"; оба свойства без префикса. С другой стороны, mask-image, mask-border и связанные свойства вообще не поддерживаются. Основные формы для отсечения также не поддерживаются.

Браузеры на основе Blink и WebKit, такие как Chrome и Safari, имеют поддержку mask-image, mask-border (в настоящее время называется -webkit-mask-box-image в обеих реализациях) и связанных свойств. Все они имеют префикс и могут быть применены только к элементам HTML. Ночные сборки обоих браузеров уже поддерживают свойство с префиксом -webkit-clip-path с базовыми фигурами и ссылками на элементы <clipPath> в HTML. WebKit поддерживает дополнительные ключевые слова размера блока.

Если вы хотите попробовать обрезку и маскирование, убедитесь, что вы используете префиксные и нефиксированные свойства. Нефиксированные свойства должны использовать ссылку на <mask> или <clipPath> в данный момент.

<style> #image {mask: url (#mask); -webkit-mask: url (mask.svg) вверху слева / обложка; } </ style> <img id = "image" src = "coolImage.jpg" width = "400"> <svg width = "0" height = "0"> <mask id = "mask"> ... < / mask> </ svg>

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

Подтверждение

Большое спасибо Арно Гурдолу за предоставленную картину с Могила Хумаюна ,

Похожие

Как сбросить стили вашего сайта с помощью CSS Reset
Это первая часть серии статей, в которых обсуждается конкретная лучшая практика CSS или совет. Я расскажу о различных темах, которые касаются лучших практик CSS, оптимизации производительности, а также советов и рекомендаций по улучшению рабочего процесса. CSS является основой веб-страниц, поэтому важно убедиться, что он оптимизирован для SEO. Вы можете проверить SEO вашего сайта Вот , Сегодня мы рассмотрим тему сброса ваших стилей.
Акценты и специальные символы в HTML: как их написать
Как написать é, è или в HTML? Как отображать кавычки, кавычки или открывающие и закрывающие шевроны? Ответ в 2 таблицах. Стандарт HTML соблюдает кодировку символов
Обучение HTML и CSS на практике - Модуль I: прочная основа
... яркости фотографий Контролировать размер фотографий и графических элементов Разрезание проекта на элементы, необходимые для построения HTML-страницы Создание привлекательных заголовков и графических объявлений Использование Adobe Dreamweaver для редактирования кода HTML5 и каскадных стилей Использование других редакторов кода, доступных на рынке Создание шаблонов сайта Принципы создания современных сайтов
Фильм на сайте
Размещение видео на сайте кажется довольно сложным элементом. Однако на практике, благодаря использованию новых технологий, это не должно занимать более нескольких минут. Вот три самых простых способа разместить проигрыватель фильмов на сайте : 1. Использование внешних порталов Порталы как YouTube или Vimeo позволяют публиковать фильмы в интернете. Пользовательский
Языковой курс HTML: польские буквы и польская клавиатура
Чтобы писать на польском языке, используя правильную кодовую страницу, то есть ISO-8859-2, вы должны иметь правильные инструменты. Эта проблема относится к владельцам Windows, в то время как пользователям Linux не нужно ни о чем беспокоиться, когда ISO является стандартом в этой системе. Мы будем решать возможные решения в Windows по очереди. Польские редакторы HTML Лучшие польские HTML-редакторы, такие как Pajczek (Условно)
Изменить раскладку клавиатуры
Изменение раскладки клавиатуры позволяет связать последовательность клавиш с выбранным действием, чтобы ввод данной последовательности клавиш выполнял это действие. Последовательность клавиш может быть одной клавишей или одной клавишей, нажатой одновременно с клавишами Shift, Ctrl или Alt.
Основы манипуляции с DOM в ванильном JavaScript (без jQuery)
Эта статья включена в нашу антологию, Современный JavaScript , Если вы хотите, чтобы все в одном месте было в курсе современного JavaScript, зарегистрируйтесь в SitePoint Premium и загрузите себе копию. Всякий раз, когда нам нужно выполнить DOM-манипуляции, мы все
Пользовательский агент: изучите пользовательский агент вашего браузера прямо сейчас
Пользовательские агенты уникальны для каждого посетителя в сети. Они раскрывают каталог технических данных об устройстве и программном обеспечении, которое использует посетитель. Вооружившись этой информацией, вы можете создавать более богатые и динамичные веб-сайты, которые предоставляют различный опыт в зависимости от посещаемого пользовательского агента. Пользовательские агенты также играют важную роль в управлении роботами поисковых систем с помощью файла robots.txt на вашем сервере.
NOC виджет | Поддержка LogicMonitor
Виджет NOC позволяет быстро оценить состояние группы, устройства, приложения или веб-сайта. Вы можете: Выберите конкретные уровни оповещения для отображения. Включите группы устройств, устройства, источники данных, экземпляры, точки данных, веб-сайты и группы веб-сайтов. Смотрите объекты, которые функционируют в нормальных диапазонах, обозначенных зеленым. Включить пользовательскую информацию в названия предметов. Создать виджет NOC
[Бесплатно] WinX YouTube Downloader | Скачать YouTube MP4, 4K видео, MP3
БЕСПЛАТНЫЙ WinX YouTube Downloader Пакетная загрузка 1000+ URL Поддержка YouTube Playlist / Channel Запись живого видео Нет объявлений при установке Поддерживаемые ОС: Windows 10 (32 и 64 бит) и ниже - Получить трейлер, саундтрек или любой медиа материал в одно мгновение. - захват видео до 8K в качестве. YouTube SoundCloud facebook Dailymotion Metacafe
Словарь для блоггеров. Эксклюзив! - Blogoreader - украинская блогосфера и интернет
Сегодня, в день Рождества, Блогоридер хочет показать вам, уважаемые читатели, свою первую неожиданность в новом году. Зарегистрирован часто бывает так, что то или иное слово мы встречаем впервые.
Lt;top> <right> <bottom> <left> [round <border-radius>]?
Lt;r>?
At <position>]?
Lt;rx> <ry>?
At <position>]?
Как отображать кавычки, кавычки или открывающие и закрывающие шевроны?
Новости
Провайдеры:
  • 08.09.2015

    Batyevka.NET предоставляет услуги доступа к сети Интернет на территории Соломенского района г. Киева.Наша миссия —... 
    Читать полностью

  • 08.09.2015
    IPNET

    Компания IPNET — это крупнейший оператор и технологический лидер на рынке телекоммуникаций Киева. Мы предоставляем... 
    Читать полностью

  • 08.09.2015
    Boryspil.Net

    Интернет-провайдер «Boryspil.net» начал свою работу в 2008 году и на данный момент является одним из крупнейших поставщиков... 
    Читать полностью

  • 08.09.2015
    4OKNET

    Наша компания работает в сфере телекоммуникационных услуг, а именно — предоставлении доступа в сеть интернет.Уже... 
    Читать полностью

  • 08.09.2015
    Телегруп

    ДП «Телегруп-Украина» – IT-компания с 15-летним опытом работы на рынке телекоммуникационных услуг, а также официальный... 
    Читать полностью

  • 08.09.2015
    Софтлинк

    Высокая скоростьМы являемся участником Украинского центра обмена трафиком (UA — IX) с включением 10 Гбит / сек... 
    Читать полностью