Dobro dizajniran filter je moćan alat, koje korisnici mogu koristiti. Zapravo, ovo je važna funkcija ako vaša web stranica (online trgovina) ima puno proizvoda raspoređenih u različite kategorije.
IZVORI
Za e-trgovinu, to je način da se povećaju stope konverzije smanjenjem vremena koje je korisniku potrebno da pronađe ono što traži.
Stvaranje takvih značajki nikada nije jednostavno: filtri uvelike ovise o sadržaju web stranice; Također, filtarska traka ne bi trebala ometati, fokus bi trebao biti na sadržaju/proizvodu. Stoga smo vam pokušali malo olakšati život tako što smo vam napravili visoko prilagodljivu ploču CSS filtera koja se lako integrira.
Koristi prednosti CSS prijelaza, CSS transformacija i jQueryja kako bi pružio glatke prijelaze kada su potrebni.
Stvaranje struktureHTML struktura je malo složenija nego inače. Prije svega, postoje dva glavna bloka sadržaja: zaglavlje i glavni elementi, drugi se koristi za omotavanje gallery.cd-gallery i filter.cd-filter. Uz ovo imamo ugniježđenu navigaciju (ugniježđenu unutar 2 div elementa, zbog padajućeg efekta vidljivog na Mobilni uredaji) i okidač filtra.cd-filter-okidač .
Također možete primijetiti puno naziva klasa (na primjer u stavkama popisa galerije) i filtere podataka: oni se koriste za filtriranje sadržaja, a ne za stiliziranje.
Bilješka. Svrha elementa .cd-gallery> li.gap je da radi u kombinaciji s tekstom: justify; Svojstvo primijenjeno na .cd-gallery za stvaranje rešetke galerije. Morate stvoriti što više .gap elemenata maksimalan iznos elementi u redu -1.
Filtar sadržaja
-
svi
- svi
- Boja 1
- Boja 2
Nema rezultata
Naslov bloka
Većina CSS-a odnosi se na oblikovanje elemenata obrasca i drugih osnovnih ukrasa. Zanimljivo je kako smo definirali i koristili neke klase - u kombinaciji s jQueryjem - da promijenimo ponašanje nekih elemenata na temelju određenih događaja.
Na primjer: na svim uređajima traka filtra zamrzava se kada dosegne vrh prozora. Da bismo postigli ovaj učinak, upotrijebili smo klasu .is-fixed primijenjenu na glavni element (.cd-main-content) kako bismo mogli orijentirati neke od njegovih potomaka. Konkretno: .cd-tab-filter-wrapper je u statičkoj poziciji, dok su .cd-filter i .cd-filter-trigger u apsolutnoj poziciji (u odnosu na .cd-main-content). Kada primijenimo klasu .is-fixed na .cd-main-content, mijenjamo položaj svih ovih elemenata na Fixed.
Cd-tab-filter-wrapper (boja-pozadine: #ffffff; z-index: 1; ) .cd-filter (pozicija: apsolutna; gore: 0; lijevo: 0; širina: 280px; visina: 100%; pozadina: #ffffff; z-indeks: 2; transformacija: translateX(-100%); prijelaz: transformacija 0,3 s, box-shadow 0,3 s; ) .cd-filter-okidač ( pozicija: apsolutna; gore: 0; lijevo: 0; visina: 50 px; širina: 60 px; z-index: 3; ) .cd-main-content.is-fixed .cd-tab-filter-wrapper ( pozicija: fiksna; gore: 0; lijevo: 0; širina: 100% ; ) .cd-main-content.is-fiksiran .cd-filter ( položaj: fiksan; visina: 100vh; preljev: skriven; ) .cd-main-content.is-fiksiran .cd-filter-okidač ( položaj: fiksan ;)
Još jedna stvar vrijedna spomena je klasa .filter-is-visible. Primjenjuje se na više elemenata kada korisnik pokrene ploču filtera. Na svim uređajima koristi se za promjenu vrijednosti translateX elementa .cd-filter (od -100% do 0). Na većim uređajima (>1170px) također ciljamo .cd-gallery i .cd-tab-filter i smanjujemo njihovu širinu: na taj način ploča neće preklapati sadržaj i korisnik će koristiti dodatne mogućnosti Prostor za primjenu filtara i prikaz promjena u isto vrijeme, bez zatvaranja ploče.
Rukovanje događajimaKako bismo implementirali funkciju filtra sadržaja, integrirali smo dodatak MixItUp jQuery. Da bismo inicijalizirali dodatak u spremniku galerije, koristimo funkciju mixItUp() i deklariramo varijablu buttonFilter koja sadrži sve prilagođene funkcionalnost filtar. Osim toga, koristimo jQuery da otvorimo/zatvorimo ploču filtra i popravimo je (zajedno s navigacijom s karticama) tako da se i dalje prikazuje prilikom pomicanja kroz galeriju.
Kako koristitiNajprije morate preuzeti arhivu dodataka sa stranice razvojnog programera i raspakirati je u direktorij na vašoj web stranici. Dostupne su dvije verzije - minimizirana (produkcijska verzija) i za programere (razvojna verzija). U verziji za programere, tekst dodatka predstavljen je u strukturiranom obliku s komentarima, što je zgodno za razumijevanje principa rada (izvorni kod za lekciju sadrži verziju dodatka za programere s prevedenim komentarima).
Zatim u odjeljak na stranici na kojoj planirate koristiti filtriranje morate umetnuti kod za povezivanje dodatka:
$(dokument).ready(funkcija() ( $("element_za_filtriranje").liveFilter("opcija"); ));
Morate zamijeniti “/path_to_plugin/” putem na kojem se nalazi dodatak liveFilter, koji ste ranije raspakirali. Također morate zamijeniti "element_for_filtering" CSS birač, koji odgovara željenom elementu.
Parametar dodatka "opcija" kontrolira upotrebu animacije prilikom skrivanja i prikazivanja elemenata tijekom filtriranja. Dostupne su sljedeće vrijednosti: osnovna - elementi se jednostavno isključuju/uključuju bez ikakve animacije, slajd - filtrirani elementi će se sažimati/proširivati, fade - filtrirani elementi postupno će se uključivati/isključivati.
Na primjer:
$(ul#filter_me).liveFilter("slajd");
Gornji kod govori dodatku LiveFilter da filtrira nesređeni popis s id-om " filter_me" i koristi animaciju " tobogan”.
Dodatak se može koristiti za nesređene i uređene popise i tablice. Prilikom pozivanja dodatka morate navesti traženi selektor.
Važno! Da bi dodatak radio, na stranicu morate dodati polje za unos teksta s klasom "filtar". Ovo polje će se koristiti za unos teksta filtriranja:
Primjer stranice koja koristi filtar:
Primjer korištenja dodatka LiveFilter $(document).ready(function() ( $(ul#filter_me").liveFilter("slide"); ));
- Točka br. 1.
- Točka br. 2.
- Točka br. 3.
- Točka br. 4.
- Točka br. 5.
- Točka br. 6.
- Točka br. 7.
- Točka br. 8.
- Točka br. 9.
- Točka br. 10.
(function($)( $.fn.liveFilter = function (aType) ( // Odredi što će se filtrirati. var filterTarget = $(this); var child; if ($(this).is("ul")) ( dijete = "li"; ) else if ($(this).is("ol")) ( dijete = "li"; ) else if ($(this).is("tablica")) ( dijete = " tbody tr"; ) // Definiraj varijable var hide; var show; var filter; // Događaj za ulazni element $("input.filter").keyup(function() ( // Dohvati vrijednost filtera filter = $( this) .val(); // Dohvaćanje onoga što treba sakriti i što treba prikazati hide = $(filterTarget).find(child + ":not(:Contains("" + filter + ""))") ; show = $(filterTarget).find(child + ":Contains("" + filter + "")") // Animirajte stavke koje treba sakriti i prikazati if (aType == "basic") ( hide. hide() ; show.show(); ) else if (aType == "slide") ( hide.slideUp(500); show.slideDown(500); ) else if (aType == "fade") ( hide. fadeOut(400 ); show.fadeIn(400); ) )); // Prilagođeni izraz za tekstualnu funkciju koja ne razlikuje velika i mala slova sadrži() jQuery.expr[":"].Sadrži = funkcija(a,i,m)( return jQuery(a ).text().toLowerCase().indexOf(m.toLowerCase())>=0; ); ) ))(jQuery);
Naučili smo prikupiti podatke o klijentu i poslati ih na server. A na serveru su napisali stub na mjesto gdje se trebaju vratiti proizvodi filtrirani po unesenim parametrima. Sada ćemo se riješiti zaglavlja i napisati nekoliko metoda i upita koji izvlače potrebne proizvode iz baze podataka i vraćaju ih klijentu. Lekcija je prilično kratka. Započnimo
Što nam je činiti?Moramo ispuniti samo 3 točke:
- 1. Primite podatke od klijenta i obradite ih prema potrebama poslužitelja. Na primjer, postavite zadane parametre
- 2. Napišite, zapravo, sam kod za dohvaćanje proizvoda iz baze podataka. Prije svega, pripremite sql upit
- 3. Primljene podatke vratiti klijentu
Možda ćete se pitati: zašto ovu jednostavnu operaciju moramo posebno istaknuti ako možemo lako izvući sve podatke iz niza $_GET?
Prvo, kako biste postavili zadane vrijednosti. Ne možete se osloniti na to da će se klijent sam pobrinuti za to.
Drugo, nisu svi podaci u $_GET u upotrebljivom obliku. Na primjer, prikladnije nam je proslijediti sortiranje od klijenta s jednim parametrom u obliku field_direction, na primjer, price_asc. Ali u sql upitu to su zasebni entiteti, pa ih je potrebno prethodno obraditi.
Slična je situacija i s brendovima. Na klijentu ih šaljemo kao niz brendova, a php ih također prima kao niz. Ali za sql upit potreban vam je string - popis robnih marki odvojenih zarezima. Stoga je i marke potrebno dodatno obraditi.
Dakle, napišimo funkciju getOptions() koja će dohvatiti podatke iz $_GET i pretvoriti ih u oblik koji nam odgovara. Već sam dao gotovo sve uvodne informacije, pa pogledajmo odmah gotov kod.
// Dobivanje podataka iz niza _GET funkcija getOptions() ( // Kategorija i cijene $categoryId = (isset($_GET["category"])) ? (int)$_GET["category"] : 0; $minPrice = ( isset($_GET["min_price"])) ? (int)$_GET["min_price"] : 0; $maxPrice = (isset($_GET["max_price"])) ? (int)$_GET["max_price " ] : 1000000; // Marke $brands = (isset($_GET["brands"])) ? implode($_GET["brands"], ",") : null; // Sortiranje $sort = (isset( $ _GET["sort"])) ? $_GET["sort"] : "price_asc"; $sort = explode("_", $sort); $sortBy = $sort; $sortDir = $sort; return array( " " => $brands, "category_id" => $categoryId, "min_price" => $minPrice, "max_price" => $maxPrice, "sort_by" => $sortBy, "sort_dir" => $sortDir); )
Ovdje vidimo da prvo dobivamo ID kategorije. Ako kategorija nije prošla, smatramo da je category_id = 0. Minimalna cijena bit će 0, a maksimalna 1 milijun. Ako vaša internetska trgovina prodaje plutonij (nafta Kinezima, mravi pojedinačno), tada uvijek možete dodati nule u traženi redak ili, u najgorem slučaju, izvršiti plaćanja u eurima.
Transformirajmo sortiranje drugačije. Posebno izvucite polje za sortiranje i parametar: asc ili desc.
Imajte na umu da u svim slučajevima ne zaboravljamo zamijeniti zadanu vrijednost ako traženi parametar nije stigao od klijenta. I sada kada su svi podaci konvertirani, ostaje samo vratiti ih iz funkcije u asocijativnom nizu putem return array(...)
Priprema SQL upita i dohvaćanje podataka iz baze podatakaSvi podaci su pripremljeni u obliku koji nam je potreban, sada napišimo zahtjev i izvršimo ga. Funkcija getGoods($options, $conn) će to učiniti. U parametrima uzima $options - podatke pripremljene prethodnom funkcijom i $conn - objekt veze s bazom podataka koji smo stvorili u prethodnoj lekciji. Naš zadatak je napisati sql upit. Općenito to izgleda ovako:
Odaberite g.id kao good_id, g.good kao good, b.brand kao brand, g.price kao cijenu, g.rating kao ocjenu, g.photo kao fotografiju robe kao g, brandove kao b gdje g.category_id = selected_category i g.brand_id u (popis robnih marki odvojenih zarezima) i g.brand_id = b.id i (g.price između minimalne_cijene i maksimalne_cijene) redoslijed prema sort_field sort_direction
Polja koja su nam potrebna dohvaćamo primjenom niza uvjeta gdje i navođenjem željenog sortiranja. Nema problema s cijenama i sortiranjem, jednostavno zamijenimo tražene vrijednosti na odgovarajućim mjestima u zahtjevu. Ali morate biti pažljiviji s kategorijom i markama, a evo i zašto.
Svaki proizvod koji imamo uvijek ima kategoriju. U našoj bazi podataka ne postoji koncept nulte kategorije - to smo učinili radi vlastite udobnosti, kako bismo shvatili da korisnik u pregledniku nije odabrao nijednu kategoriju (ili je odabrao sve - za nas je to isto). I u ovom slučaju ne bismo trebali uključiti liniju u zahtjev
g.category_id = odabrana_kategorija i
Isto vrijedi i za brendove, ako nisu odabrani, tada preskačemo odgovarajući red. Evo kako to izgleda u kodu.
// Funkcija prijema robe getGoods($options, $conn) ( // Potrebni parametri $minPrice = $options["min_price"]; $maxPrice = $options["max_price"]; $sortBy = $options["sort_by"] ; $sortDir = $options["sort_dir"]; // Neobavezni parametri$categoryId = $options["category_id"]; $categoryWhere = ($categoryId !== 0) ? " g.category_id = $categoryId and " : ""; $brands = $options["brands"]; $brandsWhere = ($brands !== null)? " g.brand_id u ($brands) i " : ""; $query = " odaberite g.id kao good_id, g.good kao good, b.brand kao brand, g.price kao cijenu, g.rating kao ocjenu, g.photo kao fotografiju robe kao g, brandove kao b gdje je $ categoryWhere $brandsWhere g.brand_id = b.id i (g.price između $minPrice i $maxPrice) poredak prema $sortBy $sortDir "; $podaci = $conn->upit($upit); return $data->fetch_all(MYSQLI_ASSOC); )
Prvo izdvajamo varijable cijene i sortiranja iz niza $options - one se jednostavno umeću u upit bez promjena. A za kategoriju i marke formiramo linije $categoryWhere i $brandsWhere prema principu: nužan uvjet za odjeljak where, ako ima podataka, i prazan red ako nema podataka. Tako smo dobili prilično zdrav sql upit koji uvažava sve naše želje. Posljednja dva retka izvršavaju ovaj zahtjev i iz funkcije vraćaju niz objekata s potrebnim poljima. Ostaje samo sve spojiti i poslati primljenu robu nazad klijentu/pregledniku koji već čeka.
Robu vraćamo kupcuOvo je najlakši dio lekcije. Pogledajmo zaglavak napisan u prethodnoj lekciji.
// Povezivanje s bazom podataka $conn = connectDB(); // Vrati uspješan odgovor klijentu echo json_encode(array("code" => "success", "data" => $_GET));
Zamijenimo ovaj kod s
// Povezivanje s bazom podataka $conn = connectDB(); // Primanje podataka od klijenta $options = getOptions(); // Nabavite robu $goods = getGoods($options, $conn); // Vrati uspješan odgovor klijentu echo json_encode(array("code" => "success", "options" => $options, "goods" => $goods));
Dodali smo nekoliko redaka: funkcija getOptions dohvatila je podatke u varijablu $options. Odmah smo ga upotrijebili za dobivanje getGoods robe, rezultati su spremljeni u $goods. I proširili smo odgovor na klijenta. Parametar podataka preimenovao ga je u opcije i nije vratio sadržaj $_GET, već već konvertirane vrijednosti. A u parametru robe vraćen je niz primljene robe.
Ovo zaključuje lekciju. Iako ne možemo koristiti ove podatke na klijentu, renderirajte ih u pregledniku - to ćemo učiniti u sljedećoj lekciji. Ali uvijek možemo otvoriti konzolu, pritisnuti gumbe i potvrdne okvire i pobrinuti se da nam poslužitelj vrati ispravnu robu.
Provjera rezultata radaOdaberimo kategoriju Smartphones i označimo marke Apple i Samsung. U odgovoru ćemo vidjeti da je poslužitelj vratio 3 proizvoda, poredana po rastućoj cijeni 
Sada postavimo minimalnu cijenu na 20 tisuća i promijenimo sortiranje na silaznu cijenu 
Kao što vidite, sada postoje samo 2 proizvoda - jedan Samsung je odbačen zbog cijene od 17 tisuća koja nije odgovarala filterima. I roba se sortira obrnuto. Ako ste sve učinili ispravno, vidjet ćete potpuno istu sliku. 
I dalje se možete igrati s konzolom i provjeriti vraćaju li se točni podaci. Na kraju, najvažnije je postići da filtri rade ispravno, vraćajući ispravan popis proizvoda. Raspršivanje primljenih podataka po stranici, uzimajući u obzir gotov izgled, izvana je najzanimljivija stvar, ali s razvojne točke gledišta prilično je jednostavna. Ali neću pretjerivati - detalji u sljedećoj lekciji.
Materijal je namijenjen uglavnom web programerima početnicima.
Uvod. Često mi se obraćaju klijenti koji su instalirali CMS koji smo sami napisali ili module koje su napisali web programeri početnici koji ne razumiju što je potrebno za zaštitu podataka i često kopiraju funkcije filtriranja ne razmišljajući o tome kako funkcioniraju i što točno s njima treba učiniti .Ovdje ću pokušati što detaljnije opisati uobičajene pogreške prilikom filtriranja podataka PHP skripta i dati jednostavni savjeti kako pravilno filtrirati podatke.
Na internetu postoji mnogo članaka o filtriranju podataka, ali oni nisu potpuni i bez detaljnih primjera.
Ispitivanje. Filtriranje. Pogreška br. 1 Za numeričke varijable koristi se sljedeća provjera:$broj = $_GET["ulazni_broj"]; if (intval($number)) ( ... izvrši SQL upit... )
Zašto će to dovesti do SQL injekcije? Činjenica je da korisnik može odrediti vrijednost u varijabli input_number:
1"+UNION+SELECT
U takvim slučajevima provjera će biti uspješno završena, jer funkcija intval dobiva cjelobrojnu vrijednost varijable, tj. 1, ali ništa se nije promijenilo u samoj varijabli $number, tako da će sav zlonamjerni kod biti proslijeđen SQL upitu.
Ispravno filtriranje:
$broj = intval($_GET["ulazni_broj"]); if ($broj) ( ... izvrši SQL upit... )
Naravno, uvjet se može promijeniti, na primjer ako trebate dobiti samo određeni raspon:
if ($number >= 32 AND $number dir = MAIN_DIR . "/template/" . $config["skin"];
U u ovom slučaju možete zamijeniti vrijednost varijable $_COOKIE["skin"] i izazvati pogrešku, zbog koje ćete vidjeti apsolutni put do mape stranice.
Ako koristite vrijednost kolačića za spremanje u bazu podataka, tada upotrijebite jedno od gore opisanih filtriranja, ovo se također odnosi na varijablu $_SERVER. Pogreška #5. Omogućena je direktiva register_globals. Obavezno ga isključite ako je uključen.
U nekim situacijama možete proslijediti vrijednost varijable koja nije smjela biti proslijeđena, na primjer, ako stranica ima grupe, tada za grupu 2 varijabla $group treba biti prazna ili jednaka 0, ali je dovoljno da se lažira obrazac dodavanjem koda:
U PHP skripti, varijabla $group bit će jednaka 5 ako u skripti nije deklarirana sa zadanom vrijednošću.. Filtriranje. Pogreška #6. Provjerite preuzete datoteke.
Provjerite sljedeće točke:
Na primjer:
$user_id = intval($_REQUEST["user_id"]); ... INSERT INTO REPLOG SET uid = "($user_id)", plus = "1" ... ... AŽURIRAJ Korisnici SET reputation = reputation+1 WHERE user_id = "($user_id)" ...
Ispada da stvaramo unos u bazi podataka koji nam je potpuno beskoristan. Provjerite. Pogreška #2. Prilikom izvođenja različitih vrsta radnji (dodavanje, uređivanje, brisanje) s podacima, ne zaboravite provjeriti prava korisnika za pristup ovoj funkciji i dodatnim značajkama (koristite html oznake ili mogućnost objave materijala bez provjere).
Davno sam ispravio sličnu grešku u jednom modulu foruma, kada je bilo koji korisnik mogao urediti poruku administraciji.
Ispitivanje. Pogreška #3. Kod korištenja višestrukih php datoteke napravite jednostavnu provjeru.U datoteci index.php (ili u bilo kojoj drugoj glavnoj datoteci) napišite sljedeći redak prije uključivanja ostalih php datoteka:
define("READFILE", true);
Na početku drugih php datoteka napišite:
if (! definirano ("READFILE")) ( exit ("Pogreška, pogrešan način datoteke.
Idi na glavno."); }
Na ovaj način ćete ograničiti pristup datotekama. Provjerite. Pogreška #4. Koristite hashove za korisnike. To će pomoći spriječiti pozivanje ove ili one funkcije putem XSS-a.
Primjer sastavljanja hash-a za korisnike:
$secret_key = md5(strtolower("http://site.ru/" . $member["name"] . sha1($password) . date("Ymd"))); // $secret_key je naš hash
Zatim, u svim važnim obrascima, zamijenite unos vrijednošću trenutnog hash-a korisnika:
Dok izvodite skriptu, provjerite:
if ($_POST["secret_key"] !== $secret_key) ( izlaz ("Pogreška: tajni_ključ!"); ) Provjerite. Pogreška #5. Kada ispisujete SQL pogreške, napravite jednostavno ograničenje pristupa informacijama. Na primjer, postavite lozinku za GET varijablu:
if ($_GET["passsql"] == "lozinka") ( ... izlaz SQL pogreške... ) else ( ... Samo informacije o pogrešci, bez detalja... )
To će vam omogućiti da od hakera sakrijete podatke koji mu mogu pomoći da hakira stranicu. Verifikacija. Pogreška #5. Pokušajte ne uključivati datoteke dobivanjem naziva datoteka izvana.
Na primjer:
if (isset($_GET["ime_datoteke"])) ( uključi $_GET["ime_datoteke"] .".php"; )
Koristite prekidač
CSS3 filtri prikazuju se u pregledniku vizualni efekti, slično Photoshop filterima. Filtri se mogu dodati ne samo slikama, već i svim elementima koji nisu prazni.
Skup filtara nije ograničen na one unaprijed instalirane u pregledniku. Također možete koristiti SVG filtere tako da ih preuzmete s veze zajedno sa svg elementom.
Filtri su izvorno stvoreni kao dio SVG specifikacije. Njihov zadatak bio je primijeniti efekte pikselske mreže na vektorsku grafiku. Uz podršku SVG preglednici Postalo je moguće koristiti ove efekte izravno u preglednicima.
Preglednici obrađuju stranicu piksel po piksel, primjenjujući navedene efekte i iscrtavajući rezultat na vrhu izvornika. Dakle, upotrebom nekoliko filtera možete postići različite efekte, oni kao da se preklapaju. Što je više filtara, pregledniku je duže potrebno da prikaže stranicu.
Možete primijeniti više filtara istovremeno. Klasičan način primjene takvih efekata je kada lebdite iznad elementa: hover .
Podrška za preglednikIE: nije podržano
Edge: 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 preglednik: 53.0, 4.4 -webkit-
Chrome za Android: 55.0, 47.0 -webkit-
| zamutiti () | Vrijednost je navedena u jedinicama duljine, na primjer px, em. Primjenjuje Gaussovo zamućenje na izvornu 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 vrijednost veća, to je slika 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 izvornu sliku ispod tamno sive pozadine. Vrijednosti koje se povećavaju od 0 do 100% ili od 0 do 1 postupno će otvoriti izvornu sliku izvornom prikazu, a vrijednosti iznad će povećati kontrast između svijetlih dijelova i sjena. |
| padajuća sjena() | Filtar djeluje slično svojstvima box-shadow i text-shadow. Koristi sljedeće vrijednosti: X pomak Y pomak zamućenje rastezljiva boja sjene. Posebnost filter je da se elementima i njihovim sadržajima dodaje sjena uzimajući u obzir njihovu transparentnost, tj. ako element unutar sebe sadrži tekst, filtar će dodati sjenu i za tekst i za vidljive granice blok. Za razliku od ostalih filtara, za ovaj filtar potrebno je postaviti parametre (minimalna je vrijednost pomaka). |
| sivi tonovi () | Izdvaja sve boje iz slike, čineći izlaz crno-bijelom slikom. Vrijednost je navedena u % ili decimalnim razlomcima. Što je vrijednost veća, to je učinak jači. |
| hue-rotate() | Mijenja boje slike ovisno o navedenom kutu rotacije u kotačiću boja. Vrijednost je navedena u stupnjevima od 0 do 360 stupnjeva. 0deg je zadana vrijednost, što znači da nema učinka. |
| preokrenuti () | Filtar čini sliku negativnom. Vrijednost je navedena u %. 0% ne primjenjuje filtar, 100% potpuno pretvara boje. |
| neprozirnost() | Filtar radi slično kao svojstvo neprozirnosti, dodajući prozirnost elementu. Posebnost je da preglednici pružaju hardversko ubrzanje za filtar, što poboljšava performanse. Dodatni bonus je da se filtar može kombinirati s drugim filtrima u isto vrijeme, stvarajući zanimljive efekte. Vrijednost je postavljena samo na %, 0% čini element potpuno transparentnim, a 100% nema učinka. |
| zasititi() | Kontrolira zasićenost boja, radeći na principu kontrastnog filtra. Vrijednost od 0% uklanja boju, dok 100% nema učinka. Vrijednosti od 0% do 100% smanjuju zasićenost boje, vrijednosti iznad 100% povećavaju zasićenost boje. Vrijednost se može navesti u % ili kao cijeli broj, 1 je ekvivalent 100%. |
| sepija() | Učinak koji oponaša antiku i "retro". Vrijednost od 0% se ne mijenja izgled element i 100% u potpunosti reproducira efekt sepije. |
| url() | Funkcija prihvaća lokaciju vanjske XML datoteke sa svg filtrom ili sidro za filtar koji se nalazi u trenutnom dokumentu. |
| nikakav | Zadana vrijednost. Označava da nema učinka. |
| početni | Postavlja ovo svojstvo na zadanu vrijednost. |
| naslijediti | Nasljeđuje vrijednost svojstva od nadređenog elementa. |