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 и Webflow) | by Michael J.
FordhamMichael J. Fordham
·Читать
Опубликовано в·
4 минуты чтения·
2 окт. 2, 2022Если вы чем-то похожи на меня, вы цените минимальные конструкции. Это часто будет означать, что у вас не будет одновременно отображаться много контента, много места для передышки и ограниченная цветовая палитра.
Однако иногда нужно добавить изюминку.
На мой взгляд, один из самых элегантных способов сделать это — украсить важный текст (обычно часть заголовка) градиентом или изображением.
Некоторые из лучших дизайнеров используют этот трюк, чтобы добавить изюминку в свои замечательные интерфейсы. Возьмем, к примеру, Apple, это действительно распространенный шаблон пользовательского интерфейса для них:
Как постоянный пользователь инструментов кода и инструментов без кода, я хотел поделиться тем, как вы можете добиться этого эффекта как в простом коде CSS, так и в Webflow.
Как придать тексту фоновый градиент в CSS
Нам нужно сделать пять вещей:
- Обернуть текст, на который мы хотим повлиять, тегом span (если вы не хотите, чтобы весь текст имел такой эффект )
- Присвойте тегу span класс (.
decorated-text) - Присвойте классу .decorated-text фоновый градиент
- Обрежьте фон, чтобы он отображался только на тексте
- Сделайте цвет текста прозрачным, чтобы фон виден
Вот простая кодовая ручка со всеми этими шагами:
В этот пример включены некоторые свойства webkit, которые делают эффект более согласованным в разных браузерах.
Использование фонового изображения вместо градиента в CSS
Чтобы использовать фоновое изображение вместо градиента, шаги очень похожи на описанные выше. Единственная разница в том, что мы даем классу .decorated-text URL-адрес фонового изображения, а не градиент. В этом примере мы также установили для background-size значение «cover», чтобы размер изображения соответствовал размеру текста.
Вот пример этого в действии:
Как применить фоновый градиент к тексту в Webflow
Шаги немного отличаются, если вы создаете свой веб-сайт в Webflow, а не вручную пишете CSS.
Прежде всего, вам нужно добавить текст к вашему дизайну.
Перетащите блок h2.
Затем вам нужно выбрать текст, к которому вы хотите применить фон, и выбрать опцию, чтобы обернуть его тегом span.
После этого мы переименуем тег span в «decorated-text», чтобы применить к нему стиль. Присвоение классу подходящего имени позволяет нам повторно использовать стиль в будущем.
Выбрав класс декорированного текста, мы настраиваем раздел «Фон», чтобы применить градиентный фон. Вы заметите, что фон будет применен за текстом, когда вы это сделаете.
Наконец, мы хотим установить для параметра «Обрезка» значение «Обрезать фон по тексту».
Вот и все!
Как применить фоновое изображение к тексту в Webflow
Подобно тому, как мы добавили градиент к фону текста, вместо этого вы можете использовать изображение. В разделе «Фон» удалите созданный нами линейный градиент и вместо этого выберите «Изображение».
Выберите изображение, которое хотите использовать, а затем в разделе «Размер» выберите «Обложка», чтобы изображение соответствовало тексту.
