Эффекты и фильтры

Chakra UI предоставляет мощный набор утилит для управления визуальными эффектами и фильтрами элементов, позволяя создавать динамичные и привлекательные интерфейсы без необходимости писать сложный CSS вручную.

Работа с тенью и блуром

BoxShadow — ключевой инструмент для создания глубины и визуальной иерархии компонентов. Свойство boxShadow в Chakra UI принимает как предопределённые значения (sm, md, lg, xl, 2xl, outline, inner), так и кастомные строки CSS.

<Box boxShadow="lg" p="6" rounded="md" bg="white">
  Содержимое с тенью
</Box>

<Box boxShadow="0 4px 20px rgba(0,0,0,0.3)" p="6" rounded="md" bg="white">
  Кастомная тень
</Box>

BackdropFilter и Filter позволяют добавлять размытие и цветовые эффекты:

<Box
  bg="whiteAlpha.800"
  backdropFilter="blur(10px)"
  p="4"
  rounded="md"
>
  Размытый фон
</Box>

<Image
  src="example.jpg"
  filter="grayscale(80%) contrast(120%)"
/>
  • blur(px) — размытие.
  • brightness(%) — изменение яркости.
  • contrast(%) — контрастность.
  • grayscale(%) — оттенки серого.
  • saturate(%) — насыщенность.
  • hue-rotate(deg) — смещение цветового тона.

Анимации и переходы

Chakra UI интегрирует CSS-анимации через свойства transition и transform.

Простейшие эффекты при наведении:

<Button
  bg="blue.500"
  color="white"
  _hover={{ transform: "scale(1.05)", bg: "blue.600" }}
  transition="all 0.3s ease"
>
  Hover эффект
</Button>
  • _hover — псевдокласс для наведения.
  • _focus — фокус.
  • _active — активное состояние.
  • _groupHover — при наведении на родительскую группу (<Box role="group">).

Повороты и перемещения:

<Box
  w="100px"
  h="100px"
  bg="red.400"
  transform="rotate(15deg)"
  transition="transform 0.5s"
  _hover={{ transform: "rotate(0deg) translateY(-10px)" }}
/>

Использование фильтров для изображений

Компонент <Image> и <Box> с фоном поддерживают CSS-фильтры напрямую через проп filter. Это удобно для эффектов визуальной стилизации без дополнительных библиотек.

<Image
  src="landscape.jpg"
  borderRadius="md"
  filter="brightness(70%) saturate(150%) blur(2px)"
/>

Комбинирование фильтров создаёт сложные эффекты, например:

<Box
  w="300px"
  h="200px"
  bgImage="url('photo.jpg')"
  bgSize="cover"
  bgPosition="center"
  filter="grayscale(50%) blur(3px) contrast(120%)"
  rounded="lg"
/>

Перспектива и 3D-трансформации

Chakra UI позволяет управлять пространственными эффектами через transform и transformOrigin:

<Box
  w="150px"
  h="150px"
  bg="purple.400"
  transform="perspective(500px) rotateY(25deg)"
  transition="transform 0.4s"
  _hover={{ transform: "perspective(500px) rotateY(0deg)" }}
/>
  • perspective(px) задаёт глубину 3D-сцены.
  • rotateX(deg), rotateY(deg), rotateZ(deg) — вращение по осям.
  • translateX/Y/Z(px) — перемещение в пространстве.
  • scale() — масштабирование.

Пользовательские эффекты с sx и css

Chakra UI позволяет внедрять любые CSS-свойства через sx или css для расширенной кастомизации.

<Box
  w="200px"
  h="100px"
  bg="orange.300"
  sx={{
    filter: "drop-shadow(5px 5px 10px gray)",
    backdropFilter: "blur(5px)"
  }}
/>

Это полезно для сложных эффектов, которые не входят в стандартный набор Chakra UI.

Комбинация эффектов и доступность

При использовании визуальных эффектов важно учитывать контрастность и читаемость текста. Chakra UI поддерживает colorContrast и удобные семантические цвета (gray.800, whiteAlpha.900), что позволяет сохранять доступность при применении фильтров и тени.

Эффекты и фильтры в Chakra UI дают возможность создавать динамичные, интерактивные интерфейсы с минимальным кодом, обеспечивая при этом высокую производительность и кроссбраузерную совместимость.

Оглавление