Как создавать и проверять CSS-градиент в интерфейсе.
Задайте направление, остановки и поверхность. Проверяйте контраст там, где сверху текст, и добавляйте сплошной запасной цвет при необходимости.
Адаптируйте процесс под свою задачу.
Опишите поверхность, направление, цветовые точки и запасной фон, затем создайте CSS. Проверяйте весь градиент за наложенным контентом и обрезку на разных экранах. Контраст текста оценивайте отдельно от красоты фона.
- Что вы предоставляете
- Цвета, направление и визуальные требования.
- Что вы получите
- Корректный CSS-градиент с изменяемыми параметрами.
Посмотрите входные данные и результат.
Иллюстративные входные и выходные данные · учебный пример, а не реальный запуск WebAct
Полей ввода: Пример
Create a left-to-right background from #fff7ed to #fed7aa, with a solid fallback.
Готовый пример
background-color: #fff7ed; background-image: linear-gradient(90deg, #fff7ed 0%, #fed7aa 100%); Check any foreground text against the full gradient, not just one endpoint.
Добавьте эти данные в промпт и скопируйте его в WebAct, чтобы попробовать задачу. Ваш результат может отличаться от примера.
Решения и устранение проблем.
Достаточно ли проверить контраст в одном конце градиента?
Нет. Текст может находиться на менее контрастном участке. Проверьте реальные позиции и состояния.
Почему направление градиента не совпадает с макетом?
Правила углов и геометрия элемента влияют на вид. Покажите CSS на целевой поверхности и оцените.
Попробуйте на собственном источнике.
Замените пример своим материалом в промпте. Сохраните нужные требования и скопируйте задачу в WebAct.
Настроить и скопировать задачу ↑