Filter css grayscale: grayscale() — CSS: Cascading Style Sheets

Фильтр | Windi CSS

Утилиты для включения и отключения фильтров на элементе.

default

none

Filter Blur

default

sm

md

lg

xl

2xl

3xl

1

2

3

9

12

24px

2rem

Настройка

windi.config.js

 экспорт по умолчанию {
  тема: {
    размытие: {
      «4xl»: «72 пикселя»,
      «5xl»: «96px',
      «6xl»: «128 пикселей»,
    },
  },
}
 

Filter Brightness

50

75

90

95

100

105

110

115

125

150

175

200

251

Customizing

windi.config. js

 экспорт по умолчанию {
  тема: {
    яркость: {
      см: '50',
      мд: '100',
      лг: '150',
    },
  },
}
 

Контрастный фильтр

50

75

90

95

100

105

110

115

125

150

175

2519.

Windi.config. тема: { контраст: { см: ’50’, мд: ‘100’, лг: ‘150’, }, }, }

Фильтр Drop Shadow

по умолчанию

sm

md

lg

xl

2xl

нет

Настройка

windi.config.js

 экспорт по умолчанию {
  тема: {
    DropShadow: {
      '3xl': 'тень (0 30px 30px rgba (0, 0, 0, 0.2))',
      '4xl': 'тень (0 40px 40px rgba (0, 0, 0, 0,3))',
    },
  },
}
 

Filter Grayscale

default

5

10

20

25

30

40

50

60

70

75

80

90

95

100

Настройка

windi.config.js

 экспорт по умолчанию {
  тема: {
    оттенки серого: {
      50: «0,5»,
      80: «0,8»,
    },
  },
}
 

Filter Hue Rotate

15

30

45

60

90

120

180

-120

-90

-60

-45

-30

-15

Настройка

windi. config.js

 экспорт по умолчанию {
  тема: {
    hueRotate: {
      см: '60',
      лг: '90',
      XL: «180»,
    },
  },
}
 

Filter Invert

default

5

10

20

25

30

40

50

60

70

75

80

90

95

100

Настройка

windi.config.js

 экспорт по умолчанию {
  тема: {
    инвертировать: {
      см: «0,5»,
      лг: '0,8',
    },
  },
}
 

Насыщенность фильтра

по умолчанию

5

10

20

25

30

40

50

60

70

75

80

95

800003

95

800003

9000

800003

9000

800003

9000.

 экспорт по умолчанию {
  тема: {
    насыщать: {
      см: «0,5»,
      мд: '1',
      лг: '1,5',
    },
  },
}
 

Фильтр Сепия

по умолчанию

5

10

20

25

30

40

50

60

70

75

80

90

95

100

Настройка

Windi. config.js

 Export waule {
  тема: {
    сепия: {
      см: «0,5»,
      мд: '0,8',
    },
  },
}
 

Фильтр CSS | размытие, контраст, оттенки серого

Автор: Авинаш Малхотра

Обновлено: 30 июля 2022 г.

• ← Сетки CSS
• Адаптивный веб-дизайн→

1. Дом
2. Веб-дизайн
3. CSS3
4. Фильтр CSS

1. фильтр
2. адрес
3. размытие
4. контраст
5. оттенки серого
6. оттенок-поворот
7. падающая тень

Свойство фильтра CSS

Свойство фильтра CSS используется для добавления эффектов фильтра к изображениям или элементам.

Сюда входят такие свойства, как URL , размытие , контрастность , оттенки серого , оттенок-поворот и тень . Эффекты фильтра можно использовать для изображений, фона или границ для добавления эффектов.

Функции фильтра

1. адрес
2. размытие
3. контраст
4. оттенки серого
5. оттенок-поворот
6. падающая тень

Изменить фильтр для изображения

---

• url
• размытие
• контраст
• оттенки серого
• оттенок-поворот
• падающая тень

---

размытие

Функция размытия используется для добавления размытия изображениям или фону.

Значение по умолчанию — 0 пикселей. Значение размытия указано в пикселях. Например, чтобы изменить размытие на 10 пикселей, используйте filter:blur(10px) в css.

Изменить размытие изображения

размытие 0

---

контраст

Функция контрастности используется для добавления контраста изображениям или фону. Значение по умолчанию — 1. Значение контраста может быть от 0 до любого положительного числа. Например, чтобы изменить контрастность 0, используйте фильтр:контраст(0) в css.

Изменить контраст изображения

контраст 1

---

оттенки серого

Функция оттенков серого используется для добавления контраста изображениям или фону. Значение по умолчанию — 0. Значение оттенков серого может быть от 0 до 1. Например, для полного изображения в градациях серого используйте фильтр

: оттенки серого (1) в css.