CSS3 filteri su vrlo zanimljivi izdanak SVG-a, koji vam omogućavaju da modificirate HTML elemente i slike primjenom zamućenja, svjetline i mnogih drugih filtera. U ovom vodiču ćemo brzo pogledati kako tačno rade.

Kako ovo funkcionira?

Koristeći samo CSS možemo stvoriti neke prilično složene efekte. Mogu se primijeniti i na slike i na HTML elemente. Svojstvo koje se koristi za kontrolu svih ovih efekata je filter.

filter: filter(vrijednost) ;

Kao što možete očekivati, ovo svojstvo zahtijeva korištenje prefiksa pretraživača. Ali dalje trenutno, samo -webkit-(Chrome i Safari) su jedini pretraživači koji podržavaju ovo svojstvo.

Webkit-filter: filter(vrijednost) ;
-moz-filter: filter(vrijednost) ;
-o-filter: filter(vrijednost) ;
-ms-filter: filter(vrijednost) ;

Filtracija

Postoji veliki broj filtera, pa da bismo bolje razumjeli svaki od njih, pogledajmo ih pojedinačno. Na jedan element se može primijeniti više filtera (odvojenih razmakom), na primjer, osvetljenost I zamućenje:

filter: zamućenje (5px ) svjetlina (0,5 ) ;

Postoji nekoliko filtera koji neće biti pokriveni u nastavku, ali se već mogu lako implementirati postojeći CSS(transparentnost i senke). Evo originalne slike koju ćemo koristiti da pokažemo kako filteri rade:

Prikazaću fotografiju sa primenjenim filterom (prva fotografija) i rezultat filtera u obliku statične slike (druga fotografija), ako koristite pretraživač koji ne podržava filtere i ne vidite rezultat.

Zamućenje

Jeste li ikada željeli napraviti Gaussovo zamućenje na slici ili tekstu koristeći samo CSS? Sa filterima to možete učiniti! Zamućenje se mjeri u pikselima, tako da možete učiniti nešto ovako:

filter: zamućenje(5px) ;
// Specifičan preglednik
-webkit-filter: blur(5px) ;
-moz-filter: zamućenje(5px) ;
-o-filter: zamućenje(5px) ;
-ms-filter: zamućenje (5px) ;

Osvetljenost

Osvetljenost se meri od nula do jedan, 1 je puna osvetljenost(bijela boja), a 0 je početna svjetlina.

filter: svjetlina (0.2 ) ;
// Specifičan preglednik
-webkit-filter: svjetlina(0.2) ;
-moz-filter: svjetlina(0.2) ;
-o-filter: svjetlina(0.2) ;
-ms-filter: svjetlina(0.2) ;

Saturation

Zasićenost se mjeri u postocima.

filter: zasićen (50% ) ;
// Specifičan preglednik
-webkit-filter: saturate(50% ) ;
-moz-filter: saturate (50% ) ;
-o-filter: zasićiti (50% ) ;
-ms-filter: zasićenje (50% ) ;

Rotacija tona

Ovaj filter vam omogućava da promijenite ton tako što ćete ga rotirati (zamislite točak boja koji zatim rotirate). Meri se u stepenima.

filter: nijansa-rotiraj (20 stepeni) ;
// Specifičan preglednik
-webkit-filter: nijansa-rotiranje (20 stepeni) ;
-moz-filter: nijansa-rotiranje (20 stepeni) ;
-o-filter: nijansa-rotiranje (20 stepeni) ;
-ms-filter: nijansa-rotiranje (20 stepeni) ;

Kontrast

Kontrast se, opet, mjeri kao postotak. 100% je zadana vrijednost, 0% će stvoriti potpuno crnu sliku. Sve što je više od 100% dodaje kontrast!

filter: kontrast (150% ) ;
// Specifičan preglednik
-webkit-filter: kontrast (150% ) ;
-moz-filter: kontrast (150% ) ;
-o-filter: kontrast (150% ) ;
-ms-filter: kontrast (150% ) ;

Inverzija

Također se mjeri u procentima. Dostupne vrijednosti se kreću od 0% do 100%. Čudno je da u ovom trenutku webkit ne podržava inverzije ako su manje od 100%.

filter: invert (100%) ;
// Specifičan preglednik
-webkit-filter: invert (100%) ;
-moz-filter: invert (100% ) ;
-o-filter: invert (100% ) ;
-ms-filter: invert (100%) ;

Izbjeljivanje

Ponovo unesite procenat za koji želite da smanjite zasićenost slike. Dostupne vrijednosti se kreću od 0% do 100%.

filter: nijansi sive (100% ) ;
// Specifičan preglednik
-webkit-filter: nijansi sive (100% ) ;
-moz-filter: nijansi sive (100% ) ;
-o-filter: nijansi sive (100% ) ;
-ms-filter: nijanse sive (100% ) ;

Sepia

Pretpostavljam da je ovo vrlo korisno ako želite nešto objaviti na Instagramu. Iako takođe pretpostavljam da nećete koristiti CSS za ovo. Ako ništa drugo, ove nijanse sive i negativne će se zbrajati kako bi vašoj slici dodale sepiju. 100% će biti potpuna sepija, 0% će biti originalna slika.

filter: sepija (100% ) ;
// Specifičan preglednik
-webkit-filter: sepia(100% ) ;
-moz-filter: sepia(100% ) ;
-o-filter: sepija (100% ) ;
-ms-filter: sepija (100% ) ;

Podrška za pretraživač

	Webkit	Mozilla	Trident	Presto
Zamućenje	Eksperimentalno	br	br	br
Osvetljenost
Saturation
Rotirajte tonove
Kontrast
Inverzija	Samo puna inverzija
Izbjeljivanje	Eksperimentalno
Sepia

Ako imate bilo kakvih pitanja, preporučujemo da koristite našu

Najlakši način da smanjite zasićenost slike u boji je pomoću CSS-a. Obično se filter primjenjuje na klasu, jer često morate stvoriti isti efekat za nekoliko slika:

100 % ) ; }

Postavljanje klase za sliku je također jednostavno:

Dodavanje SVG filtera

CSS kod prikazan iznad radi u svim modernim pretraživačima, i desktop i desktop. mobilnih uređaja, uključujući Microsoft Edge pretraživač.

Da biste postigli isti efekat u Firefoxu prije verzije 35, morat ćete koristiti SVG filter, koji ćemo kreirati u zasebnoj datoteci pod nazivom desaturate.svg. Ovaj fajl će sadržavati sljedeći kod:

"0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0" /> < /filter> < /svg>

Ako SVG kod iznad izgleda pomalo zastrašujuće, a niz je previše složen, ne brinite. Ovo je jedan dio koda koji preporučujemo jednostavno kopiranje i lijepljenje kao standardni recept za kreiranje crno-bijele slike.

Zajedno sa ovim SVG fajlom koji se nalazi pored HTML stranica i željenu sliku, CSS kod će biti dopunjen sljedećim redom:

Img.desaturate (filter: sive nijanse( 100 % ) ; filter: url (desaturate) ; }

.svg #sivescale

Dodavanje podrške za Internet Explorer pretraživač Da bi efekat radio u pretraživaču Internet Explorer

od 6 do 9 verzija, primjenjujemo jednostavan Microsoftov vlasnički filter: 100 % ) ; filter: url (desaturate) ; }

Img.desaturate ( filter: sivo ; filter: sivi tonovi ( Ako trebate dodati podršku zastarjele verzije

pretraživača na Webkit motoru, proširimo kod na ovaj način: 100 % Img.desaturate ( -webkit-filter: grayscale(1) ; -webkit-filter: grayscale( 100 % ) ; filter: url (desaturate) ; }

) ; filter: siva ; filter: sivilo (

Ova metoda ne radi u

Internet pretraživači Explorer 10 i 11 verzije. Ako treba da kreirate isti vizuelni efekat u apsolutno svim pretraživačima, možete koristiti rešenje u Javascript programskom jeziku za različite pretraživače ili, na primer, skriptu Greyscale.js. CSS kod napisan iznad nam omogućava da vizualno pretvorimo sliku u crno-bijelu u hodu u pretraživaču, bez potrebe da spremamo nove verzije u Photoshopu. Takođe možete mnogo lakše promijeniti sliku koristeći CSS kod: na primjer, ako smanjite postotak u vrijednostima svojstva filtera sa 100% na 50%, dobit ćete mješavinu efekta desaturacije i originalne slike u boji. :

Malo jednostavniji pristup za naslijeđene verzije Firefox pretraživača je da se SVG kod uključi direktno u CSS kod bez potrebe za dodavanjem bilo čega u 100 % zaseban fajl 100 % i u oznaci Img.desaturate ( -webkit-filter: sive nijanse( ) ;) ; }

filter: sivilo (

) ; i dostigli su takav nivo razvoja da su u stanju da se nose sa nekim važnim funkcijama grafičkih urednika. Primjer za to su CSS filteri, pomoću kojih možete kreirati prekrasne efekte za slike.

Ako je ranije to bilo teško i zamisliti, sada su gotovo svi softverski filteri implementirani u kaskadnoj tablici, od zamućenja do umjetničkih modela boja.

Ali i dalje postoji jedan mali nedostatak CSS filtera - ne podržavaju svi web pretraživači vizuelne efekte. Naravno, samo je pitanje vremena. A kada dođe sat "x", programeri moraju biti spremni. Za sada, pogledajmo šta je do sada već implementirano.

Podrška pretraživača za CSS filtere

U osnovi, svi popularni pretraživači, Firefox, Chrome, Opera, imaju „prijateljski“ odnos sa efektima filtera. Isto se ne može reći za IE, koji u potpunosti odbija da podržava efekte, čak iu najnovijim verzijama.

Browser	Explorer	Chrome	Firefox	Safari	Opera	Android	iOS
Verzija	br	31+	35+	7+	18+	4.4+	6+
filter	—	(-webkit-)	+	(-webkit-)	(-webkit-)	(-webkit-)	(-webkit-)

Funkcije i sintaksa CSS filtera

Sva svojstva CSS-a imaju određene parametre koji kombinuju redosled u kome su vrednosti zapisane. Svojstvo filtera nije izuzetak, kao i ostali, može koristiti kombinaciju nekoliko pravila u jednoj aplikaciji. Na primjer, dodajte filter svjetline za sliku, a nakon razmaka navedite još jedan - kontrast. Sve ćemo pokriti u ovom članku s nekoliko primjera za bolje razumijevanje.

Sintaksa

Filter: naziv filtera (procenat vrijednosti); filter: url(img.svg); filter: zamućenje (10px); filter: osvetljenost (0,9); filter: kontrast (150%); filter: drop-shadow(5px 5px 10px crna); filter: nijanse sive (80%); filter: nijansa-rotiraj (60 stepeni); filter: invert (80%); filter: neprozirnost (50%); filter: zasićen (50%); filter: sepija (40%); /* Primijeni više filtera */ filter: kontrast (150%) sivih tonova (80%);

Lista filtera

Filter	Opis
zamućenje (px)	Filter za zamućenje slike. Stepen zamućenja je prikazan u pikselima. Ako broj nije naveden, zadana vrijednost je 0.
drop-shadow()	Shadow. Alternativa svojstvu box-shadow sa sličnim parametrima i istim redoslijedom pisanja. Izuzetak je četvrta vrijednost "stretch": skoro svi pretraživači je ne podržavaju.
siva skala (%)	Filter “Decolorize”. Primjenjuje nijanse sive na sliku na osnovu procenta koji odredite. Negativna vrijednost nije dozvoljena, a originalnost slike je 0.
svjetlina (%)	Podesite svjetlinu slike. Vrijednost od 100% pokazuje početnu tačku svjetline. Prilagođavanje se vrši i negativno (-50%) i pozitivno (150%).
kontrast (%)	Podesite kontrast slike. Kao i kod prethodnog filtera, vrijednost od 100% će pokazati porijeklo. Promjene se mogu postaviti negativne (-20%) ili pozitivne (120%).
nijansa-rotirati (stepen)	Rotacioni preklapanje tonova boje. U zavisnosti od navedenog stepena (od 0 stepeni do 360 stepeni), slika će biti prilagođena boji, koja je određena točkom boja.
obrnuti (%)	Inverzija slike. Vrijednost od 0 do 100% se primjenjuje bez negativnog parametra.
zasićenje (%)	Zasićenost slike. Početna pozicija je određena na 100% i nema negativnu vrijednost.
sepija (%)	Efekat sepije. Originalnost slike je određena na 0% i dostupna je do 100% bez negacije.
neprozirnost (%)	Transparentnost slike. Drugi filter koji ima slično svojstvo neprozirnosti sa istim metodama upotrebe. Postavka je dozvoljena od 0 do 100% bez negativnog parametra.
url()	CSS veza do SVG elementa sa određenim #id.
početni	Postavlja zadanu vrijednost svojstva.
naslijediti	Nasljeđuje sve vrijednosti svojstava svog roditeljskog elementa.

Primjeri CSS filtera

Došli smo do zanimljivog dijela članka, u kojem ćemo razmotriti svaki filter posebno s primjerima njegove primjene. Radi jasnoće, koristit će se tri slike. Prvi će pokazati početnu tačku, izgled originalnosti. Drugi će služiti kao statički primjer primjene filtera, a treći će pokazati efekat lebdenja, prelazak kursora miša preko slike.

Filter za zamućenje

IN grafički uređivači Filter za zamućenje je nezamjenjiv alat i često se koristi u radu. Lako može stvoriti zamućenu sliku, ali može stvoriti efekt fokusiranja na određeni element dok ostatak slike pada pod zamućenje. I mnogo više.

U dizajnu web stranice (na primjer, zamućenje) može se koristiti kao podloga za bolju čitljivost teksta koji se nalazi na slici. Zapravo, zamućenje je Gausovo od vrijednosti od 0 px dok potpuno ne nestane.

Original

Filter

Lebdeći efekat

/*statičko pravilo*/ .efbl1 img( filter: blur(2px); -webkit-filter: blur(2px); ) /*za efekat lebdenja*/ .efbl2 img(prijelaz: sve 0,6s lakoća 0s;) :hover img( filter: blur(4px); -webkit-filter: blur(4px); prijelaz: sve 0,6s lakoća 0s; )

Filter sjena

Svojstvo sjene došla nam je s trećom verzijom kaskadne tablice. Naravno, to je poznato svima koji se bave razvojem web stranica, jer box-shadow igra važnu ulogu u dizajnu. Filter drop-shadow može se nazvati inferiornom alternativom sa sličnim parametrima, a ima ih samo 5, ne računajući unutrašnju sjenu.

Redoslijed pisanja je sljedeći: 5px/-5px (horizontalni pomak), 5px/-5px (vertikalni pomak), 15px (radijus zamućenja sjene), 5px/-5px (rastezanje sjene), crno (boja). Filter podržava svu sintaksu osim vrijednosti istezanja i umetanja, kao i dodavanje više sjenki odvojenih zarezima. Ali unatoč svemu tome, postoje neke prednosti, na primjer, filter uzima u obzir pseudoelemente, što vam omogućava da prikažete točan oblik sjene elementa.

Zanimljivo je i to da kada blok nema pozadinu, već je naveden samo ivičnjak, tada će se pri korištenju box-shadow prikazati sjena, navodno uzimajući u obzir pozadinu, odnosno čvrstu. A u slučaju korištenja drop-shadow, sjena poprima oblik poteza bez uzimanja u obzir pozadine.

Original

Filter

Lebdeći efekat

/*statičko pravilo*/ .efdrswd1 img( filter: drop-shadow(6px 7px 3px rgba(0, 0, 0, 0.4)); -webkit-filter: drop-shadow(6px 7px 3px rgba(0, 0, 0) , 0.4)); ) /*za efekat lebdenja*/ .efdrswd2 img(tranzicija: sve 0.6s lakoća 0s; ) .efdrswd2:hover img(filter: drop-shadow(6px 7px 3px rgba(0, 0, 0, ). 0.4) -webkit-filter: drop-shadow(6px 7px rgba(0, 0, 0, 0.4));

Filter za dekolorizaciju

Klasični stil fotografije za sva vremena u pravom smjeru. Filter dozvoljava samo jednu vrijednost - pozitivnu. U zavisnosti od navedenog procenta, nijanse sive će glatko zamijeniti boju slike. Također, umjesto postotaka, možete koristiti razlomke do cijelog broja (0,01/1).

Original

Filter

Lebdeći efekat

/*statičko pravilo*/ .efgrays1 img( filter: nijansi sive (90%); -webkit-filter: nijansi sive (90%); ) /*za efekat lebdenja*/ .efgrays2 img( prijelaz: sve 0,6s lakoća 0s; ) .efgrays2:hover img( filter: sivilo (90%); -webkit-filter: nijansi sive (90%); prijelaz: sve 0,6s lakoća 0s; )

Filter za osvetljenje

Dodavanje svjetla "neistraženim" crnim uglovima slike. Često se koristi u obradi fotografija, jer se amaterske fotografije obično snimaju na slabo osvijetljenim mjestima. Svjetlina filtera je podesiva od 0% (potpuno crna slika) do skoro potpunog nestajanja slike. Originalna tačka je definisana kao 100%, a vrednost se takođe može navesti kao razlomak.

Original

Filter

Lebdeći efekat

/*statičko pravilo*/ .efbrig1 img( filter: svjetlina (150%); -webkit-filter: svjetlina (150%); ) /*za efekat lebdenja*/ .efbrig2 img( prijelaz: sve 0,6s lakoća 0s; ) .efbrig2:hover img( filter: svjetlina (150%); -webkit-filter: svjetlina (150%); prijelaz: sve 0,6s lakoća 0s; )

Filter kontrasta

Jednostavan način da sliku učinite izražajnijom je eksperimentiranje s postavkama svjetline najsvjetlijih i najtamnijih dijelova slike. Kontrastni filter je spreman pomoći u tome. Njegovi parametri, kao i mnogi drugi, isključuju negativnu vrijednost (-150%), a početna pozicija je naznačena na 100%. Pored procenata, dozvoljeni su i razlomci (1,5).

Original

Filter

Lebdeći efekat

/*statičko pravilo*/ .efcontr1 img( filter: kontrast (150%); -webkit-filter: kontrast (150%); ) /*za efekat lebdenja*/ .efcontr2 img( prijelaz: sve 0,6s lakoća 0s; ) .efcontr2:hover img( filter: kontrast (150%); -webkit-filter: kontrast (150%); prijelaz: sve 0,6s lakoća 0s; )

Filter tonova boja

Odlična tehnika dizajna u dizajnu slika koja odgovara stilu dizajna glavnog resursa. Ideja je da se nijansa odabrane boje preklopi na originalnu sliku. Omjeri izlaze u zavisnosti od datog stepena, koji označava tačku boje na krugu boja.

Ako je vrijednost pozitivna (150 stupnjeva), tada se rotacija događa u smjeru kazaljke na satu. Prema tome, ako je negativan, onda u suprotnom smjeru kazaljke na satu. U dva položaja počinje od 0 stepeni do 360 stepeni.

Original

Filter

Lebdeći efekat

/*statičko pravilo*/ .efhrotai1 img( filter: hue-rotate(180deg); -webkit-filter: hue-rotate(180deg); ) /*za efekat lebdenja*/ .efhrotai2 img( prijelaz: sve 0,6s lakoća 0s ) .efhrotai2:hover img( filter: hue-rotate(180deg); -webkit-filter: hue-rotate(180deg); prijelaz: sve 0,6s lakoća 0s; )

Inverzijski filter

Specifičan efekat koji vam omogućava da okrenete boju slike naopako. U grafičkim uređivačima ima određenu ulogu i dešava se da se bez njegovog učešća ne može postići željeni rezultat. Parametar invert filtera je specificiran samo u pozitivnom smjeru od vrijednosti od 0% do 100%.

Original

Filter

Lebdeći efekat

/*statičko pravilo*/ .efinve1 img( filter: invert(100%); -webkit-filter: invert(100%); ) /*za efekat lebdenja*/ .efinve2 img( prijelaz: sve 0,6s lakoća 0s; ) .efinve2:hover img( filter: invert(100%); -webkit-filter: invert(100%); prijelaz: sve 0.6s lakoća 0s; )

Filter zasićenja

Kada slika izgubi svoju prirodnu boju iz nepoznatih razloga (nešto poput majice izbijeljene na suncu), povećanje zasićenosti može momentalno vratiti njen izvorni izgled. A ako se ovaj filter koristi u kombinaciji sa drugim filterima, rezultat će biti vrlo zadovoljavajući. Postavka se vrši od 0 početnog prikaza do velikih brojeva.

Original

Filter

Lebdeći efekat

/*statičko pravilo*/ .efsatut1 img( filter: saturate(165%); -webkit-filter: saturate(165%); ) /*za efekat lebdenja*/ .efsatut2 img( prijelaz: sve 0,6s lakoća 0s; ) .efsatut2:hover img( filter: saturate(165%); -webkit-filter: saturate(165%); prijelaz: sve 0.6s lakoća 0s; )

Sepia filter

Imitacija efekta starih fotografija (blago smeđa nijansa). Time se postiže retro stil slike, koji je posebno popularan. Sepia filter je podesiv od 0% (početna pozicija) do 100%.

Original

Filter

Lebdeći efekat

/*statičko pravilo*/ .efsepiaa1 img( filter: sepia(100%); -webkit-filter: sepia(100%); ) /*za efekat lebdenja*/ .efsepiaa2 img( prijelaz: sve 0,6s lakoća 0s; ) .efsepiaa2:hover img( filter: sepia(100%); -webkit-filter: sepia(100%); prijelaz: sve 0,6s lakoća 0s; )

Transparentnost filtera

Filter sličan svojstvu neprozirnosti iz verzije 3 kaskadne tablice. Sintaksa je ista, ali je vrijednost transparentnosti podesiva od 0% do 100% (izvorna pozicija).

Original

Filter

Lebdeći efekat

/*statičko pravilo*/ .efopaty1 img( filter: neprozirnost (50%); -webkit-filter: neprozirnost (50%); ) /*za efekat lebdenja*/ .efopaty2 img( prijelaz: sve 0,6s lakoća 0s; ) .efopaty2:hover img( filter: neprozirnost (50%); -webkit-filter: neprozirnost (50%); prijelaz: sve 0,6s lakoća 0s; )

Filter link

Prilagođeni filter se kreira na osnovu SVG elemenata sa specifičnim identifikatorom, koji se naknadno može koristiti u CSS-u kroz filter linkova. Efekti mogu biti vrlo različiti od standardnih filtera, od maski za prekrivanje do banalne transparentnosti.

Generator CSS filtera

Dugo je bio običaj da se kreiraju generatori različitih CSS svojstava. , i mnogo, mnogo više. Služe kao alat za lakši rad. A za webmastere početnike mogu imati dvostruku korist. Vrlo su jednostavni za korištenje: pomjerite klizače i odmah možete vidjeti rezultate. A kada završite, ostaje samo da kopirate generirani kod. Isto važi i za generatore CSS filtera. Evo dva od njih za vašu referencu:

Zaključak

Recenzija se pokazala prilično velikom, ali nadam se da će nekome koristiti u praksi. Takođe, ne zaboravite da kombinujete filtere, jedan je dobar, ali dva će biti bolji u određenim slučajevima.

CSS3 filteri reprodukovati vizuelne efekte u pretraživaču slične Photoshop filterima. Filteri se mogu dodati ne samo slikama, već i svim nepraznim elementima.

Skup filtera nije ograničen na one koji su prethodno instalirani u pretraživaču. Takođe možete koristiti SVG filtere tako što ćete ih preuzeti sa veze zajedno sa svg elementom.

Filteri su prvobitno kreirani kao dio SVG specifikacije. Njihov zadatak je bio da primene efekte zasnovane na mreži piksela na vektorsku grafiku. Uz podršku pretraživača za SVG, sada je moguće koristiti ove efekte direktno u pretraživačima.

Preglednici obrađuju stranicu piksel po piksel, primjenjujući navedene efekte i crtajući rezultat na vrhu originala. Stoga, korištenjem nekoliko filtera možete postići različite efekte; Što je više filtera, pretraživaču je duže potrebno da prikaže stranicu.

Možete primijeniti više filtera u isto vrijeme. Klasičan način primjene takvih efekata je kada se lebdi iznad elementa: hover .

Podrška za pretraživač

IE: ne podržava
ivica: 13.0 osim url()
Firefox: 35.0
Chrome: 18.0 -webkit-
safari: 9.1, 6.0 -webkit-
Opera: 40.0, 15.0 -webkit-
iOS Safari: 9.3, 6.1 -webkit-
Android pretraživač: 53.0, 4.4 -webkit-
Chrome za Android: 55.0, 47.0 -webkit-

filter
zamagljivanje()	Vrijednost je navedena u jedinicama dužine, na primjer px, em. Primjenjuje Gaussovo zamućenje na originalnu sliku. Što je veća vrijednost radijusa, to je veće zamućenje. Ako nije navedena vrijednost radijusa, zadana vrijednost je 0.
svjetlina()	Vrijednost je navedena u % ili decimalnim razlomcima. Mijenja svjetlinu slike. Što je veća vrijednost, slika je svjetlija. Zadana vrijednost je 1.
kontrast()	Vrijednost je navedena u % ili decimalnim razlomcima. Podešava kontrast slike, tj. razlika između najtamnijih i najsvjetlijih područja slike/pozadine. Zadana vrijednost je 100%. Vrijednost nula će sakriti originalnu sliku ispod tamno sive pozadine. Vrijednosti koje se povećavaju od 0 do 100% ili od 0 do 1 postepeno će otvoriti originalnu sliku originalnom prikazu, a vrijednosti iznad će povećati kontrast između svjetla i sjenki.
drop-shadow()	Filter djeluje slično svojstvima box-shadow i text-shadow. Koristi sljedeće vrijednosti: Pomak X-ose Pomak Y-ose zamućenje rastezanje boje sjene. Posebnost filtera je da se senka dodaje elementima i njegovom sadržaju uzimajući u obzir njihovu transparentnost, tj. ako element sadrži tekst unutra, filter će dodati sjenu i za tekst i za vidljive granice bloka. Za razliku od ostalih filtara, za ovaj filter je potrebno podesiti parametre (minimum je vrijednost pomaka).
sive nijanse()	Izvlači sve boje iz slike, čineći izlaz crno-bijelom slikom. Vrijednost je navedena u % ili decimalnim razlomcima. Što je veća vrijednost, to je učinak jači.
nijansa-rotiraj()	Mijenja boje slike ovisno o specificiranom kutu rotacije u kotaču boja. Vrijednost je navedena u stepenima od 0 stepeni do 360 stepeni. 0deg je zadana vrijednost, što znači da nema efekta.
invert()	Filter čini sliku negativnom. Vrijednost je navedena u %. 0% ne primjenjuje filter, 100% potpuno pretvara boje.
neprozirnost()	Filter radi slično svojstvu neprozirnosti, dodajući transparentnost elementu. Posebna karakteristika je to što pretraživači pružaju hardversko ubrzanje za filter, što poboljšava performanse. Dodatni bonus je što se filter može kombinovati sa drugim filterima u isto vreme, stvarajući zanimljive efekte. Vrijednost je postavljena samo na %, 0% čini element potpuno transparentnim, a 100% nema efekta.
zasititi()	Kontroliše zasićenost boja, radeći na principu kontrastnog filtera. Vrijednost od 0% uklanja boju, dok 100% nema efekta. Vrijednosti od 0% do 100% smanjuju zasićenost boja, vrijednosti iznad 100% povećavaju zasićenost boja. Vrijednost se može specificirati u % ili kao cijeli broj, 1 je ekvivalentno 100% .
sepija()	Efekat koji imitira antiku i "retro". Vrijednost od 0% se ne mijenja izgled element, i 100% u potpunosti reprodukuje efekat sepije.
url()	Funkcija prihvata lokaciju eksterne XML datoteke sa svg filterom ili sidro za filter koji se nalazi u trenutnom dokumentu.
nijedan	Zadana vrijednost. Označava da nema efekta.
početni	Postavlja ovo svojstvo na njegovu zadanu vrijednost.
naslijediti	Nasljeđuje vrijednost svojstva od roditeljskog elementa.

Zdravo. Danas nećete nikoga iznenaditi prekrasnim efektima na web stranicama. Neki to rade u Flashu zadnjih 10 godina, drugi to još nisu prestali raditi u Javascriptu, ali oni najnapredniji već duže vrijeme koriste CSS3. To je ono što ćemo raditi danas.

Naučimo kako dekolorizirati CSS slika(CSS slika u nijansama sive), i uradimo to lijepo

Dakle, počnimo s nečim jednostavnim, trebaju nam prekrasne fotografije, uzmimo ovo:

Moramo da je desaturiramo (obeziti CSS sliku - ukloniti boje, učiniti sliku crno-belom). Za ovo (i za rad sa grafikom uopšte) CSS3 ima poseban alat za filtriranje.

Ovo je ono što ćemo koristiti.

Rešenje: obezbojiti sliku CSS

Prvo, postavimo samu sliku:

Zatim ćemo postaviti stil za sliku:

Img ( -webkit-filter: tonove sive (100%); -moz-filter: nijanse sive (100%); -ms-filter: nijanse sive (100%); -o-filter: nijanse sive (100%); filter: nijanse sive( 100%) filter: siva /* IE 6-9 */ )

Sada će naša slika postati crno-bijela.

Možete, naravno, stati na tome, ali mnogo je zanimljivije kada slika odgovara i na radnje korisnika.

Predlažem da to učinite tako da kada pređete mišem preko slike, postepeno postaje obojena.

Zapravo, ovo nije nimalo teško za napraviti, a ne morate uopće znati Javascript.

Animirajte sliku bez boje CSS

Dodajmo malo našem prethodnom stilu:

Img ( -webkit-filter: tonove sive (100%); -moz-filter: nijanse sive (100%); -ms-filter: nijanse sive (100%); -o-filter: nijanse sive (100%); filter: nijanse sive( 100%); filter: siva /* IE 6-9 */ ) img:hover (-webkit-filter: nema; -ms-filter: nema; : nema filtera: nema /* IE 6-9 */ )

Ovo će omogućiti da slika postane obojena kada pređete mišem preko nje. Koristimo i CSS3 prijelaz da animiramo proces promjene boje:

Img ( -webkit-filter: tonove sive (100%); -moz-filter: nijanse sive (100%); -ms-filter: nijanse sive (100%); -o-filter: nijanse sive (100%); filter: nijanse sive( 100%): sivo /* IE 6-9 */ -webkit-transition: sve 1s; */ ) img:hover ( -webkit-filter: nema; -moz-filter: nema; -ms-filter: nema; -o-filter: nema; filter: nema; filter: nema; /* IE 6-9 * / )

Parametar all u tranziciji kaže da će pravilo raditi za sve stilove, a drugi parametar je vrijeme animacije.
U prvom parametru možete odrediti određeno svojstvo (na primjer, visinu, da se animira samo visina), au drugom vrijeme u sekundama (može biti u decimalnim razlomcima - 0,1s).