Css masking

У комп'ютерній графіці зазвичай використовуються дві операції clipping і masking. Обидві операції приховують візуальні частини елемента. Якщо Ви працювали з SVG або HTML5 Canvas. ці операції певно не нові для Вас.

Сlipping (відсікання) визначає область елемента, яка є видимою. Все навколо цієї області не відсікається.

masking (маскування) - комбінується з елементом області, зачіпаючи алфа-канал цього елемента. Частини приховані під маскою елемента, повністю або частково прозорі. Нові специфікації CSS masking спрямовані для впровадження цих двох операцій в світ HTML.

Clip в CSS 2.1

CSS 2.1 давно вже визначив властивість clip. Але, у цієї властивості є обмеження, воно застосовується лише до елементів з абсолютною позицією (position: absolute;). Ось як це виглядає:

У SVG теж властивість clip обмежена певними елементами. Це одна з причин, чому в специфікацію SVG додали властивість clip-path.

Властивість clip-path

clip-path може бути застосовано до всіх елементів HTML, SVG графічних елементів і SVG елементів контейнера. Він може бути елементом посилання або однією з основних форм в CSS Exclusions.

елемент розуміє SVG і використовує його для поділу області. Графічними елементами в SVG є . . . . . і дивіться статтю Керівництво по HTML5 SVG. А також дозволяє об'єднати кілька графічних елементів. Використовувати форму для відсікання області. У наступному прикладі показано використання .

Елементарні форми не вимагають ніякої розмітки SVG. Вони були додані в clip-path. для того щоб ми могли використовувати прості функції відсікання.

• rectangle ( . . . . . ) Визначає прямокутник, додає два додаткові параметри радіуса для rounded rects.
• circle ( . . ) Визначає простий коло з центральною точкою і радіусом.
• ellipse ( . . . ) Визначає еліпс з центральною точкою, горизонтальний і вертикальний радіус.
• polygon ( . . ..., ) Визначає багатокутник від переданого списку точок.

Розмітка CSS може виглядати наступним чином:

Відсікання може стане в нагоді для відображення вмісту контента. У наступному прикладі до зображення, застосовані різні операції відсікання.

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

можуть бути анімовані. Наступний приклад має (звездообразную) форму.

Наведіть курсор на зображення

Ось вихідний код для анімації елементарної форми:

Друга операція після відсікання це Masking (маскування). Mask (маска) для зображення використовує щось на зразок (різнобарвною сітки), фільтрує видимі частини елемента. Далі я поясню різницю між, маски яскравості і альфа-маскою. Хто добре знайомий з програмою фотошоп, знають що це таке.

маска яскравості

Все просто. Маски яскравості зручний спосіб виділення конкретних тонів в зображенні. Чим світліше частина зображення, тим більше приховано елементів під маскою. Наприклад чорний буде повністю прозорий, білий вказує повністю непрозорий, і сірий тон вказує часткову прозорість елемента зображення.

Альфа-маска

Альфа-маска використовує той же самий принцип як і маска яскравості. Різниця в тому: чим менше непрозора частина зображення маски, тим менше видимий елемент буде на тому місці.

Зображення нижче - результат обох операцій маски, описаних вище.

властивості mask

Властивість mask комбінує masking зображення з посиланням на mask наступним чином.

Перший спосіб полягає у використанні mask-image. mask-repeat. mask-position. mask-clip. mask-origin і mask-size властивості, які визначені подібні їх зустрічної частини background з background-image. Як і для фонового зображення, можна визначити кілька джерел маски.

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

Якщо джерело маски повинен бути за розміром змісту, просто використовуйте узагальнююче властивість mask. так, як якщо б ви, робили це для background.

Другий спосіб посилання елемента . визначений SVG 1.1. елемент приймає будь-які графічні елементи, а також групуються елементи з SVG і використовує їх, щоб створити зображення маски.

Властивості mask-box-image

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

Зображення маски з mask-box-image

підтримка браузерів

Всі браузери підтримують clip. mask і clip-path. як зазначено в SVG 1.1 для SVG елементів. Але тільки один браузер дозволяє застосовувати властивості елементів HTML: Firefox (на кшталт). Давайте розглянемо більш докладно.

clip-path і властивості mask з посиланням на і елементи працюють в Firefox, обидва властивості є unprefixed. З іншого боку, mask-image. mask-box-image і пов'язаних властивостей з ними не підтримуються взагалі. Елементарні форми для відсікання не підтримується.

Браузери на основі WebKit, як, наприклад, Safari і Chrome, мають підтримку mask-image. mask-box-image зображень і відповідних властивостей. Всіх їх, можна застосувати до елементів HTML, так само обидва браузера вже підтримують префікс -webkit-clip-path для елементарних форм і посилань .

Якщо ви хочете спробувати clip і mask. переконайтеся, що ви використовуєте префікс і властивості unprefixed. На даний момент властивості unprefixed повинні використовувати посилання або .

висновок

Будьте обережні використовуючи і в своїх проектах, багато браузери цих фільтрів не розуміють, або відображають не зрозуміло як! Навіть, всіма нами відомий і (улюблений) браузер IE10