Однією з чудових особливостей викладання є те, що студенти приходять з найсвіжішими ідеями. У промисловій розробці ми, як правило, думаємо над виконанням завдання і тим самим втрачаємо нові цікаві методики.
Йшла перший тиждень проекту в нашому навчальному таборі. Односторінковий сайт, який демонструє розуміння HTML і CSS: семантичне використання розмітки і CSS для стилів. Одна з наших студенток, Хізер Бенкс. хотіла повторити ефект на Squarespace. де при наведенні на div, на ньому з'являвся зріз.
Знаючи її попередній досвід в HTML і CSS, ця задача була повністю в її компетенції, але я вирішив допомогти їй в реалізації цього ефекту. Зробити обрізку елемента меню при наведенні не просте завдання, і моїм першим інстинктом було зробити невелике зображення, що збігається з фоном, і задати його в якості фону псевдо-елементу: after. Проблема в тому, що цей спосіб не адаптивний і не передбачуваний.
Введення в властивість clip-path
Ця властивість є частиною стандарту, який знаходиться в статусі Working draft і дозволяє приховувати ділянки зображення по масці. Поки clip-path не широка підтримується всіма останніми версіями браузерів (не підтримує Firefox і IE), але відмінно працює в браузерах Webkit.
Зверніть увагу, щоб використовувати цю властивість зараз, необхідно вказувати префікс -webkit.
Працювати з цією властивістю просто, необхідно вказати набір пар X і Y. За цим значенням будується крива, і зображення обрізається по цій кривій.
Можна створити безліч різних форм з кіл, еліпсів, полігонів. Все обмежується тільки фантазією.
простий трикутник
Ефект, показаний вище досягається за допомогою одного елемента і застосованого до нього властивості clip-path.
Вау, давайте детальніше
Так само як і в позиціонуванні, ми повинні думати в координатах X і Y. Осі X: 0 і Y: 0 починаються в верхньому лівому кутку елемента. Координаті X: 100% відповідає правий край, а координат Y: 100% - лівий край елемента.
Зрозумів, відмінно. Таким способом ми створили такі точки.
Простий шлях починається з нижнього лівого кута, далі точка 50% по горизонталі на верхній межі і 100% по горизонталі на нижній межі. Три точки! Трикутник!
Все, що не потрапляє в ці межі, обрізається. Сам елемент зберігає свої розміри, змінюється тільки його відображення.
У наведеному вище прикладі, ми використовували полігон і визначили форму за допомогою набору пар x і y, розділених комами. Але ми також можемо використовувати інші форми, які беруть інші значення.
окружності
Щоб створити коло, необхідно передати три значення. Координати x і y центра кола і радіус кола. Після завдання радіусу, ми використовували ключове слово at, щоб повідомити про свої координати центру.
Найчастіше потрібна не окружність, а еліпс. Щоб визначити еліпс, необхідно задати чотири значення: радіус по осі x, радіус по осі y і відокремлені ключовим словом at координати центру x і y.
Прямокутник з округленими кутами
(Може нестабільно працювати в Google Chrome)
Можливо, ви захочете створити прямокутник з округленими кутами, а гострі кути полігонів - це не те, що потрібно. Тоді може стати в нагоді форма inset. Вона приймає чотири значення, що визначають верхню, праву, нижню і ліву межу зони і чотири параметри, що визначають радіус заокруглення, відокремлені ключовим словом radius.
Відмінні новини, є і скорочена форма запису:
Швидка довідка
- Circle: circle (radius at x-axis y-axis)
- Ellipse: ellipse (x-rad y-rad at x-axis y-axis)
- Polygon: polygon (x-axis y-axis, x-axis y-axis.)
- Inset: inset (top right bottom left round top-radius right-radius bottom-radius left-radius)
Створення довільних форм
Коло і еліпс обмежені лише кількома значеннями, в той час як полігони - це найчастіше кращий вибір для створення складних форм. Маючи можливість визначити кілька точок, ми можемо обрізати наші елементи як завгодно.
Блок тексту з коміксів
Тепер у нас є уявлення про форми і їх створенні, розглянемо, як можна їх використовувати для створення ефектів.
Ми можемо застосувати властивість при наведенні курсору миші на елемент, а використання властивості transition зробить перехід плавним, однак потрібно створити початковий стан з усіма кординат, які будуть використовуватися в формі при наведенні.
практичне використання
Оскільки підтримка clip-path обмежується зараз браузерами webkit, є серйозні обмеження його використання. У Firefox для цього є SVG маски, але плавний перехід за допомогою transition в даному випадку не завжди можливий.
Загалом, якщо ви хочете вивчити це властивість, Chrome і інші браузери на webkit, такі як Safari, прекрасно його підтримують.
Повернемося до вихідної задачі
Все почалося з того, що ми хотіли відтворити ефект в навігації на Squarespace. Розташувавши один елемент над іншим і застосувавши clip-path до елементів меню, ми відтворили ефект без всілякої заміни зображень.
Знайшли друкарську помилку? Orphus: Ctrl + Enter