Готуємо фахівця в області ІБ - Виховаємо фахівця в області ІБ з нуля до початкового рівня. Після навчання зможете надавати послуги з проведення тестування на проникнення (легальний хакинг)
Ймовірно, ви знайомі з використанням такої техніки Photoshop, коли в якості маски зображення виступає текст; це найкращий відомий спосіб додати текстури або навіть фон зображення на ваш текст. Далі ви можете використовувати цей текст у вигляді зображення на вашому веб-сайті; але ж було б здорово, якби ми змогли накласти такий же ефект, використовуючи HTML і CSS? Хороші новини - ми можемо!
CSS представила такі властивості як background-clip і mask-image. які ви можете використовувати для створення схожих ефектів, для яких раніше використовувався Фотошоп. Крім того, для цього ви також можете використовувати SVG.
Сьогодні ми розглянемо ці опції і навіть зробимо кілька простих анімацій. Якщо ви хочете продовжити самостійно, один на один з кодом, ви можете завантажити вихідні файли тут.
підтримка браузерами
Як і слід було очікувати, деякі з цих властивостей, які ми будемо використовувати, підтримуються не скрізь. Це означає, що вони не будуть працювати в браузерах на кшталт IE і Firefox.
Створення фонового рухомого зображення тексту за допомогою BACKGROUND-CLIP
Перша опція, яку ми розглянемо, це властивість background-clip. Це властивість визначає, чи буде фон продовжений за кордону чи ні. Воно дозволяє тексту певного елемента обрізати зображення.
Наш макет - це просто h1 з класом bgClip: