Передові можливості CSS, доступні вже сьогодні

17

Від автора: Останні оновлення CSS3 відкрили для нас нові, вбудовані в браузери, можливості по зміні дизайну веб-додатків, наприклад, скруглення кутів у блоків, додавання градієнтів, кількох фонів для одного елемента і тіні. І CSS продовжує розвиватися далі. А можливості, які з’явилися в CSS зараз, вже дуже нагадують ті інструменти, якими ми звикли користуватися в улюбленому графічному редакторі.

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

Режими накладення

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

ЯК ПРАЦЮЄ РЕЖИМ НАКЛАДАННЯ

Зазвичай властивість background-blend-mode застосовують для фонового зображення на колір фону. Наприклад:

.blend {
background-image: url(‘mountains.jpg’);
background-color: #5ece7f;
background-blend-mode: multiply;
}

Коли ми визначаємо властивість background-blend-mode і вказуємо значення для накладання, то воно змішує разом фонове зображення і колір фону у відповідності з тим режимом, який ми обрали. І кольори змішуються тільки в тому випадку, якщо відбувається їх часткове збіг.

Передові можливості CSS, доступні вже сьогодні

Зліва: Вихідне зображення. Праворуч: Зображення з режимом накладення – множення.

Також як і в Photoshop, режим накладення multiply (множення) затемнює зображення шляхом множення квітів фонового зображення елемента з класом .blend з зазначеним фоновим кольором. Ви можете подивитися усі значення режимів накладення тут.

Ми можемо використовувати властивість background-blend-mode з усіма елементами HTML, навіть з canvas і video. Це властивість також чудово працює з CSS градієнтами і кількома фонами. Ось простий демо-приклад, який дозволить вам подивитися кожен з режимів в дії.

БРАУЗЕРНА ПІДТРИМКА

В даний час останні версії браузерів Chrome, Safari, Firefox і Opera підтримують властивість background-blend-mode. Слідкуйте за появою нового властивості mix-blend-mode, який відповідає за накладання одного елемента з квітами вмісту і фону елемента, що знаходиться знизу.

Насправді ми вже зараз можемо поекспериментувати з mix-blend-mode, активувавши «Експериментальні можливості веб-платформ» chrome://flags і opera://flags. І схоже, що браузер Firefox, починаючи з версії 32 і вище, буде підтримувати властивість mix-blend-mode.

Джерела режимами накладення:

Знайомство з режимами накладення в CSS

Режими накладення в CSS

Режими накладення в CSS можуть стати новим проривом у веб-дизайні

CSS маски

З новою CSS можливістю використання масок ми можемо затемнювати частини елемента шляхом накладення маски на певні області. Один з варіантів функціонування масок – це використання графіки в якості індикатора яскравості/освітленості або альфа-каналу шару-маски для відображення частин елемента.

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

Передові можливості CSS, доступні вже сьогодні

У даному зображенні-масці темні області відповідають за повну прозорість. Давайте подивимося, як працює властивість mask-image, шляхом застосування маски освітленості в якості фону для заголовків h1.

Передові можливості CSS, доступні вже сьогодні

Зліва: маска освітленості. Праворуч: Зверніть увагу, що станеться з заголовком h1 «Poly», коли ми застосуємо зображення-маску.

h1 {
mask-image: url(‘mask.png’);
mask-repeat: no-repeat;
mask-size: 1440px;
}

Коли ми застосовуємо маску до заголовка h1, ми бачимо, що вершини гір закривають — або маскують — нижні частини тексту. Виглядає досить витончено!

Передові можливості CSS, доступні вже сьогодні

Ось анімований демо-приклад, який показує текст в елементі h1, розміщений за маскою.

БРАУЗЕРНА ПІДТРИМКА

В даний час браузери на движку WebKit/Blink підтримують більшість властивостей щодо використання масок з вендорным префіксом -webkit-. Підтримка масок в IE досі перебуває «на розгляді», а Firefox підтримує тільки використання вбудованих SVG елементів-масок — ми розглянемо їх далі!

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

Схожим чином (як і альфа-маски і маски освітленості) можна використовувати і властивість clip-path, щоб описати видимі області елемента.

Властивість clip вперше було представлено в специфікації CSS 2.1 для визначення видимих ділянок елемента. Але це властивість призначалося тільки для прямокутних форм, і працювало тільки з абсолютно позиціонованими елементами. Можливо це стало причиною заміни властивості clip на властивість clip-path з новими можливостями.

ВИКОРИСТАННЯ ВЛАСТИВОСТІ CLIP-PATH

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

У наступному прикладі ми використовуємо функцію polygon(), щоб намалювати область, відображає невеликий ділянку зображення «mountains.jpg».

.wrapper {
clip-path: polygon(307px 423px,431px 204px,256px 92px,118px 226px);
background: url(‘mountains.jpg’);
}

Передові можливості CSS, доступні вже сьогодні

Схожим чином ми можемо використовувати SVG відсіченої області, використовуючи clip-path: url(). В SVG ми створюємо відсічену область за допомогою елемента clipPath. Замість визначення координат точок) багатокутника для clip-path в CSS, ми можемо зробити це, використовуючи SVG:

Потім в якості значення для clip-path ми використовуємо url() для визначення координат точок) багатокутника в елементі clipPath:

.wrapper {
clip-path: url(‘#clipPolygon’);
background: url(‘mountains.jpg’);
}

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

Функція polygon() є найскладнішою функцією для використання відтяті областей, але ми також можемо використовувати базові функції, наприклад, circle(), inset() і ellipse().

БРАУЗЕРНА ПІДТРИМКА

За останніми даними Firefox підтримує тільки синтаксис url(). У той час як останні версії Chrome, Safari і Opera підтримують і багатокутні форми і синтаксис url().

Висновок

Сьогодні ми дізналися, що застосування різних ефектів, як у програмі Photoshop, HTML вмісту з використанням простого синтаксису CSS, дає нам більше свободи і гнучкості при створенні додатків для веб. Вбудовані в браузери можливості графіки допомагають нам зменшити залежність від графічного програмного забезпечення – і це здорово!

А ви вже використовували нові можливості CSS? Поділіться своїм досвідом та враженнями в коментарях.