Учебники

CSS фильтры — текстовые и графические эффекты

Сентябрь 21, 2018

Вы можете использовать фильтры CSS для добавления специальных эффектов к тексту, изображениям и другим аспектам веб-страницы без использования изображений или другой графики. Фильтры работают только в Internet Explorer 4.0 . Если вы разрабатываете свой сайт для нескольких браузеров, использование фильтров CSS может быть не очень хорошей идеей, поскольку есть вероятность, что это не даст никаких преимуществ.

В этой главе мы увидим детали каждого CSS-фильтра. Эти фильтры могут не работать в вашем браузере.

Альфа-канал

Фильтр Альфа-канала изменяет непрозрачность объекта, что позволяет ему сливаться с фоном. В этом фильтре можно использовать следующие параметры:

Sr.No. Параметр и описание
1

помутнение

Уровень непрозрачности. 0 — полностью прозрачный, 100 — полностью непрозрачный.

2

finishopacity

Уровень непрозрачности на другом конце объекта.

3

стиль

Форма градиента непрозрачности.

0 = униформа

1 = линейный

2 = радиальный

3 = прямоугольный

4

StartX

Координата X для градиента непрозрачности, чтобы начать.

5

startY

Координата Y для градиента непрозрачности, чтобы начать.

6

finishX

Координата X для градиента непрозрачности до конца.

7

finishY

Координата Y для градиента непрозрачности до конца.

помутнение

Уровень непрозрачности. 0 — полностью прозрачный, 100 — полностью непрозрачный.

finishopacity

Уровень непрозрачности на другом конце объекта.

стиль

Форма градиента непрозрачности.

0 = униформа

1 = линейный

2 = радиальный

3 = прямоугольный

StartX

Координата X для градиента непрозрачности, чтобы начать.

startY

Координата Y для градиента непрозрачности, чтобы начать.

finishX

Координата X для градиента непрозрачности до конца.

finishY

Координата Y для градиента непрозрачности до конца.

пример

Live Demo

<html>
   <head>
   </head>
   
   <body>
      <p> Image Example: </p>
      
      <img src = "/css/images/logo.png" alt = "CSS Logo" 
         style = "Filter: Alpha(Opacity=100, 
         FinishOpacity = 0, 
         Style = 2, 
         StartX = 20, 
         StartY = 40, 
         FinishX = 0, 
         FinishY = 0)" />
      <p> Text Example: </p>
      
      <div style = "width: 357; 
         height: 50; 
         font-size: 30pt; 
         font-family: Arial Black; 
         color: blue;
         Filter: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=580, FinishY=0)">CSS Tutorials</div>
   </body>
</html>

Это даст следующий результат —

Размытость

Motion Blur используется для создания размытых изображений или текста с направлением и силой. В этом фильтре можно использовать следующие параметры:

Sr.No. Параметр и описание
1

добавлять

Правда или ложь. Если true, изображение добавляется к размытому изображению; и если false, изображение не добавляется к размытому изображению.

2

направление

Направление размытия, идущее по часовой стрелке, округляется с шагом 45 градусов. Значение по умолчанию — 270 (слева).

0 = верх

45 = вверху справа

90 = Право

135 = справа внизу

180 = снизу

225 = Слева внизу

270 = левый

315 = вверху слева

3

прочность

Количество пикселей, которое будет размыто. По умолчанию используется 5 пикселей.

добавлять

Правда или ложь. Если true, изображение добавляется к размытому изображению; и если false, изображение не добавляется к размытому изображению.

направление

Направление размытия, идущее по часовой стрелке, округляется с шагом 45 градусов. Значение по умолчанию — 270 (слева).

0 = верх

45 = вверху справа

90 = Право

135 = справа внизу

180 = снизу

225 = Слева внизу

270 = левый

315 = вверху слева

прочность

Количество пикселей, которое будет размыто. По умолчанию используется 5 пикселей.

пример

Live Demo 

<html>
   <head>
   </head>
   
   <body>
      <p> Image Example: </p>
      
      <img src = "/css/images/logo.png" alt = "CSS Logo" 
         style = "Filter: Blur(Add = 0, Direction = 225, Strength = 10)">
      
      <p> Text Example: </p>
      
      <div style = "width: 357; 
         height: 50; 
         font-size: 30pt; 
         font-family: Arial Black; 
         color: blue; 
         Filter: Blur(Add = 1, Direction = 225, Strength = 10)">CSS Tutorials
      </div>
   </body>
</html>

Это даст следующий результат —

Хроматический фильтр

Хроматический фильтр используется для того, чтобы сделать любой конкретный цвет прозрачным, и обычно он используется с изображениями. Вы также можете использовать его с полосами прокрутки. В этом фильтре можно использовать следующий параметр:

Sr.No. Параметр и описание
1

цвет

Цвет, который вы хотели бы быть прозрачным.

цвет

Цвет, который вы хотели бы быть прозрачным.

пример

Live Demo 

<html>
   <head>
   </head>
   
   <body>
      <p> Image Example: </p>
      
      <img src = "/images/css.gif" 
         alt = "CSS Logo" style = "Filter: Chroma(Color = #FFFFFF)">
      
      <p> Text Example: </p>
      
      <div style = "width: 580; 
         height: 50; 
         font-size: 30pt; 
         font-family: Arial Black; 
         color: #3300FF; 
         Filter: Chroma(Color = #3300FF)">CSS Tutorials</div>
   </body>
</html>

Это даст следующий результат —

Эффект Drop Shadow

Drop Shadow используется для создания тени вашего объекта с указанными X (горизонтальным) и Y (вертикальным) смещением и цветом.

В этом фильтре можно использовать следующие параметры:

Sr.No. Параметр и описание
1

цвет

Цвет в виде #RRGGBB тени.

2

offX

Количество пикселей, тень которых смещена относительно визуального объекта вдоль оси x. Положительные целые числа перемещают тень справа, отрицательные целые перемещают тень слева.

3

Offy

Количество пикселей, тень которых смещена относительно визуального объекта вдоль оси Y. Положительные целые числа перемещают тень вниз, отрицательные целые перемещают тень вверх.

4

положительный

Если это правда, все непрозрачные пиксели объекта имеют тени. Если false, все прозрачные пиксели имеют тени. По умолчанию это правда.

цвет

Цвет в виде #RRGGBB тени.

offX

Количество пикселей, тень которых смещена относительно визуального объекта вдоль оси x. Положительные целые числа перемещают тень справа, отрицательные целые перемещают тень слева.

Offy

Количество пикселей, тень которых смещена относительно визуального объекта вдоль оси Y. Положительные целые числа перемещают тень вниз, отрицательные целые перемещают тень вверх.

положительный

Если это правда, все непрозрачные пиксели объекта имеют тени. Если false, все прозрачные пиксели имеют тени. По умолчанию это правда.

пример

Live Demo 

<html>
   <head>
   </head>
   
   <body>
      <p>Image Example:</p>
      
      <img src = "/css/images/logo.png" 
         alt = "CSS Logo" 
         style = "filter:drop-shadow(2px 2px 1px #FF0000);">
      
      <p>Text Example:</p>
      
      <div style = "width: 357; 
         height: 50; 
         font-size: 30pt; 
         font-family: Arial Black; 
         color: red; 
         filter:drop-shadow(3px 3px 2px #000000);">CSS Tutorials</div>
   </body>
</html>

Это даст следующий результат —

Эффект флип

Эффект Flip используется для создания зеркального отображения объекта. В этом фильтре можно использовать следующие параметры:

Sr.No. Параметр и описание
1

FlipH

Создает горизонтальное зеркальное отображение

2

FlipV

Создает вертикальное зеркальное отображение

FlipH

Создает горизонтальное зеркальное отображение

FlipV

Создает вертикальное зеркальное отображение

пример

Live Demo 

<html>
   <head>
   </head>
   
   <body>
      <p> Image Example: </p>
      
      <img src = "/css/images/logo.png" 
         alt = "CSS Logo" 
         style = "filter: FlipH">
      
      <img src = "/css/images/logo.png" alt = "CSS Logo" style = "filter: FlipV">
      
      <p> Text Example: </p>
      
      <div style = "width: 300; 
         height: 50; 
         font-size: 30pt; 
         font-family: Arial Black; 
         color: red; 
         filter: FlipV">CSS Tutorials</div>
   </body>
</html>

Это даст следующий результат —

Эффект свечения

Эффект свечения используется для создания свечения вокруг объекта. Если это прозрачное изображение, то вокруг непрозрачных пикселей создается свечение. В этом фильтре можно использовать следующие параметры:

Sr.No. Параметр и описание
1

цвет

Цвет, который вы хотите, чтобы свечение было.

2

прочность

Интенсивность свечения (от 1 до 255).

цвет

Цвет, который вы хотите, чтобы свечение было.

прочность

Интенсивность свечения (от 1 до 255).

пример

Live Demo 

<html>
   <head>
   </head>
   
   <body>
      <p> Image Example: </p>
      
      <img src = "/css/images/logo.png" 
         alt = "CSS Logo" 
         style = "filter: Chroma(Color = #000000) Glow(Color=#00FF00, Strength=20)">
      
      <p> Text Example: </p>
      
      <div style = "width: 357; 
         height: 50; 
         font-size: 30pt; 
         font-family: Arial Black; 
         color: red; 
         filter: Glow(Color=#00FF00, Strength=20)">CSS Tutorials</div>
   </body>
</html>

Это даст следующий результат —

Эффект серого

Эффект серой шкалы используется для преобразования цветов объекта в 256 оттенков серого. В этом фильтре используется следующий параметр:

Sr.No. Параметр и описание
1

полутоновой

Преобразует цвета объекта в 256 оттенков серого.

полутоновой

Преобразует цвета объекта в 256 оттенков серого.

пример

Live Demo 

<html>
   <head>
   </head>
   
   <body>
      <p> Image Example: </p>
      
      <img src = "/css/images/logo.png" 
         alt = "CSS Logo" 
         style = "filter: grayscale(50%)">
      
      <p> Text Example: </p>
      
      <div style = "width: 357; 
         height: 50; 
         font-size: 30pt; 
         font-family: Arial Black; 
         color: red; 
         filter: grayscale(50%)">CSS Tutorials</div>
   </body>
</html>

Это даст следующий результат —

Инвертировать эффект

Эффект инвертирования используется для сопоставления цветов объекта с их противоположными значениями в цветовом спектре, т. Е. Для создания негативного изображения. В этом фильтре используется следующий параметр:

Sr.No. Параметр и описание
1

инвертировать

Сопоставляет цвета объекта с их противоположным значением в цветовом спектре.

инвертировать

Сопоставляет цвета объекта с их противоположным значением в цветовом спектре.

пример

Live Demo 

<html>
   <head>
   </head>
   
   <body>
      <p> Image Example: </p>
      
      <img src = "/css/images/logo.png" 
         alt = "CSS Logo" 
         style = "filter: invert(100%)">
      
      <p> Text Example: </p>
      
      <div style = "width: 357; 
         height: 50; 
         font-size: 30pt; 
         font-family: Arial Black; 
         color: red; 
         filter: invert(100%)">CSS Tutorials</div>
   </body>
</html>

Это даст следующий результат —

Маска Эффект

Эффект «Маска» используется для преобразования прозрачных пикселей в указанный цвет и делает непрозрачные пиксели прозрачными. В этом фильтре используется следующий параметр:

Sr.No. Параметр и описание
1

цвет

Цвет, которым станут прозрачные области.

цвет

Цвет, которым станут прозрачные области.

пример

Live Demo 

<html>
   <head>
   </head>
   
   <body>
      <p> Image Example: </p>
      
      <img src = "/css/images/logo.png" 
         alt = "CSS Logo" 
         style = "filter: Chroma(Color = #000000) Mask(Color=#00FF00)">
      
      <p> Text Example: </p>
      
      <div style = "width: 357; 
         height: 50; 
         font-size: 30pt; 
         font-family: Arial Black; 
         color: red; 
         filter: Mask(Color=#00FF00)">CSS Tutorials
      </div>
   </body>
</html>

Это даст следующий результат —

Фильтр теней

Фильтр тени используется для создания ослабленной тени в указанном направлении и цвете. Это фильтр, который находится между Dropshadow и Glow. В этом фильтре можно использовать следующие параметры:

Sr.No. Параметр и описание
1

цвет

Цвет, которым вы хотите, чтобы тень была.

2

направление

Направление размытия, идущее по часовой стрелке, округляется с шагом 45 градусов. Значение по умолчанию — 270 (слева).

0 = верх

45 = вверху справа

90 = Право

135 = справа внизу

180 = снизу

225 = Слева внизу

270 = левый

315 = вверху слева

цвет

Цвет, которым вы хотите, чтобы тень была.

направление

Направление размытия, идущее по часовой стрелке, округляется с шагом 45 градусов. Значение по умолчанию — 270 (слева).

0 = верх

45 = вверху справа

90 = Право

135 = справа внизу

180 = снизу

225 = Слева внизу

270 = левый

315 = вверху слева

пример

Live Demo 

<html>
   <head>
   </head>
   
   <body>
      <p> Image Example: </p>
      
      <img src = "/css/images/logo.png" 
         alt = "CSS Logo" 
         style = "filter: Chroma(Color = #000000) Shadow(Color=#00FF00, Direction=225)">
      
      <p> Text Example: </p>
      
      <div style = "width: 357; 
         height: 50; 
         font-size: 30pt; 
         font-family: 
         Arial Black; 
         color: red; 
         filter: Shadow(Color=#0000FF, Direction=225)">CSS Tutorials
      </div>
   </body>
</html>

Это даст следующий результат —

Волновой эффект

Волновой эффект используется для придания объекту синусоидального искажения, чтобы он выглядел волнистым. В этом фильтре можно использовать следующие параметры:

Sr.No. Параметр и описание
1

добавлять

Значение 1 добавляет исходное изображение к волнистому изображению, 0 — нет.

2

частота

Количество волн.

3

свет

Сила света на волне (от 0 до 100).

4

фаза

В какой степени должна начаться синусоида (от 0 до 100).

5

прочность

Интенсивность волнового эффекта.

добавлять

Значение 1 добавляет исходное изображение к волнистому изображению, 0 — нет.

частота

Количество волн.

свет

Сила света на волне (от 0 до 100).

фаза

В какой степени должна начаться синусоида (от 0 до 100).

прочность

Интенсивность волнового эффекта.

пример

Live Demo 

<html>
   <head>
   </head>
   
   <body>
      <p> Image Example: </p>
      
      <img src = "/css/images/logo.png" 
         alt = "CSS Logo" 
         style = "filter: Chroma(Color = #000000) 
         Wave(Add=0, Freq=1, LightStrength=10, Phase=220, Strength=10)">
      
      <p> Text Example: </p>
      
      <div style = "width: 357; 
         height: 50; 
         font-size: 30pt; 
         font-family: Arial Black; 
         color: red; 
         filter: Wave(Add=0, Freq=1, LightStrength=10, Phase=20, Strength=20)">CSS Tutorials
      </div>
   </body>
</html>

Это даст следующий результат —

Рентгеновский эффект

Рентген воздействует на оттенки серого и выравнивает глубину цвета. В этом фильтре используется следующий параметр:

Sr.No. Параметр и описание
1

Рентгеновский

Оттенки серого и выравнивает глубину цвета.

Рентгеновский

Оттенки серого и выравнивает глубину цвета.

пример

Live Demo 

<html>
   <head>
   </head>
   
   <body>
      <p> Image Example: </p>
      
      <img src = "/css/images/logo.png" 
         alt = "CSS Logo" 
         style = "filter: Xray">
      
      <p> Text Example: </p>
      
      <div style = "width: 357; 
         height: 50; 
         font-size: 30pt; 
         font-family: Arial Black; 
         color: red; 
         filter: Xray">CSS Tutorials
      </div>
   </body>
</html>

Это даст следующий результат —

86
Share: