ЦСС филтри су моћна алатка коју аутори могу користити за постизање различитих визуелних ефеката (попут Пхотосхоп филтера за прегледач). filterСвојство ЦСС омогућава приступ ефектима попут замућења или померања боја на приказивању елемента пре него што се елемент прикаже. Филтери се обично користе за подешавање приказивања слике, позадине или обруба.
Синтакса је:
.filter-me ( filter: blur(3px); filter: grayscale(1); filter: saturate(2.2); filter: none; /* remove existing filter */ )Постоји низ функција које треба користити за вредност:
blur()brightness()contrast()drop-shadow()grayscale()hue-rotate()invert()opacity()saturate()sepia()url()- за примену СВГ филтераcustom()- "долази ускоро"
Може се користити више функција, раздвојених размаком.
.do-more-things ( filter: blur(20px) grayscale(20%); )Функције филтера
Да бисте користили својство ЦСС филтера, одредите вредност за једну од следећих функција наведених горе. Ако је вредност неважећа, функција враћа „ниједна“. Осим тамо где је напоменуто, функције које узимају вредност изражену знаком процента (као у 34%) такође прихватају вредност изражену у децималу (као у 0,34).
Ево демонстрације која вам омогућава да се мало играте са појединачним филтерима:
сиве ()
filter: grayscale(20%) /* same as… */ filter: grayscale(0.2);Претвара улазну слику у сиве тонове. Вредност „износа“ дефинише проценат конверзије. Вредност од 100% је потпуно сива. Вредност од 0% оставља улаз непромењеним. Вредности између 0% и 100% су линеарни мултипликатори на ефекат. Ако параметар „износ“ недостаје, користи се вредност од 100%. Негативне вредности нису дозвољене.
сепиа ()
filter: sepia(0.8); /* same as… */ filter: sepia(80%);Претвара улазну слику у сепију. Вредност „износа“ дефинише проценат конверзије. Вредност од 100% је потпуно сепија. Вредност 0 оставља улаз непромењеним. Вредности између 0% и 100% су линеарни мултипликатори на ефекат. Ако параметар „износ“ недостаје, користи се вредност од 100%. Негативне вредности нису дозвољене.
заситити ()
filter: saturate(2); /* same as… */ filter: sature(200%);Засићује улазну слику. Вредност „износа“ дефинише проценат конверзије. Вредност од 0% је потпуно незасићена. Вредност од 100% оставља улаз непромењеним. Остале вредности су линеарни мултипликатори на ефекат. Вредности преко 100% су дозвољене, пружајући супер засићене резултате. Ако параметар „износ“ недостаје, користи се вредност од 100%. Негативне вредности нису дозвољене.
закретање нијансе ()
filter: hue-rotate(180deg); /* same as… */ filter: hue-rotate(0.5turn);Примењује ротацију нијансе на улазној слици. Вредност „угла“ дефинише број степени око круга боје који ће се прилагодити улазни узорци. Вредност 0дег оставља улаз непромењеним. Ако параметар „англе“ недостаје, користи се вредност 0deg. Максимална вредност је 360deg.
инверт ()
filter: invert(100%);Обрне узорке на улазној слици. Вредност „износа“ дефинише проценат конверзије. Вредност од 100% је потпуно обрнута. Вредност од 0% оставља улаз непромењеним. Вредности између 0% и 100% су линеарни мултипликатори на ефекат. Ако параметар „износ“ недостаје, користи се вредност од 100%. Негативне вредности нису дозвољене.
непрозирност()
filter: opacity(0.5); /* same as… */ filter: opacity(50%);Примењује транспарентност на узорке на улазној слици. Вредност „износа“ дефинише проценат конверзије. Вредност од 0% је потпуно транспарентна. Вредност од 100% оставља улаз непромењеним. Вредности између 0% и 100% су линеарни мултипликатори на ефекат. Ово је еквивалентно множењу узорака улазне слике са износом. Ако параметар „износ“ недостаје, користи се вредност од 100%. Ова функција је слична установљеном својству непрозирности; разлика је у томе што код филтера неки прегледачи пружају хардверско убрзање ради бољих перформанси. Негативне вредности нису дозвољене.
осветљеност ()
filter: brightness(0.5); /* same as… */ filter: brightness(50%);Примењује линеарни множилац на улазну слику, чинећи је да изгледа више или мање светла. Вредност од 0% створиће слику која је потпуно црна. Вредност од 100% оставља улаз непромењеним. Остале вредности су линеарни мултипликатори на ефекат. Вредности износа преко 100% су дозвољене, пружајући светлије резултате. Ако параметар „износ“ недостаје, користи се вредност од 100%.
контраст()
filter: contrast(4); /* same as… */ filter: contrast(400%);Подешава контраст улаза. Вредност од 0% створиће слику која је потпуно црна. Вредност од 100% оставља улаз непромењеним. Дозвољене су вредности веће од 100%, пружајући резултате са мање контраста. Ако параметар „износ“ недостаје, користи се вредност од 100%.
замућење ()
filter: blur(5px); filter: blur(1rem);Примењује Гауссов замућење на улазну слику. Вредност „радијуса“ дефинише вредност стандардне девијације за Гауссову функцију или колико се пиксела на екрану стапа један у други, па ће већа вредност створити више замућења. Ако није наведен параметар, користи се вредност 0. Параметар је наведен као ЦСС дужина, али не прихвата процентуалне вредности.
дроп-схадов ()
filter: drop-shadow((2,3) ?)Примењује ефекат пада сенке на улазну слику. Отпадна сенка је ефектно замућена, офсетна верзија алфа маске улазне слике нацртане у одређеној боји, састављена испод слике. Функција прихвата параметар типа (дефинисан у ЦСС3 Позадине), с тим што кључна реч 'инсет' није дозвољена.
Ова функција је слична устаљеном својству бок-схадов; разлика је у томе што код филтера неки прегледачи пружају хардверско убрзање ради бољих перформанси.
Дроп-сенка такође опонаша предвиђени обрис предмета, наравно, за разлику од box-shadowтога да само оквир третира као свој пут.
Као и код тект-схадов, не постоји параметар „ширење“ који би створио чврсту сенку већу од објекта.
урл ()
filter: url()url()Функција узима локацију у КСМЛ датотеку која одређује филтер за СВГ, а може укључивати сидро на елемент специфичан филтер. Ево упутства које делује као леп увод у СВГ филтере са забавним демонстрацијама.
Аниматинг Филтерс
Будући да су Филтери анимирани, он може отворити врата за читаву гомилу забаве.
Напомене
Можете да комбинујете било који број функција да бисте манипулисали приказивањем, али редослед је и даље важан (тј. Употреба grayscale()афтер sepia()резултираће потпуно сивим излазом).
Израчуната вредност различита од „ноне“ резултира стварањем контекста слагања на исти начин као што то чини непрозирност ЦСС-а. Својство филтера нема утицаја на геометрију модела оквира циљног елемента, иако филтри могу проузроковати сликање изван оквира оквира елемента. Функције филтера утичу на било који део циљног елемента. То укључује сав садржај, позадину, обрубе, украс текста, обрисе и видљиви механизам за померање елемента на који се примењује филтер и његових потомака. Филтери се такође могу применити на уграђени садржај, као што су појединачни распони текста.
Спецификација такође уводи функцију filter(image-URL, filter-functions)омотавања слике. Омогућило би вам филтрирање било које слике у тренутку када је користите у ЦСС-у. На пример, слику у позадини можете замаглити без замућења текста. Ова функција филтера још није подржана у прегледачима. У међувремену, можете да примените позадину и филтер на псеудо-елемент да бисте створили сличан ефекат.
ИЕ заштићени филтри
Такође се користио filterсвојство, попут:
.half-opacity ( -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); )Углавном се користи за непрозирност када је требало да подржите ИЕ 8 и ниже.
Више информација
- Спецификација ефеката филтера В3Ц
- хттп://хтмл5-демос.аппспот.цом/статиц/цсс/филтерс/индек.хтмл
- Галерија филтера Беннетта Феелија
- МДН Документи
- Могу ли да користим
- хттп://ввв.брокен-линкс.цом/2013/11/20/цросс-бровсер-филтерс-цсс-свг
- хттпс://гитхуб.цом/Сцхепп/ЦСС-Филтерс-Полифилл
- Разумевање ефеката ЦСС филтера
Подршка прегледача
Подаци о подршци за прегледач су од компаније Цаниусе, која садржи више детаља. Број указује на то да прегледач подржава функцију у тој верзији и новијој.
Десктоп
| Хром | Фирефок | ИЕ | Ивица | Сафари |
|---|---|---|---|---|
| 18 * | 35 | Не | 79 | 6 * |
Мобиле / Таблет
| Андроид Цхроме | Андроид Фирефок | Андроид | иОС Сафари |
|---|---|---|---|
| 88 | 85 | 4,4 * | 6,0-6,1 * |