Властивість clip-path можна застосовувати до всіх елементів HTML, а також графічним елементам SVG і елементам-контейнерів SVG. Воно дозволяє "обрізати" елемент практично будь-якої форми. Це може бути відсікання прямокутної форми, у вигляді кола або овалу, а також фігура довільної форми - багато-багато-багатокутник.
Про всі ці можливості написано безліч статей, тому на них зупинятися не будемо. У цій статті розглянемо дещо інше застосування властивості clip-path
У багатьох випадках Версько, при наведенні на картинку відбувається якась трансформація - зрушення, переміщення, обертання-кручення і багато іншого. Але у всіх цих випадках зображення трансформується в цілому вигляді, тобто картинка, скажімо, з'їжджає вліво цілком, а не якась його частина, відкриваючи при цьому нову інформацію.
У цій статті ми будемо "рвати" картинку на 2 частини, причому лінію розриву можемо вибирати різної форми. Все починається з HTML-коду. Через тег figure прописуємо 2 однакові картинки, кожну з них будемо обрізати за своїми параметрами і 2 SVG - прямокутника, які за рахунок width = "0" height = "0" невидимі. Кожній SVG-зображення задаємо свій ідентифікатор.
У таблиці стилів прописуємо необхідні параметри.
На цьому можна було і закінчити, якби не одне АЛЕ.
На прикладі 1, коли "лінія розділу" проходить практично по лінії горизонту і тому "втрачається" в строкатості фарб. Але варто "лінію розділу" зрушити трохи вище або нижче побачимо перфоровану лінію (складається з безлічі "дірочок", через які проглядається зображення, яке відкривається при наведенні). Це добре проглядається на прикладах 2 і 3, якщо їх ставити за тією ж схемою, що і приклад 1.
Для того, щоб позбутися від цієї проблеми додамо ще одне зображення між уже заданими, яке приховає "перфорацію"
При наведенні ця картинка буде "пропадати" до моменту початку трансформації і "з'являтися" після повного "змикання" лінії розриву.
Нижченаведені 3 різних прикладу - перемикайте, наводите курсор, дивіться результат. При бажанні є можливість скачати і розібратися більш детально.
Приклад 1 Приклад 2 Приклад 3 Завантажити
Вулкан не дрімає
0 50%, 100% 50%, 100% 100%, 0 100%
Індонезія. Острів Ява.
