Робота маска магії з Гудіні

Sep 12, 2025

Як

An image showing the outlines of a circle, square and triangle used as CSS masks for images of a seascape.

Якщо ви зацікавлені в дізнатись більше про Houdini, переконайтеся, що ви відвідуєте Generate New York (24-25 квітня). На конференції ви можете зловити SAM RICHARD, інженер-партнером підприємства в Google, обговорюючи, як Houdini значно покращить гнучкість, потужність, продуктивність та підтримку конструктивних моделей. Щоб забронювати квиток на цю нагороду Конференцію для веб-дизайнерів, візит generateconf.com .

Як розробники, ми іноді приймаємо CSS для належного. Змінюючи пару властивостей, ми можемо змінити вигляд цілого веб-сайту. Відновлювачі браузера роблять багато роботи з нашого імені, щоб дістатися до цього моменту.

Але як з'являються нові функції CSS, це може бути деякий час, поки ми не отримаємо їх для виробничих сайтів. Користувачі з старими браузерами будуть застрягли з зниженим, поступово розширеним набором стилів, які не виглядають так добре, як у сучасних браузерах.

Приклади анімації Cool CSS для відтворення

Гудіні встановлюється, щоб змінити все це. Це збірка проектів специфікацій, що дає розробникам доступ до деяких позаду-сцену магії, наданої CSS. Як тільки всі специфікації є повними, розробники зможуть використовувати JavaScript для визначення того, як виконуються такі аспекти, як розрахунки макета та стилів.

Що таке Худіні?

Houdini - це колекція API та специфікацій, призначених для зменшення тертя між JavaScript та CSS. Викриваючи деякі з магії, які браузери виконують розробникам, ми можемо зробити коригування на сторінку, яка найкраще працює для нашого конкретного використання.

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

Хоча деякі з цих API все ще перебувають на своїх ранніх стадіях, деякі з них тепер приземлилися як хром, так і в опері, як з V66 та V53 відповідно. API CSS Paint дозволяє розробникам створювати зображення в JavaScript для використання, де, як правило, буде використовуватися в CSS, тоді як модель Typed об'єкт CSS викриває об'єкти CSS до вашого JavaScript, а не просто струн. Підтримка в сафарі для цих API наразі розробляється, ще кілька API на шляху до різних API Chrome та Houdini працюють через процес специфікації W3C, з процесом специфікації W3C, причому фарбувальний API, який вже досяг рекомендацій кандидата.

Проект API постійно змінюються, а присутні на даний момент не можуть нагадувати, що зрештою приземляється в браузерах. Стежити за ishoudinireadyyet.com залишатися попереду останніх покращень.

Хочете щось простіше? Спробуйте Веб-будівельник . Будь-який шлях, хоча, ваш веб хостинг Сервіс повинен працювати для вас.

Використовуйте Houdini, щоб відновити маски зображень

На даний момент, навіть просто API CSS Houdini здатний досягти великої справи. Наприклад, ми можемо поєднати його з маскою зображень, щоб змінити елементи на вимогу.

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

01. Застосувати маскування CSS

An image showing three images of seascapes, awaiting the application of a CSS mask. — Зображення до маски CSS застосовується

Перш ніж почати створювати робочу роботу, встановіть місцевий сервер. Тоді нам потрібно встановити маску на кожному зображенні. Хоча необхідна властивість CSS маска-зображення , він все ще префіксувати хром. Це означає, що ми також потребуємо Webkit префікс поруч з ним.

Відчини Стилі / mask.css і оновіть стилі для маскуючий клас. Частина ефекту полягає в тому, щоб повністю розкрити зображення, коли користувач надходить над ним. Додати розкривати спеціальна властивість елемента в цьому екземплярі.

. Masked {
  [...]
  -Webkit-Mask-Image: Фарба (маска);
  Маска-зображення: фарба (маска);
}
. Маски: Наведіть курсор,. Маски: фокус {
  - Розкрити: Справжнє;
}

02. Нанесіть маску форми нерухомості

Спеціальні властивості не повинні бути на кореневому елементі, щоб підбирати API. Вони можуть бути застосовані до елемента, що пофарбовано, що буде перевизначити будь-які селектори з нижчою специфікою.

Тепер ми збираємося застосувати особливий маска-форма спеціальна властивість до трьох класів форми. Це розповідає робочу роботу, яка форма надає.

. Masked.square {
  - маска-форма: квадрат;
}
. masked.circle {
  - маска-форма: коло;
}
. masked.triangle {
  - маска-форма: трикутник;
}

03. Визначте, яка форма використовувати

відчинено Сценарії / mask.js . Це вже було заповнено з деякою з логіки для створення фігур. Ми все ще повинні зв'язати його разом з класами, які ми просто написали.

Точний маска-форма Спеціальна властивість визначає форму, яка буде використовуватися. У нас є коло, квадрат або трикутник, щоб вибрати. Якщо хтось вибирає іншу форму або відсутність форми, за замовчуванням до форми кола. Обрізати будь-які пробіли, що залишилися від форматування CSS.

 Нехай форма = "коло";
якщо (властивості .get ('- маска-форма') & amp; & amp;
  ["Квадрат", "трикутник", "коло"]
  . включення (властивості .get (
  '--Mask-shape'). Tostring (). Trim ())) {
  форма = властивості .get (
  '--Mask-shape'). Tostring (). Trim (); }

04. Вирішіть, чи розкривати

За замовчуванням маски забезпечують контур визначеної форми. Коли користувач надходить над ними, розкривати Спеціальне майно стає істинним, тому слід заповнити форму.

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

 Нехай показати = false;
якщо (властивості .get ('- mask-seleaf') & amp; & amp;
  verlowns.get ('- mask-shell')
  .tostring (). trim () == "true") {
  виявити = правда; }

05. Знайдіть найменшу довжину

Нарешті, ми хочемо, щоб форми мали сторони рівної довжини. Це означає, що нам потрібно знайти найменшу з ширини або висоти зображення та використовувати цю довжину для розрахунку фігур.

Визначити манок Змінна, щоб розповісти решту коду, який розмір зробити фігури. Встановіть ширину лінії контексту до частки цього розміру, щоб зберегти речі до масштабу.

 Const MaxLength =
  Math.min (geom.width, geom.height);
ctx.linewidth = maxLength / 25;

Ця стаття була опублікована в журналі Creative Web-дизайну Веб-дизайнер . Підписатися на веб-дизайнер .

Хочете забрати більше трюків Houdini?

An image of generate New York speaker Sam Richard, promoting his talk 'Design System Magic with Houdini'. Generate New York runs from April 24 - 25. — Генерація, нагорода конференції для веб-дизайнерів, повертається до NYC 24-25 квітня! Натисніть зображення, щоб забронювати квитки

Зацікавлені в вивченні більше про те, як Houdini може додати більше Oomph до ваших конструкцій? Sam Richard, Enterprise Partner Engineer у Google надасть свою систему дизайну розмови з Houdini на Generate New York 25 квітня, в якому він навчить вас, як це може допомогти вам вирішити загальні проблеми дизайну та значно покращити гнучкість, владу, продуктивність та підтримка цих моделей.

Генерувати Нью-Йорк працює з 24-25 квітня - Отримайте квитки зараз !

Пов'язані статті:

генерувати Нью-Йорк повернувся на 2019 рік
14 кращих JavaScript Apis
10 нових веб-дизайну для квітня 2019 року

Робота маска магії з Гудіні

Що таке Худіні?

Використовуйте Houdini, щоб відновити маски зображень

01. Застосувати маскування CSS

02. Нанесіть маску форми нерухомості

03. Визначте, яка форма використовувати

04. Вирішіть, чи розкривати

05. Знайдіть найменшу довжину

Хочете забрати більше трюків Houdini?

Як - Найпопулярніші статті

Як намалювати кішку

10 Правила для створення зручних веб-форм

Що таке лінія термінатора?

Як малювати барвисте зомбі

Поради щодо дизайну концепції для художників

Фарба на 3D-сітку з Polypaint Tool Zbrushcore

Розмалюйте виразний натюрморт у акрилах

Як досягти кращого освітлення з V-Ray

Категорії