Фильтры

Validate an Integer

The following example uses the function to check if the variable $int is an integer. If $int is an integer, the output of the code below will be: «Integer is valid». If $int is not an integer, the output will be: «Integer is not valid»:

Example


<?php$int = 100;if (!filter_var($int, FILTER_VALIDATE_INT) === false) {   echo(«Integer is valid»);} else {  echo(«Integer is not valid»);}?>

Tip: filter_var() and Problem With 0

In the example above, if $int was set to 0, the function above will return «Integer is not valid». To solve this problem, use the code below:

Example

<?php$int = 0;if (filter_var($int, FILTER_VALIDATE_INT) === 0 || !filter_var($int, FILTER_VALIDATE_INT) === false) {   echo(«Integer is valid»);} else {  echo(«Integer is not valid»);}?>

Примитивы фильтра

Таким образом, в SVG каждый элемент < filter> содержит набор примитивов фильтра в качестве дочерних элементов. Каждый примитив фильтра выполняет одну элементарную графическую операцию на одном или нескольких входах, создавая графический результат.

Примитивы фильтра удобно названы в честь графических операций, которые они выполняет. Например, примитив, применяющий эффект размытия Гаусса (Gaussian Blur) к источнику графики, называется feGaussianBlur. Все примитивы имеют одинаковый префикс: fe, сокращенно от “filter effect”. Опять же, имена в SVG удобно выбирать, чтобы понимать, что это за элемент или что он делает.

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

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

Примитив фильтра работает, принимая графический источник на ввод и выводя на другой. А выход одного эффекта фильтра может быть использован в качестве входа в другой

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

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

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

  • SourceGraphic: элемент, к которому применяется весь фильтр; например, изображение или фрагмент текста.
  • SourceAlpha: это то же самое, что и SourceGraphic, за исключением того, что эта графика содержит только альфа-канал элемента. Например, для изображения JPEG это черный прямоугольник размером с само изображение.

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

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

На этом этапе просто обратите внимание на то, как определяются и используются входы и выходы определенных примитивов. Я добавила некоторые комментарии для помощи

Теперь последняя концепция, которую я хочу кратко пояснить, прежде чем перейти к нашему первому примеру фильтра, это концепция области фильтрации (Filter Region).

Create A Search List

Step 1) Add HTML:

Example

<input type=»text» id=»myInput» onkeyup=»myFunction()» placeholder=»Search for names..»><ul id=»myUL»>  <li><a href=»#»>Adele</a></li>  <li><a href=»#»>Agnes</a></li>  <li><a href=»#»>Billy</a></li>  <li><a href=»#»>Bob</a></li>  <li><a href=»#»>Calvin</a></li>  <li><a href=»#»>Christina</a></li>  <li><a href=»#»>Cindy</a></li> </ul>

Note: We use href=»#» in this demo since we do not have a page to link it to. In real life this should be a real URL to a specific page.

Step 2) Add CSS:

Style the input element and the list:

Example

#myInput {  background-image: url(‘/css/searchicon.png’); /* Add a search icon to input */  background-position: 10px 12px; /* Position the search icon */  background-repeat: no-repeat; /* Do not repeat the icon image */  width: 100%; /* Full-width */  font-size: 16px; /* Increase font-size */  padding: 12px 20px 12px 40px; /* Add some padding */  border: 1px solid #ddd; /* Add a grey border */  margin-bottom: 12px; /* Add some space below the input */}#myUL {  /* Remove default list styling */  list-style-type: none;  padding: 0;  margin: 0; }#myUL li a {  border: 1px solid #ddd; /* Add a border to all links */  margin-top: -1px; /* Prevent double borders */  background-color: #f6f6f6; /* Grey background color */  padding: 12px; /* Add some padding */  text-decoration: none; /* Remove default text underline */  font-size: 18px; /* Increase the font-size */  color: black; /* Add a black text color */  display: block; /* Make it into a block element to fill the whole list */}#myUL li a:hover:not(.header) {  background-color: #eee; /* Add a hover effect to all links, except for headers */}

Step 3) Add JavaScript:

Example

<script>function myFunction() {  // Declare variables   var input, filter, ul, li, a, i, txtValue;  input = document.getElementById(‘myInput’);  filter = input.value.toUpperCase();  ul = document.getElementById(«myUL»);  li = ul.getElementsByTagName(‘li’);  // Loop through all list items, and hide those who don’t match the search query  for (i = 0; i < li.length; i++) {    a = li.getElementsByTagName(«a»);     txtValue = a.textContent || a.innerText;    if (txtValue.toUpperCase().indexOf(filter) > -1) {      li.style.display = «»;    } else {      li.style.display = «none»;    }  }} </script>

Tip: Remove toUpperCase() if you want to perform a case-sensitive search.

Tip: Also check out Filter Table.

Images

SlideshowSlideshow GalleryModal ImagesLightboxResponsive Image GridImage GridTab GalleryImage Overlay FadeImage Overlay SlideImage Overlay ZoomImage Overlay TitleImage Overlay IconImage EffectsBlack and White ImageImage TextImage Text BlocksTransparent Image TextFull Page ImageForm on ImageHero ImageBlur Background ImageChange Bg on ScrollSide-by-Side ImagesRounded ImagesAvatar ImagesResponsive ImagesCenter ImagesThumbnailsBorder Around ImageMeet the TeamSticky ImageFlip an ImageShake an ImagePortfolio GalleryPortfolio with FilteringImage ZoomImage Magnifier GlassImage Comparison Slider

Create A Filtered Table

Step 1) Add HTML:

Example

<input type=»text» id=»myInput» onkeyup=»myFunction()» placeholder=»Search for names..»><table id=»myTable»>  <tr class=»header»>    <th style=»width:60%;»>Name</th>    <th style=»width:40%;»>Country</th>  </tr>  <tr>    <td>Alfreds Futterkiste</td>    <td>Germany</td>  </tr>  <tr>    <td>Berglunds snabbkop</td>    <td>Sweden</td>  </tr>  <tr>    <td>Island Trading</td>    <td>UK</td>  </tr>  <tr>    <td>Koniglich Essen</td>    <td>Germany</td>  </tr></table>

Step 2) Add CSS:

Style the input element and the table:

Example

#myInput {  background-image: url(‘/css/searchicon.png’); /* Add a search icon to input */  background-position: 10px 12px; /* Position the search icon */  background-repeat: no-repeat; /* Do not repeat the icon image */  width: 100%; /* Full-width */  font-size: 16px; /* Increase font-size */  padding: 12px 20px 12px 40px; /* Add some padding */  border: 1px solid #ddd; /* Add a grey border */  margin-bottom: 12px; /* Add some space below the input */}#myTable {  border-collapse: collapse; /* Collapse borders */   width: 100%; /* Full-width */  border: 1px solid #ddd; /* Add a grey border */  font-size: 18px; /* Increase font-size */}#myTable th, #myTable td {  text-align: left; /* Left-align text */  padding: 12px; /* Add padding */}#myTable tr {  /* Add a bottom border to all table rows */  border-bottom: 1px solid #ddd; }#myTable tr.header, #myTable tr:hover {  /* Add a grey background color to the table header and on hover */  background-color: #f1f1f1;}

Step 3) Add JavaScript:

Example

<script>function myFunction() {  // Declare variables   var input, filter, table, tr, td, i, txtValue;  input = document.getElementById(«myInput»);  filter = input.value.toUpperCase();  table = document.getElementById(«myTable»);  tr = table.getElementsByTagName(«tr»);  // Loop through all table rows, and hide those who don’t match the search query  for (i = 0; i < tr.length; i++) {    td = tr.getElementsByTagName(«td»);    if (td) {      txtValue = td.textContent || td.innerText;      if (txtValue.toUpperCase().indexOf(filter) > -1) {        tr.style.display = «»;      } else {        tr.style.display = «none»;      }    }   }} </script>


Tip: Remove toUpperCase() if you want to perform a case-sensitive search.

Tip: Change tr.getElementsByTagName(‘td’) to if you want to search for «Country» (index 1) instead of «Name» (index 0).

Tip: Also check out Filter List.

Применение тени к изображению

Позвольте мне начать с краткого предупреждения: вам лучше создать простую тень с помощью CSS-функции фильтрации drop-shadow(). Путь фильтра SVG гораздо более подробный. Ведь, как мы уже упоминали ранее, функции CSS фильтра — это удобные ярлыки. Но я все равно хочу рассмотреть этот пример как простую точку входа в более сложные эффекты фильтра, которые мы рассмотрим в следующих статьях.

Итак, как создается тень?

Тень обычно представляет собой светло-серый слой позади или под элементом, который имеет ту же форму (или фигуру), что и сам элемент. Другими словами, вы можете считать это размытой серой копией элемента.

При создании SVG-фильтров нужно рассуждать поэтапно. Какие шаги необходимы для достижения того или иного эффекта? Для тени размытая серая копия элемента может быть создана путем размытия черной копии элемента, а затем раскрашивания этой черной копии, т.е. сделать ее серой. Затем эта только что созданная размытая серая копия помещается позади исходного элемента и немного смещается в обоих направлениях.

Итак, мы начнем с получения черной копии нашего элемента и ее размытия. Черная копия может быть создана с помощью альфа-канала элемента, используя SourceAlpha в качестве входных данных фильтра.

Примитив feGaussianBlur будет использоваться для применения размытия Гаусса к этому SourceAlpha-слою. Необходимое количество размытия задается в атрибуте stdDeviation (сокращение от Standard Deviation). Если задать одно значение атрибута stdDeviation, это значение будет использоваться для применения равномерного размытия входных данных. Можно также указать два числовых значения, тогда первое будет использоваться для размытия элемента в горизонтальном направлении, а второе — для вертикального размытия. Для тени нам нужно применить равномерное размытие, поэтому наш код будет начинаться с этого:

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

Рис_6. Созданная черная копия изображения с размытием (тень).

Затем мы хотим изменить цвет тени и сделать ее серой. Мы сделаем это, применив цветную заливку к области фильтра, а затем соединим этот слой цветной заливки с созданным нами слоем тени.

Совмещение-это соединение графического элемента с размытым фоном. Размытым фоном является контент позади элемента, с которым элемент совмещается. В нашем фильтре цвет заливки — это верхний слой, а размытая тень — ее фон, потому что она лежит за ним. Мы будем рассматривать примитив feComposite подробнее в следующих статьях, поэтому, если вы не знакомы с композицией и как она работает, то я рекомендую ознакомиться с подробной статьей на эту тему в моем блоге.

Примитив feComposite имеет атрибут operator, который используется для указания, какую составную операцию мы хотим использовать.

Используя оператор in composite, слой цветной заливки будет “обрезан”, а отображаться будет только область цвета, которая совпадает с нашим теневым слоем. Оба слоя будут смешаны там, где они пересекаются, т.е. серый цвет будет использоваться для окрашивания нашей черной тени.

Примитив feComposite требует двух входных данных для работы, указанных в атрибутах in и in2. Первый вход — это наш цветной слой, а второй — размытый теневой фон. С помощью составной операции, указанной в атрибуте operator, наш код теперь выглядит следующим образом:

Обратите внимание, как результаты feGaussianBlur и примитивов feFlood используются в качестве входных данных для композита. Теперь наше демо выглядит так:. Рис_7

Теперь тень серая

Рис_7. Теперь тень серая.

Перед тем, как мы наложим наше исходное изображение поверх тени, мы хотим сместить ее по вертикали и/или горизонтали. На сколько и в каком направлении полностью зависит от вас. Для этой демо я предположу, что у нас есть источник света, исходящего из верхнего левого угла нашего экрана, поэтому я смещу тень на несколько пикселей вниз и вправо.

Для смещения слоя в SVG используется примитив feOffset. Дополнительно к атрибутам in и result этот примитив принимает два главных атрибута: dx и dy, которые определяют расстояние, на которое вы хотите сместить слой вдоль осей X и Y соответственно.

После смещения тени, мы будет объединить ее с исходным изображением, используя feMerge, подобно тому, как мы объединяли текст и цветную заливку на предыдущем шаге — один mergeNode примет наши тени в качестве входных данных, а на другом mergeNode будет слой исходного изображения, используя SourceGraphic в качестве входных данных. Наш код теперь выглядит так:

И следующее демо для кода выше:

И именно так вы применяете эффект фильтра в SVG, используя фильтры SVG. Вы найдете, что этот эффект работает во всех основных браузерах.

More

Fullscreen VideoModal BoxesDelete ModalTimelineScroll IndicatorProgress BarsSkill BarRange SlidersTooltipsDisplay Element HoverPopupsCollapsibleCalendarHTML IncludesTo Do ListLoadersStar RatingUser RatingOverlay EffectContact ChipsCardsFlip CardProfile CardProduct CardAlertsCalloutNotesLabelsCirclesStyle HRCouponList GroupList Without BulletsResponsive TextCutout TextGlowing TextFixed FooterSticky ElementEqual HeightClearfixResponsive FloatsSnackbarFullscreen WindowScroll DrawingSmooth ScrollGradient Bg ScrollSticky HeaderShrink Header on ScrollPricing TableParallaxAspect RatioResponsive IframesToggle Like/DislikeToggle Hide/ShowToggle Dark ModeToggle TextToggle ClassAdd ClassRemove ClassActive ClassTree ViewRemove PropertyOffline DetectionFind Hidden ElementRedirect WebpageZoom HoverFlip BoxCenter VerticallyCenter Button in DIVTransition on HoverArrowsShapesDownload LinkFull Height ElementBrowser WindowCustom ScrollbarHide ScrollbarDevice LookContenteditable BorderPlaceholder ColorText Selection ColorBullet ColorVertical LineDividersAnimate IconsCountdown TimerTypewriterComing Soon PageChat MessagesPopup Chat WindowSplit ScreenTestimonialsSection CounterQuotes SlideshowClosable List ItemsTypical Device BreakpointsDraggable HTML ElementJS Media QueriesSyntax HighlighterJS AnimationsGet Iframe Elements

More

Fullscreen VideoModal BoxesDelete ModalTimelineScroll IndicatorProgress BarsSkill BarRange SlidersTooltipsDisplay Element HoverPopupsCollapsibleCalendarHTML IncludesTo Do ListLoadersStar RatingUser RatingOverlay EffectContact ChipsCardsFlip CardProfile CardProduct CardAlertsCalloutNotesLabelsCirclesStyle HRCouponList GroupList Without BulletsResponsive TextCutout TextGlowing TextFixed FooterSticky ElementEqual HeightClearfixResponsive FloatsSnackbarFullscreen WindowScroll DrawingSmooth ScrollGradient Bg ScrollSticky HeaderShrink Header on ScrollPricing TableParallaxAspect RatioResponsive IframesToggle Like/DislikeToggle Hide/ShowToggle Dark ModeToggle TextToggle ClassAdd ClassRemove ClassActive ClassTree ViewRemove PropertyOffline DetectionFind Hidden ElementRedirect WebpageZoom HoverFlip BoxCenter VerticallyCenter Button in DIVTransition on HoverArrowsShapesDownload LinkFull Height ElementBrowser WindowCustom ScrollbarHide ScrollbarDevice LookContenteditable BorderPlaceholder ColorText Selection ColorBullet ColorVertical LineDividersAnimate IconsCountdown TimerTypewriterComing Soon PageChat MessagesPopup Chat WindowSplit ScreenTestimonialsSection CounterQuotes SlideshowClosable List ItemsTypical Device BreakpointsDraggable HTML ElementJS Media QueriesSyntax HighlighterJS AnimationsGet Iframe Elements

Images

SlideshowSlideshow GalleryModal ImagesLightboxResponsive Image GridImage GridTab GalleryImage Overlay FadeImage Overlay SlideImage Overlay ZoomImage Overlay TitleImage Overlay IconImage EffectsBlack and White ImageImage TextImage Text BlocksTransparent Image TextFull Page ImageForm on ImageHero ImageBlur Background ImageChange Bg on ScrollSide-by-Side ImagesRounded ImagesAvatar ImagesResponsive ImagesCenter ImagesThumbnailsBorder Around ImageMeet the TeamSticky ImageFlip an ImageShake an ImagePortfolio GalleryPortfolio with FilteringImage ZoomImage Magnifier GlassImage Comparison Slider

CSS Reference

CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS Default ValuesCSS Entities

CSS Properties

align-content align-items align-self all animation animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function

backface-visibility background background-attachment background-blend-mode background-clip background-color background-image background-origin background-position background-repeat background-size border border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-spacing border-style border-top border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width border-width bottom box-decoration-break box-shadow box-sizing break-after break-before break-inside

caption-side caret-color @charset clear clip clip-path color column-count column-fill column-gap column-rule column-rule-color column-rule-style column-rule-width column-span column-width columns content counter-increment counter-reset cursor

direction display empty-cells filter flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap float font @font-face font-family font-feature-settings font-kerning font-size font-size-adjust font-stretch font-style font-variant font-variant-caps font-weight

grid grid-area grid-auto-columns grid-auto-flow grid-auto-rows grid-column grid-column-end grid-column-gap grid-column-start grid-gap grid-row grid-row-end grid-row-gap grid-row-start grid-template grid-template-areas grid-template-columns grid-template-rows

hanging-punctuation height hyphens @import isolation justify-content @keyframes left letter-spacing

line-height list-style list-style-image list-style-position list-style-type

margin margin-bottom margin-left margin-right margin-top max-height max-width @media min-height min-width mix-blend-mode

object-fit object-position opacity order outline outline-color outline-offset outline-style outline-width overflow overflow-x overflow-y

padding padding-bottom padding-left padding-right padding-top page-break-after page-break-before page-break-inside perspective perspective-origin pointer-events position quotes

resize right


scroll-behavior

tab-size table-layout text-align text-align-last text-decoration text-decoration-color text-decoration-line text-decoration-style text-indent text-justify text-overflow text-shadow text-transform top

transform transform-origin transform-style transition transition-delay transition-duration transition-property transition-timing-function

unicode-bidi user-select

vertical-align visibility

white-space width word-break word-spacing word-wrap writing-mode

z-index

More

Fullscreen VideoModal BoxesDelete ModalTimelineScroll IndicatorProgress BarsSkill BarRange SlidersTooltipsDisplay Element HoverPopupsCollapsibleCalendarHTML IncludesTo Do ListLoadersStar RatingUser RatingOverlay EffectContact ChipsCardsFlip CardProfile CardProduct CardAlertsCalloutNotesLabelsCirclesStyle HRCouponList GroupList Without BulletsResponsive TextCutout TextGlowing TextFixed FooterSticky ElementEqual HeightClearfixResponsive FloatsSnackbarFullscreen WindowScroll DrawingSmooth ScrollGradient Bg ScrollSticky HeaderShrink Header on ScrollPricing TableParallaxAspect RatioResponsive IframesToggle Like/DislikeToggle Hide/ShowToggle Dark ModeToggle TextToggle ClassAdd ClassRemove ClassActive ClassTree ViewRemove PropertyOffline DetectionFind Hidden ElementRedirect WebpageZoom HoverFlip BoxCenter VerticallyCenter Button in DIVTransition on HoverArrowsShapesDownload LinkFull Height ElementBrowser WindowCustom ScrollbarHide ScrollbarDevice LookContenteditable BorderPlaceholder ColorText Selection ColorBullet ColorVertical LineDividersAnimate IconsCountdown TimerTypewriterComing Soon PageChat MessagesPopup Chat WindowSplit ScreenTestimonialsSection CounterQuotes SlideshowClosable List ItemsTypical Device BreakpointsDraggable HTML ElementJS Media QueriesSyntax HighlighterJS AnimationsGet Iframe Elements

Grayscale Effect

Grayscale effect is used to convert the colors of the object to 256 shades of gray. The following parameter is used in this filter −

Sr.No. Parameter & Description
1

grayscale

Converts the colors of the object to 256 shades of gray.

Example

<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> 

It will produce the following result −

Поддержка браузерами

большинства SVG фильтров впечатляет. Однако способ применения эффекта может отличаться у некоторых браузеров в зависимости от поддержки ими отдельных примитивов фильтра, используемых в эффекте SVG-фильтрации, а также от возможных ошибок браузера. Поддержка браузером также может отличаться, когда фильтр SVG применяется к элементам SVG или к элементам HTML.

Я бы рекомендовала вам рассматривать эффекты фильтрации как расширение: вы почти всегда можете применить эффект в качестве улучшения поверх совершенно полезного опыта работы без фильтра. Многие знают, что я поддерживаю прогрессивный подход создания UI, когда это возможно. Таким образом, мы не будем слишком беспокоиться о поддержке браузерами в этой серии статей.

Наконец, несмотря на то, что поддержка фильтров SVG в целом хороша, имейте в виду, что некоторые эффекты, которые мы рассмотрим позже, можно считать экспериментальными. Я буду указывать любые основные проблемы или ошибки, если и когда они будут.

Итак, как определить и создать эффект фильтрации в SVG?

Alpha Channel

The Alpha Channel filter alters the opacity of the object, which makes it blend into the background. The following parameters can be used in this filter −

Sr.No. Parameter & Description
1

opacity

Level of the opacity. 0 is fully transparent, 100 is fully opaque.

2

finishopacity

Level of the opacity at the other end of the object.

3

style

The shape of the opacity gradient.

0 = uniform

1 = linear

2 = radial

3 = rectangular

4

startX


X coordinate for opacity gradient to begin.

5

startY

Y coordinate for opacity gradient to begin.

6

finishX

X coordinate for opacity gradient to end.

7

finishY

Y coordinate for opacity gradient to end.

Example

<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> 

It will produce the following result −

Images

SlideshowSlideshow GalleryModal ImagesLightboxResponsive Image GridImage GridTab GalleryImage Overlay FadeImage Overlay SlideImage Overlay ZoomImage Overlay TitleImage Overlay IconImage EffectsBlack and White ImageImage TextImage Text BlocksTransparent Image TextFull Page ImageForm on ImageHero ImageBlur Background ImageChange Bg on ScrollSide-by-Side ImagesRounded ImagesAvatar ImagesResponsive ImagesCenter ImagesThumbnailsBorder Around ImageMeet the TeamSticky ImageFlip an ImageShake an ImagePortfolio GalleryPortfolio with FilteringImage ZoomImage Magnifier GlassImage Comparison Slider

Create Filterable DIV Elements

Step 1) Add HTML:

<!— Control buttons —><div id=»myBtnContainer»>  <button class=»btn active» onclick=»filterSelection(‘all’)»> Show all</button>  <button class=»btn» onclick=»filterSelection(‘cars’)»> Cars</button>  <button class=»btn» onclick=»filterSelection(‘animals’)»> Animals</button>  <button class=»btn» onclick=»filterSelection(‘fruits’)»> Fruits</button>  <button class=»btn» onclick=»filterSelection(‘colors’)»> Colors</button> </div><!— The filterable elements. Note that some have multiple class names (this can be used if they belong to multiple categories) —><div class=»container»>  <div class=»filterDiv cars»>BMW</div>  <div class=»filterDiv colors fruits»>Orange</div>  <div class=»filterDiv cars»>Volvo</div>  <div class=»filterDiv colors»>Red</div>  <div class=»filterDiv cars animals»>Mustang</div>  <div class=»filterDiv colors»>Blue</div>  <div class=»filterDiv animals»>Cat</div>  <div class=»filterDiv animals»>Dog</div>  <div class=»filterDiv fruits»>Melon</div>  <div class=»filterDiv fruits animals»>Kiwi</div>  <div class=»filterDiv fruits»>Banana</div>  <div class=»filterDiv fruits»>Lemon</div>  <div class=»filterDiv animals»>Cow</div></div>

Step 2) Add CSS:

.container {  overflow: hidden;}.filterDiv {  float: left;   background-color: #2196F3;  color: #ffffff;  width: 100px;  line-height: 100px;  text-align: center;  margin: 2px;  display: none; /* Hidden by default */}/* The «show» class is added to the filtered elements */.show {  display: block;}/* Style the buttons */.btn {  border: none;  outline: none;  padding: 12px 16px;  background-color: #f1f1f1;  cursor: pointer;}/* Add a light grey background on mouse-over */.btn:hover {  background-color: #ddd;}/* Add a dark background to the active button */.btn.active {  background-color: #666;  color: white;}

Step 3) Add JavaScript:

filterSelection(«all»)function filterSelection(c) {  var x, i;  x = document.getElementsByClassName(«filterDiv»);  if (c == «all») c = «»;  // Add the «show» class (display:block) to the filtered elements, and remove the «show» class from the elements that are not selected  for (i = 0; i < x.length; i++) {    w3RemoveClass(x, «show»);    if (x.className.indexOf(c) > -1) w3AddClass(x, «show»);  }}// Show filtered elementsfunction w3AddClass(element, name) {  var i, arr1, arr2;  arr1 = element.className.split(» «);  arr2 = name.split(» «);  for (i = 0; i < arr2.length; i++) {    if (arr1.indexOf(arr2) == -1) {      element.className += » » + arr2;    }  }}// Hide elements that are not selectedfunction w3RemoveClass(element, name) {  var i, arr1, arr2;  arr1 = element.className.split(» «);  arr2 = name.split(» «);  for (i = 0; i < arr2.length; i++) {    while (arr1.indexOf(arr2) > -1) {      arr1.splice(arr1.indexOf(arr2), 1);     }  }  element.className = arr1.join(» «);}// Add active class to the current control button (highlight it)var btnContainer = document.getElementById(«myBtnContainer»);var btns = btnContainer.getElementsByClassName(«btn»);for (var i = 0; i < btns.length; i++) {  btns.addEventListener(«click», function() {    var current = document.getElementsByClassName(«active»);    current.className = current.className.replace(» active», «»);    this.className += » active»;  });}

More Examples

Apply a blur effect to the image:

img {  filter: blur(5px);}

Apply a blurred background image:

img.background {  filter: blur(35px);}

Adjust the brightness of the image:

img {  filter: brightness(200%);}

Adjust the contrast of the image:

img {  filter: contrast(200%);}

Apply a drop shadow effect to the image:

img {  filter: drop-shadow(8px 8px 10px gray);}

Convert the image to grayscale:

img {  filter: grayscale(50%);}

Apply a hue rotation on the image:

img {  filter: hue-rotate(90deg);}

Invert the samples in the image:

img {  filter: invert(100%);}

Set the opacity level for the image:

img {  filter: opacity(30%);}

Saturate the image:

img {  filter: saturate(800%);}

Convert the image to sepia:

img {  filter: sepia(100%);}

Using Multiple Filters

To use multiple filters, separate each filter with a space. Notice that the order is important (i.e. using grayscale() after sepia() will result in a completely gray image):

img {  filter: contrast(200%) brightness(150%);}

All Filters

A demonstration of all filter functions:

.blur {  filter: blur(4px);}.brightness {   filter: brightness(0.30);}.contrast {   filter: contrast(180%);}.grayscale {  filter: grayscale(100%);}.huerotate {  filter: hue-rotate(180deg);}.invert {  filter: invert(100%);}.opacity {  filter: opacity(50%);}.saturate {  filter: saturate(7);}.sepia {   filter: sepia(100%);}.shadow {   filter: drop-shadow(8px 8px 10px green);}

Menus

Icon BarMenu IconAccordionTabsVertical TabsTab HeadersFull Page TabsHover TabsTop NavigationResponsive TopnavNavbar with IconsSearch MenuSearch BarFixed SidebarSide NavigationResponsive SidebarFullscreen NavigationOff-Canvas MenuHover Sidenav ButtonsSidebar with IconsHorizontal Scroll MenuVertical MenuBottom NavigationResponsive Bottom NavBottom Border Nav LinksRight Aligned Menu LinksCentered Menu LinkEqual Width Menu LinksFixed MenuSlide Down Bar on ScrollHide Navbar on ScrollShrink Navbar on ScrollSticky NavbarNavbar on ImageHover DropdownsClick DropdownsDropdown in TopnavDropdown in SidenavResp Navbar DropdownSubnavigation MenuDropupMega MenuMobile MenuCurtain MenuCollapsed SidebarCollapsed SidepanelPaginationBreadcrumbsButton GroupVertical Button GroupSticky Social BarPill NavigationResponsive Header

Menus

Icon BarMenu IconAccordionTabsVertical TabsTab HeadersFull Page TabsHover TabsTop NavigationResponsive TopnavNavbar with IconsSearch MenuSearch BarFixed SidebarSide NavigationResponsive SidebarFullscreen NavigationOff-Canvas MenuHover Sidenav ButtonsSidebar with IconsHorizontal Scroll MenuVertical MenuBottom NavigationResponsive Bottom NavBottom Border Nav LinksRight Aligned Menu LinksCentered Menu LinkEqual Width Menu LinksFixed MenuSlide Down Bar on ScrollHide Navbar on ScrollShrink Navbar on ScrollSticky NavbarNavbar on ImageHover DropdownsClick DropdownsDropdown in TopnavDropdown in SidenavResp Navbar DropdownSubnavigation MenuDropupMega MenuMobile MenuCurtain MenuCollapsed SidebarCollapsed SidepanelPaginationBreadcrumbsButton GroupVertical Button GroupSticky Social BarPill NavigationResponsive Header


С этим читают