Пора Вам дізнатися ще про 5-й секретних властивості CSS3. З минулої статті ви побачили що є властивості, які використовуються дуже рідко, але все ж десь їх застосувати можна і потрібно. Але в CSS3 більше ніж 5 маловідомих і рідко використовуються властивостей, сьогодні ми розглянемо ще 5. Думаю вони Вас також здивують, бо з їх допомогою можна здійснювати цікаві речі.
Минулу частину статті, де я розглянув 5 секретних властивостей CSS3 Ви можете знайти тут:
Трохи прикладів використання CSS3:
Друга частина секретних властивостей CSS3
1. Pointer Events
Почнемо ми з властивості pointer-events. Воно було введено для SVG, але потім його перенесли в специфікацію CSS4 (так, це не помилка, саме туди його і перенесли). Щоб розібратися в чому суть даного властивості уявімо таку ситуацію «один елемент на сторінці розташований поверх іншого, але ми хочемо зробити так, щоб нижній реагував на покажчик миші, тобто був клікабельним і при наведенні міняв колір». У цьому випадку необхідно використовувати дане властивість.
Але ми розглянемо більш стандартний приклад, який Ви зможете прямо зараз застосувати на власному сайті. Ситуація наступна: у нас є меню на сайті, і ми хочемо зробити щоб при активному пункті меню не був клікабельним і не міняв колір при наведенні курсору миші.
Що нам для цього потрібно?
- У кожного активного елементу меню задати клас active (як правило, в будь-якій темі WordPress, Joomla, DLE і так далі, цей клас заданий у елементів меню за замовчуванням).
- Відкрити файл стилів і додати для посилань меню a.current наступне властивість: