15 примеров CSS background-clip
Коллекция бесплатных CSS background-clip примеров кода из Codepen и других ресурсов.
- CSS background-blend-mode Примеры
- Примеры фонового фильтра CSS
О коде
Анимация подчеркивания клипа при наведении курсора
Причудливое анимированное подчеркивание с использованием обрезки текста. В тексте используется фоновый клип : текст и linear-gradient фон должен быть двухцветным. Мы обходим анимацию градиента, вместо этого анимируя background-position . Мы должны использовать элемент-оболочку для выделения подчеркивания под текстом, поскольку цвет текста уже является фоном!
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: —
О коде
Эффекты заливки текста при наведении
Эффекты заливки текста при наведении с помощью CSS background-clip .
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Заполнение меню при наведении текста
цвет + фон-клип = круто.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: —
О коде
Текст фонового клипа
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
CSS-фигуры, столбцы и отсечение
Эксперимент с столбцами CSS , CSS Shapes, clip-path и фоновый клип .
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Анимация полосатого текста
Анимация полосатого текста с background-clip и градиентами.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: —
О коде
Оверлеи CSS Oceanic
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Визуализация
background-clip В этом примере показано, как свойство background-clip CSS можно использовать для определения того, как фон элемента применяется в поле элемента.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
фоновый клип МенюСовместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: —
О коде
Эффект маски
Эффект наведения маски.
Совместимые браузеры: Chrome, Edge, Opera, Safari
Ответ: да
Зависимости: —
О коде
Игра с
background-clip: text и переменным text-fill-color Values Просто играю с background-clip: text .
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Клип с фиксированным фоном
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
background-clip:text Эффект CSSСовместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: —
О коде
Шаблон тени анимированного текста
Использует background-clip: text и linear-gradient для имитации полосатой тени текста.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: —
С код
Цеппелин
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: —
Эксперименты с текстом и фоновым клипом CSS — Adrian Roselli
Обновлено , первоначально опубликовано ; 0 комментариевПеремещение и мигание Предупреждение: Каждый из примеров в этом посте имеет анимацию. Непрерывная анимация учитывает настройки вашей системы, чтобы уменьшить анимацию. Вы также можете скрыть визуализированный HTML-код во встроенных CodePens, нажав элемент управления «Результат».
Свойство CSS background-clip определяет, насколько фон простирается под блоком. Редакторский черновик расширяет его, позволяя обрезать фон текстом. Поддержка обрезки текста в целом хорошая. Firefox поддерживает предложенный синтаксис, а браузеры WebKit/Chromium поддерживают версию с префиксом.
Поскольку вы можете стилизовать текст непосредственно с помощью фона, это избавляет от необходимости использовать SVG для каждой буквы или использовать некоторые трюки с дублированным текстом, чтобы создавать заголовки, которые больше, чем сплошные цвета.
Вы также можете анимировать фоны, которые вы применяете, как я делаю в этом ужасном примере Knight Rider :
См. перо KITT Адриана Роселли (@aardrian) на КодПене.
Используйте анимацию в паре или используйте тонкие эффекты, основанные на взаимодействии, для создания отличных эффектов. Этот блок текста подсвечивается, когда вы наводите на него курсор, фокусируетесь или касаетесь его:
Потенциально гораздо более раздражающим является то, что вы можете использовать эти методы для создания эффекта печатаемого текста:
См.
перо
CSS Typed Text от Adrian Roselli (@aardrian)
на КодПене.
Этот подход имеет несколько ключевых преимуществ по крайней мере перед одним другим: он не полагается на последнюю поддержку Safari Technology Preview для анимации контента
Самый большой недостаток в том, что мой пример не работает с переносом текста. Я отказался от этого, так как уже потратил достаточно времени на этот эксперимент.
Мой пример работает в VoiceOver (macOS, iPadOS, iOS), TalkBack, JAWS, NVDA и Экранном дикторе, не дожидаясь отображения всего текста. Он также учитывает настройки уменьшения движения (хотя он отключает только мигающий курсор и фоновое дрожание ЭЛТ). Также реализована поддержка WCAG 2.1 Success Criterion 1.4.12 Text Spacing (попробуйте с букмарклетом).
В отличие от других, я не делаю необоснованных заявлений о том, что этот пример доступен.
Я говорю, что он работает во всех браузерах, работает в программах для чтения с экрана и проходит WCAG 2.1. Если вам не нужен текст для переноса (или настроить его для поддержки переноса текста), то это может пригодиться вам в качестве основы для ваших собственных экспериментов.
По сути, каждая буква показана путем расширения фонового градиента на один жесткий шаг за раз. Курсор (который не мигает в Safari, потому что Safari не анимирует :root , чтобы текст отображался янтарным цветом.
Вы должны сделать столько ключевых кадров, сколько букв, поэтому вы можете написать дерзкую путаницу или что-то еще, что дети делают, чтобы прокрутить логику CSS и сгенерировать эти ключевые кадры для вас. Я написал это, чтобы показать хороший пользовательский опыт, а не обязательно хороший опыт разработчиков.
Однако вы используете background-clip , по крайней мере, убедитесь, что он максимально доступен.
